UI Components
6 base components built on Radix UI primitives and class-variance-authority.
Built with shadcn/ui conventions — composable, themeable, and accessible via Radix UI primitives.
Button
Multi-variant button using class-variance-authority. Variants: default (violet gradient with shadow), destructive, outline, secondary, ghost, link. Sizes: default (h-10), sm (h-9), lg (h-12), xl (h-14), icon (h-10 w-10). Supports asChild prop via Radix Slot.
components/ui/button.tsxBadge
Pill-shaped badge component with forwardRef. Variants: default (violet gradient), secondary (zinc-800), destructive (red), outline (border only), success (emerald). Rounded-full pill shape.
components/ui/badge.tsxCard
Card system with 6 sub-components: Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter. Dark theme: bg-zinc-900/50 with backdrop-blur-sm and zinc-800 border, rounded-xl, shadow-xl.
components/ui/card.tsxInput
Styled input with dark theme (bg-zinc-800/50), violet focus ring, zinc placeholder text. Standard height h-10.
components/ui/input.tsxLabel
Form label using Radix @radix-ui/react-label primitive. Zinc-200 text color, text-sm font-medium styling.
components/ui/label.tsxField
Form field layout system with 4 sub-components: FieldGroup (vertical stack with gap-4), Field (single field with gap-2), FieldLabel, FieldDescription.
components/ui/field.tsxButton Variants
| Variant | Style |
|---|---|
default | Violet gradient with shadow |
destructive | Red background |
outline | Border only, transparent bg |
secondary | Zinc/muted background |
ghost | Transparent, hover shows bg |
link | Underline on hover |
Adding More Components
Add new shadcn/ui components with:
npx shadcn-ui@latest add [component-name]✓ Fully customizable! All UI components follow the shadcn/ui pattern — copy, paste, and own the code.