Atoms
Fundamental building blocks extended with Rainbow Framework colors
Button
Primary action component with Rainbow Framework variants
Standard Variants
Rainbow Framework Variants
Special States
Sizes
import { Button } from '@/components/ui/button'Badge
Status indicators and labels
DefaultSecondaryOutlineDestructive
import { Badge } from '@/components/ui/badge'Switch
Toggle switch for binary options
import { Switch } from '@/components/ui/switch'Progress
Progress indicators for loading states
66%
import { Progress } from '@/components/ui/progress'Tabs
Tabbed interface for organizing content
Overview content goes here.
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'Card
Container for grouped content
Card Title
Card description goes here.
This is the card content area. Use it for any grouped information.
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'