Installation
Get Dexterity UI up and running in your project in under a minute.
# Prerequisites
Before installing Dexterity UI, make sure your project has the following dependencies set up:
# Using the shadcn CLI
The easiest way to add Dexterity UI components. Each component is installed individually, giving you full control over what goes into your bundle.
1. Initialize shadcn
If you haven't already set up shadcn in your project:
2. Add a component
Install any component from our registry:
3. Import and use
The component is now ready in your project:
import { Button } from "@/components/ui/button"
export default function App() {
return (
<Button variant="default">
Get Started
</Button>
)
}# Available Components
Install any of these components individually via the shadcn CLI.
Button
Versatile button with 6 variants and 4 sizes.
Badge
Inline badge with default, secondary, destructive, and outline variants.
Card
Card with header, title, description, action, content, and footer slots.
# Project Structure
After installation, components are placed in your project like this:
your-project/
├── components/
│ └── ui/
│ ├── button.tsx ← installed via CLI
│ ├── badge.tsx
│ └── card.tsx
├── lib/
│ └── utils.ts ← cn() helper
└── ...# Utility: cn()
All components use a cn() utility for class merging. Make sure you have it in your project:
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}Install the required dependencies: