Every shared component, shown in light and dark side by side. Minimal, Stripe/Linear/Vercel-inspired. Built on Tailwind CSS variables and shadcn/ui. Use the toggle for interactive components below.
Color tokens
Semantic colors driven by CSS variables; they flip automatically in dark mode.
light
background
foreground
card
primary
secondary
muted
accent
destructive
dark
background
foreground
card
primary
secondary
muted
accent
destructive
Typography
light
Heading 1
Heading 2
Heading 3
Body text — the quick brown fox jumps over the lazy dog.
Muted text — secondary information and hints.
dark
Heading 1
Heading 2
Heading 3
Body text — the quick brown fox jumps over the lazy dog.
Muted text — secondary information and hints.
Buttons
light
dark
Badges
Base variants plus color-coded sentiment, urgency, and category badges.
light
DefaultSecondaryDestructiveOutline
PositiveNeutralNegative
LowMediumHighCritical
CrashBillingFeature RequestUI
dark
DefaultSecondaryDestructiveOutline
PositiveNeutralNegative
LowMediumHighCritical
CrashBillingFeature RequestUI
Cards
light
Average rating
4.3
Weighted across all connected apps.
dark
Average rating
4.3
Weighted across all connected apps.
Data table
Review inbox row styling with sentiment / urgency / category badges.
light
| Reviewer | Rating | Sentiment | Urgency | Category |
|---|---|---|---|---|
| Ava M. | 5 | Positive | Low | UI |
| Liam K. | 2 | Negative | High | Crash |
| Noah R. | 3 | Neutral | Medium | Performance |
| Mia T. | 1 | Negative | Critical | Billing |
dark
| Reviewer | Rating | Sentiment | Urgency | Category |
|---|---|---|---|---|
| Ava M. | 5 | Positive | Low | UI |
| Liam K. | 2 | Negative | High | Crash |
| Noah R. | 3 | Neutral | Medium | Performance |
| Mia T. | 1 | Negative | Critical | Billing |
Modal & toast
Interactive — these follow the page's active theme (use the toggle above).
Charts
Recharts wrappers themed per mode (shown light and dark).
light
Sentiment distribution
Reviews this week
dark
Sentiment distribution
Reviews this week