Overview

UI Lab is a straightforward component library for React devs who want things simple and fast. You get ready-to-use components that play nice with Tailwind CSS right away. No messing with heavy configs or bloated APIs. Drop them into a landing page, dashboard, or bigger app, and tweak as needed without much hassle.

Core values

Ship faster. We keep components minimal on purpose. They skip the overkill you see in some libraries but still cover what you actually need in real projects. They're composable, accessible, come with good defaults, and easy to adjust for your own branding. No starting from zero every time.

Your styles stay yours. Everything's built straight on Tailwind. You control it all with utility classes. No weird CSS-in-JS stuff, no style clashes, no hidden magic. It's all out in the open.

Focus on dev experience. Props are clean and make sense. Behavior's predictable. Feels like normal React. Less digging through docs, more actual building.

Who this is for

React developers with Tailwind v4 already set up. You should know React basics (components, hooks, JSX). This guide teaches you to import and use UI Lab components in 10 minutes.

Installation

Start with our Installation guide to add UI Lab to your project.

Your first component

Forget about complex setup steps. Components in UI Lab work the same way as any React component. Here's a button with different variants and sizes:

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

export default function Home() {
  return (
    <div className="flex items-center gap-4">
      <Button>Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button size="lg">Large</Button>
      <Button loading>Loading...</Button>
    </div>
  );
}

Common patterns

UI Lab components are designed to compose together naturally. Here are a few real-world patterns you'll build with regularly:

Login form

Combine Card, Input, Label, and Button to create complete, accessible forms:

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

export function LoginCard() {
  return (
    <Card className="w-full max-w-sm">
      <Card.Header>
        <Card.Title>Welcome back</Card.Title>
      </Card.Header>
      <Card.Content className="space-y-4">
        <div>
          <Label htmlFor="email">Email</Label>
          <Input id="email" type="email" placeholder="you@example.com" />
        </div>
        <div>
          <Label htmlFor="pass">Password</Label>
          <Input id="pass" type="password" />
        </div>
      </Card.Content>
      <Card.Footer>
        <Button className="w-full">Sign in</Button>
      </Card.Footer>
    </Card>
  );
}

Dashboard widget

Build data-rich interfaces by layering components. Here's a simple analytics widget that shows key metrics:

import { Card, Badge } from "ui-lab-components";

export function RevenueWidget() {
  return (
    <Card className="p-6">
      <div className="flex items-center justify-between">
        <div>
          <p className="text-foreground-400 text-sm">Revenue</p>
          <p className="text-2xl font-semibold">$45,231</p>
        </div>
        <Badge>+12.5%</Badge>
      </div>
    </Card>
  );
}

What's next?

• Need a specific component? Browse all components
• Building a form? See Build a Form with Validation
• Need a modal? See Create a Modal Dialog
• Customize colors/spacing? See Dark Mode Setup
• Deep dive into styling? See Styling & CSS Architecture