Badge
Small status indicator or label
Default
Secondary
Destructive
Outline
Success
Warning
Info
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "info" | "default" | Visual variant |
className | string | - | Additional CSS classes |
Alert
Contextual feedback message
Default Alert
This is a default alert with important information.
Error Alert
This is a destructive alert indicating an error or warning.
Success Alert
This is a success alert confirming a completed action.
Warning Alert
This is a warning alert requiring attention.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "default" | Visual variant |
className | string | - | Additional classes for custom styling |
Progress
Progress bar for showing completion status
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Progress value (0-100) |
max | number | 100 | Maximum value |
className | string | - | Additional CSS classes |
AnimatedBackground
Animated blob background with mouse tracking
AnimatedBackground renders a full-page canvas with animated, organic blobs that respond to mouse movement. Use sparingly as it has performance impact.
| Prop | Type | Default | Description |
|---|---|---|---|
enabled | boolean | true | Enable/disable the animation |
staticMode | boolean | false | Render static blobs without animation |
disableMouseTracking | boolean | false | Disable mouse interaction effects |
colorClasses | string[] | ["bg-pink-400", ...] | Tailwind color classes for blobs |
import { AnimatedBackground } from '@/ui/primitives';
// Full-page background with mouse tracking
<AnimatedBackground enabled={true} />
// Static background (no animation, good for performance)
<AnimatedBackground staticMode={true} />
// Custom colors
<AnimatedBackground
colorClasses={['bg-blue-400', 'bg-green-300', 'bg-indigo-500']}
/>ThemeAwareBackground
Theme-adaptive animated background
ThemeAwareBackground wraps AnimatedBackground and automatically adapts colors between dark and light modes. Dark mode uses bold brand colors, light mode uses subtle tints.
| Prop | Type | Default | Description |
|---|---|---|---|
enabled | boolean | true | Enable/disable the background |
staticMode | boolean | false | Render without animation |
disableMouseTracking | boolean | false | Disable mouse effects |
import { ThemeAwareBackground } from '@/ui/primitives';
// Automatically adapts colors based on theme
// Dark: pink-400, teal-300, purple-700, primary
// Light: pink-100, teal-100, purple-100, yellow-50
<ThemeAwareBackground />