UI Components

Using shadcn/ui components, layout primitives, and Tailwind CSS.

Overview

Vibekit apps come with 40+ shadcn/ui components pre-installed. These are copy-paste React components built on Radix UI primitives, styled with Tailwind CSS.

Using components

Import components from @/components/ui/:


import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

The `cn()` utility

Use cn() from @/lib/utils for conditional Tailwind classes:


import { cn } from "@/lib/utils";
 
<div className={cn(
  "p-4 rounded-lg",
  isActive && "bg-primary text-primary-foreground",
  isDisabled && "opacity-50 pointer-events-none"
)} />

Sidebar layout

The app uses shadcn’s sidebar components for navigation:


import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarInset,
} from "@/components/ui/sidebar";
import { Home, CheckSquare, Settings } from "lucide-react";
import { Link } from "react-router-dom";
 
const items = [
  { title: "Home", url: "/", icon: Home },
  { title: "Tasks", url: "/tasks", icon: CheckSquare },
  { title: "Settings", url: "/settings", icon: Settings },
];
 
function AppSidebar() {
  return (
    <Sidebar>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Menu</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {items.map((item) => (
                <SidebarMenuItem key={item.title}>
                  <SidebarMenuButton asChild>
                    <Link to={item.url}>
                      <item.icon />
                      <span>{item.title}</span>
                    </Link>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  );
}
 
// Usage in a page:
function DashboardPage() {
  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <main className="p-4">
          {/* Page content */}
        </main>
      </SidebarInset>
    </SidebarProvider>
  );
}

Theme support

Vibekit uses next-themes for dark/light mode. The app is wrapped in a ThemeProvider automatically.

Users can toggle themes using the built-in theme toggle component. The theme persists in localStorage.

Icons

Icons come from Lucide React :


import { Home, Search, Settings, Plus, Trash2, Edit } from "lucide-react";
 
<Button>
  <Plus className="mr-2 h-4 w-4" />
  Add Item
</Button>

Tailwind CSS

Tailwind is configured with:

Default utility classes
CSS custom properties for theming (via shadcn)
Dark mode support (class strategy)

Common patterns:


{/* Responsive layout */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
 
{/* Card with hover */}
<div className="p-4 rounded-lg border hover:border-primary transition-colors">
 
{/* Flex with gap */}
<div className="flex items-center gap-2">

Adding new components

If you need a shadcn component that isn’t pre-installed, Claude Code can add it. Just ask:

“Add a date picker component”

Claude will create the component file in src/components/ui/ following the shadcn patterns already in your project.