Installation

Add UI Lab to any Tailwind v4 project in under one minute.

Who this is for

You will accomplish:

Install UI Lab components in your project
Import and render your first component
Have full component library ready to use

Interactive Installation

The component below provides step-by-step guidance for your framework (Next.js or Vite):

Target framework

Next.js

Vite

Coming soon

Remix

Coming soon

Tauri

Coming soon

Installation method

Automated setup via CLI

The official installer configures Tailwind, injects the required @theme tokens, and optionally copies component source.

npm i ui-lab-components

• Installs ui-lab-components and peer dependencies

• Detects Tailwind v4 and injects required content paths

• Adds @theme defaults to your root stylesheet

• Optional interactive component selection

Verification

Start your dev server and render a test component:

import { Button } from "ui-lab-components";

export default function Home() {
  return <Button>UI Lab ready</Button>;
}

No runtime errors and correct styling confirms successful installation.

Manual Installation

If you prefer manual setup or need more control, follow these steps:

1

Install Dependencies

npm install ui-lab-components
# or
pnpm add ui-lab-components

2

Import Styles

Add component styles to your application root:

// app/layout.tsx (Next.js) or main.tsx (Vite)
import 'ui-lab-components/styles.css';

3

Import and Use

Start using components immediately:

import { Button, Card, Input } from 'ui-lab-components';

export default function Home() {
  return (
    <Card>
      <Card.Header>
        <Card.Title>Welcome to UI Lab</Card.Title>
      </Card.Header>
      <Card.Content>
        <Input placeholder="your@email.com" />
      </Card.Content>
      <Card.Footer>
        <Button>Get Started</Button>
      </Card.Footer>
    </Card>
  );
}

Troubleshooting

Components don't render or styles look wrong

Check Tailwind CSS v4 is installed:

npm ls tailwindcss

You should see v4.x.x. If not, upgrade:

npm install tailwindcss@latest

PostCSS error during build

Ensure postcss.config.mjs exists and includes @tailwindcss/postcss:

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

Then restart your dev server:

npm run dev

Styles still not applying

Clear your node_modules cache:
```
rm -rf node_modules/.cache
npm run dev
```
Check that component styles are imported in your root file—without this, styles won't load

Still having issues?

Check the Component Gallery to verify expected appearance. If something looks different, file an issue on GitHub.

Next Steps

Browse the Component Gallery to explore all available components
Read Getting Started for common patterns
Learn Theming to customize colors and tokens