# Quick start

Install ferry-ui, add its styles and show your first component.

## Install the library

ferry-ui is one package. It needs React 19.

```sh
npm install ferry-ui
pnpm add ferry-ui
yarn add ferry-ui
bun add ferry-ui
```

Your bundle contains only the components that your app imports.

## Add the styles

Your app uses Tailwind CSS v4? Import the theme of ferry-ui after Tailwind.

```css title="app.css"
@import "tailwindcss";
@import "ferry-ui/fonts.css"; /* optional: Inter and Source Code Pro */
@import "ferry-ui/theme.css";
```

Your app does not use Tailwind? Import the compiled stylesheet at the root of the app.

```ts title="main.tsx"

```

## Mount the providers

Mount the providers one time, at the root of the app.

```tsx title="providers.tsx"

  return (
    <ThemeProvider defaultTheme="system">
      <TooltipProvider>
        {children}
        <Toaster />
      </TooltipProvider>
    </ThemeProvider>
  )
}
```

| Provider | Role |
| --- | --- |
| `ThemeProvider` | Applies the light theme or the dark theme. |
| `TooltipProvider` | Gives one delay to all the tooltips. |
| `Toaster` | Shows the messages of `toast()`. |

## Show a component

Import each component from the package root. This example shows an empty list with one action.

```tsx
import { Button, EmptyState, toast } from 'ferry-ui'
import { FolderKanban, Plus } from 'lucide-react'

export default function NoProjects() {
  return (
    <EmptyState
      icon={<FolderKanban />}
      title="No projects yet"
      description="Projects group your invoices, members and API keys."
      actions={
        <Button variant="primary" icon={<Plus />} onClick={() => toast.success('Project created')}>
          New project
        </Button>
      }
    />
  )
}
```

## Use ferry-ui with an AI assistant

Each page has a **View as Markdown** link. Give this link to your assistant.

The file [llms.txt](/llms.txt) lists all the pages. The repository also has an `AGENTS.md` file with the rules, the tokens and the full catalog.

## Next steps

- Read [Styling](/docs/handbook/styling) to learn the tokens and the rules for `className`.
- Read [Theming](/docs/handbook/theming) to give ferry-ui the colors of your product.
- Open a component page, for example [Button](/docs/components/button).