PhxSaas shadcn-inspired component library
Using the Outfit font family with weights from 300 to 800.
Light (300) — The quick brown fox jumps over the lazy dog
Regular (400) — The quick brown fox jumps over the lazy dog
Medium (500) — The quick brown fox jumps over the lazy dog
Semibold (600) — The quick brown fox jumps over the lazy dog
Bold (700) — The quick brown fox jumps over the lazy dog
Extrabold (800) — The quick brown fox jumps over the lazy dog
HSL-based CSS custom properties with automatic light/dark theme support.
Primary
--primary
Secondary
--secondary
Muted
--muted
Accent
--accent
Destructive
--destructive
Gold
--gold
Featured
--featured
Card
--card
The ui_button
component with multiple variants and sizes.
The badge
component for status indicators and labels.
Composable card components: card, card_header, and card_content.
A simple card with header and content sections.
Cards can contain other components like badges.
Cards can include interactive elements.
Styled form components for search, filtering, and toggles.
With optional icon support via icon_name
Toggle switch for boolean filters
Mobile-friendly modal that slides up from the bottom. Best viewed on mobile viewport.
Resize your browser to mobile width or test on a mobile device for the full effect.
This is an interactive bottom sheet component. Tap the backdrop or swipe down to close.