UI Components Overview

UI components are the building blocks of your interface. They’re designed to be composable, accessible, and customizable through props.

Available Components

Components are organized into subcategories under src/components/ui/.

Form (ui/form/)

Component	Purpose
Button	Clickable actions with multiple variants
Input	Text input with label, hint, and error states
Textarea	Multi-line text input
Select	Dropdown select menu
Checkbox	Checkbox input with label
Radio	Radio button for single selection
Switch	Toggle switch input

Data Display (ui/data-display/)

Component	Purpose
Card	Container with structured content
Badge	Status labels and tags
Avatar	User profile images
AvatarGroup	Grouped avatar display
Table	Data table with styling
Pagination	Page navigation controls
Progress	Progress bar indicator
Skeleton	Loading placeholders

Feedback (ui/feedback/)

Component	Purpose
Alert	Contextual feedback messages
Toast	Temporary notification messages
Tooltip	Hover tooltips

Overlay (ui/overlay/)

Component	Purpose
Dialog	Modal dialogs
Dropdown	Dropdown menus
Tabs	Horizontal tab navigation
VerticalTabs	Vertical tab navigation
Accordion	Collapsible content sections

Layout (ui/layout/)

Component	Purpose
Separator	Visual divider between sections

Primitives (ui/primitives/)

Component	Purpose
Icon	SVG icon component

Content (ui/content/)

Component	Purpose
CodeBlock	Syntax-highlighted code

Marketing (ui/marketing/)

Component	Purpose
Logo	Brand logo with variants
CTA	Call-to-action sections
NpmCopyButton	NPM install command copier
SocialProof	Testimonial cards
TerminalDemo	Animated terminal demo

Common Props

Most UI components share these patterns:

Variant

Visual style options:

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>

Size

Size options (usually sm, md, lg):

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

Color Scheme

For dark backgrounds:

<Button colorScheme="invert">On Dark</Button>

Import Example

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

<Card>
  <Input label="Email" name="email" type="email" />
  <Button>Submit</Button>
</Card>