> ## Documentation Index
> Fetch the complete documentation index at: https://docs.membrane.agency/llms.txt
> Use this file to discover all available pages before exploring further.

# UI Components

> For now, you are expected to have [Tailwind Preflight](https://tailwindcss.com/docs/preflight) installed, this won't be necessary in future.\
> It **must be** imported before `@membranehq/react/styles.css`.

Each component and its parts can be addressed by their unique class name. You can use them to style your components and interact with them.

You can find a full list of parts and class names of a given component on its respective documentation page.

## Default Styles

To apply default styles to components, simply import styles.css:

```tsx theme={null}
import '@membranehq/react/styles.css'
```

## Custom Styles

All style layers exported by `styles.css` are prefixed with `iap-` value to prevent layers collision.

```css theme={null}
@layer iap_reset, iap_base, iap_tokens, iap_recipes, iap_utilities;
```

Let's looks at the imaginary `button` component example:

<Frame>
  <img src="https://files.readme.io/9606a1e2e1817c89a1e4d69c538b5b30069922735cd891cf76a9253f5c1c7fb0-Screenshot_2025-05-29_at_9.30.37_PM.png" alt="UI Components illustration" />
</Frame>

### Styling with CSS

When using plain CSS it is enough to just use `className` of a part.\
Let's change button background color to red and both icons to black:

```css theme={null}
/* styles.css */
@layer iap_reset, iap_base, iap_tokens, iap_recipes, iap_utilities;

@layer iap_reset {
  @tailwind base;
}

.button__container {
  background: #e54d2e;
}

.button__container:hover {
  background: #dd4425;
}

.button__icon-left,
.button__icon-right {
  background: #000;
}
```

```tsx theme={null}
import { ExampleButton } from '@membranehq/react'
import './styles.css'
import '@membranehq/react/styles.css'

const App = () => {
  return <ExampleButton />
}
```

<Frame>
  <img src="https://files.readme.io/0d8e876b88e1ba3f8ddf40251d0a6268cab3b0e12a8a0aa810d6fda5d5b177c1-Screenshot_2025-05-29_at_9.30.28_PM.png" alt="UI Components illustration" />
</Frame>

**Example**

<Columns cols={1}>
  <Card title="Live example" href="https://codesandbox.io/p/github/integration-app/integration-app-react-css-example/main" target="_blank">
    Project with live CSS styling example
  </Card>
</Columns>

### Styling with Tailwind

For projects that use Tailwind an extra step is required.\
To avoid layers order collision you need to define layers in your main `css` file.

You can target part `className` by using [`@apply` directive](https://tailwindcss.com/docs/functions-and-directives#apply).

In this example let's make button sharp and blue, then change the title text style to bold:

```css theme={null}
/* styles.css */
@layer iap_reset, iap_base, iap_tokens, iap_recipes, iap_utilities;

@layer iap_reset {
  @tailwind base;
}

@tailwind components;
@tailwind utilities;

.button__container {
  @apply rounded-none;
}

.button__title {
  @apply font-bold bg-blue-700;
}
```

```tsx theme={null}
import { ExampleButton } from '@membranehq/react'
import './styles.css'
import '@membranehq/react/styles.css'

const App = () => {
  return <ExampleButton />
}
```

<Frame>
  <img src="https://files.readme.io/145b0617bdc1abca526f2447d8fe31c0329169413eaf92b53e3bc64965504509-Screenshot_2025-05-29_at_9.30.21_PM.png" alt="UI Components illustration" />
</Frame>

**Example**

<Columns cols={1}>
  <Card title="Live example" href="https://codesandbox.io/p/github/integration-app/integration-app-react-tailwind-example/main" target="_blank">
    Vite project with live Tailwind styling example
  </Card>

  <Card title="Next.js project example" href="https://github.com/integration-app/next-tailwind-overrides-example" target="_blank">
    Next.js project with Tailwind styling example
  </Card>
</Columns>