Components
Button
Interactive button with multiple variants.
Card
Container with rounded corners and subtle border.
Input
Form input with label and validation support.
Badge
Small status indicator.
Avatar
User avatar with fallback initials.
Interactive button with multiple variants.
<Button variant="primary">Save</Button>
<Button variant="secondary">Cancel</Button>
<Button variant="ghost">More options</Button>
<Button variant="danger">Delete</Button>| Prop | Type | Default |
|---|---|---|
variant | 'primary' | 'secondary' | 'ghost' | 'danger' | 'primary' |
size | 'sm' | 'md' | 'lg' | 'md' |
disabled | boolean | false |
loading | boolean | false |
Container with rounded corners and subtle border.
<Card>
<Card.Header>Title</Card.Header>
<Card.Body>Content here</Card.Body>
<Card.Footer>
<Button>Action</Button>
</Card.Footer>
</Card>Form input with label and validation support.
<Input label="Email" type="email" error="Please enter a valid email" />| Prop | Type | Default |
|---|---|---|
label | string | — |
error | string | — |
type | string | 'text' |
Small status indicator.
<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="error">Failed</Badge>User avatar with fallback initials.
<Avatar src="/avatars/alice.jpg" alt="Alice" />
<Avatar fallback="AB" />