Card
Container with optional header and styled content area
Card WITH Header
Standard card with title and description
This card has a header. CardContent automatically has no top padding when following CardHeader.
This card has NO CardHeader. CardContent automatically includes top padding for consistent spacing.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
children | ReactNode | - | Card content (CardHeader, CardContent, etc.) |
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/ui/primitives';
<Card>
<CardHeader>
<CardTitle>Title</CardTitle>
<CardDescription>Description</CardDescription>
</CardHeader>
<CardContent>
Content goes here
</CardContent>
</Card>Separator
Visual divider between content sections
Content above separator
Content below separator
LeftRight
Gradient separator style
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Separator direction |
gradient | boolean | false | Use gradient style |
className | string | - | Additional CSS classes |
Table
Structured data display with headers and rows
| Name | Status | Role | Actions |
|---|---|---|---|
| John Doe | Active | Admin | |
| Jane Smith | Inactive | User |
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
children | ReactNode | - | Table parts (TableHeader, TableBody, etc.) |
Tabs
Organize content into switchable tabbed sections
Content for the first tab. Tabs are useful for organizing related information.
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | string | - | Initially active tab |
value | string | - | Controlled active tab |
onValueChange | (value: string) => void | - | Tab change handler |
Accordion
Collapsible content sections
| Prop | Type | Default | Description |
|---|---|---|---|
type | "single" | "multiple" | - | Allow one or multiple open items |
collapsible | boolean | false | Allow closing all items (single type) |
value | string | string[] | - | Controlled open item(s) |
Avatar
User avatar with image and fallback states
CNJD
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | - | Image source URL (AvatarImage) |
alt | string | - | Alt text for image |
children | ReactNode | - | Fallback content (AvatarFallback) |
Skeleton
Animated placeholder for loading states
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Width, height, and shape classes |
import { Skeleton } from '@/ui/primitives';
// Circle skeleton (avatar placeholder)
<Skeleton className="h-12 w-12 rounded-full" />
// Text line skeleton
<Skeleton className="h-4 w-[200px]" />
// Full-width paragraph
<Skeleton className="h-4 w-full" />