Styled Components
Production-quality defaults built on top of headless primitives. Beautiful out of the box, fully customizable.
How Styling Works
Each styled component wraps a primitive and adds:
- Variant enums — e.g.,
ButtonVariant::Default,ButtonVariant::Destructive - Size enums —
Size::XsthroughSize::Xl - Tailwind CSS classes — default classes per variant and size
- Class override — every component accepts a
classprop for customization
Component Categories
| Category | Components |
|---|---|
| Forms | Button, Input, Textarea, Checkbox, Radio, Switch, Select, Form |
| Overlay | Dialog, AlertDialog, Tooltip, Popover, Toast, Toaster |
| Navigation | Tabs, Accordion |
| Data Display | Badge, Card, Skeleton, Spinner |
| Layout | Stack, HStack, VStack, Divider |
| Typography | Text, Heading, Link |
| Utility | Separator, VisuallyHidden, Portal, FocusScope |
Overriding Styles
Every component accepts a class prop. Your classes are merged with defaults using stratum-tailwind's conflict resolution — later classes override earlier ones for the same CSS property.
override.rs
// Default button is h-9 px-4 — override to larger
<Button class="h-12 px-8 text-lg">"Large"</Button>