Installation

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

Choose your path

Fastest: Start from a template. Browse pre-built Starters—Next.js, Vite, Astro, Tauri, and more. Clone, install, build. Everything's configured.

Quick: Use the CLI. One command sets up UI Lab in an existing project:

npx ui-lab init

Manual: Full control. Follow the steps below for custom setups.

Interactive Installation

Step-by-step guidance for your framework:

Target framework

Next.js
Vite
Coming soon
Remix
Coming soon
Tauri
Coming soon

Installation Steps

1. Install core package

npm i ui-lab-components

2. Extend Tailwind content paths

tailwind.config.ts
export default {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/ui-lab-components/**/*.{js,ts,jsx,tsx}",
  ],
  // ...existing config
}

3. Add root theme (globals.css or equivalent)

app/globals.css
@import "ui-lab-components/styles/base.css";

@theme {
  --background-50:  oklch(99%  0.001 240);
  --background-100: oklch(97%  0.002 240);
  /* ...950 */
  --background-surface: var(--background-100);
  --background-contrast: var(--background-950);

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
}

4. Import stylesheet in root layout/entry

import "./globals.css";

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

1

Install

pnpm add ui-lab-components
2

Import styles

import 'ui-lab-components/styles.css';

Add this to your root layout (app/layout.tsx in Next.js, main.tsx in Vite).

3

Use components

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

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

Troubleshooting

Styles look wrong or missing

Verify Tailwind v4:

npm ls tailwindcss

Should show v4.x.x. If not: npm install tailwindcss@latest

PostCSS error

Check postcss.config.mjs includes:

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

Restart dev server after changes.

Styles still not applying

  1. Clear cache: rm -rf node_modules/.cache && npm run dev
  2. Verify style import exists in your root layout file

Still stuck?

Compare against the Components gallery. File issues on GitHub.

Next steps