Providence UI — Design System Showcase
This page should only use real tokens + utilities. If something looks wrong, it’s a strong signal a token/class is missing or mapped incorrectly.
(unset), you’re missing CSS variables. If things render transparent, check your --*-rgb formatting (must be space-separated).Core shadcn tokens
values pulled from :root at runtime--bg...--fg...--bg-rgb...--fg-rgb...--card...--card-fg...--popover...--popover-fg...--border...--input...--ring...--primary...--primary-fg...--secondary...--secondary-fg...--muted...--muted-fg...--accent...--accent-fg...--danger...--danger-fg...State + selection aliases (your custom hooks)
values pulled from :root at runtime--selection...--selection-hover...--selection-active...--selection-fg...--link...--link-hover...--link-active...--brand...--brand-hover...--brand-active...--brand-fg...RGB companions (must be SPACE-separated)
values pulled from :root at runtime--rgb-bg...--rgb-fg...--rgb-primary...--rgb-success...--rgb-warning...--rgb-danger...--rgb-brand...--primary-rgb...--accent-rgb...--danger-rgb...--ring-rgb....heading-1..6, .text-lead, .text-body, .text-small, .text-micro, .text-label, .text-subtitle). If anything here doesn’t exist, it will look “unstyled”.Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lead / Body
Providence OS provides a clean, accessible foundation for enterprise-grade interfaces.
The quick brown fox jumps over the lazy dog. This block is meant to reveal spacing, line-height, and contrast choices.
Small text for secondary information, helper copy, and captions.
Micro / Labels
Label text (forms, table headers, metadata)
Version 1.0.0 • Last updated 2 minutes ago
Inline link using primary and muted link.
If you want a dedicated .link class, this is a good place to decide it.
background/foreground/card/popover/primary/secondary/muted/accent/destructive, plus border/input/ring. If you see “missing” colors here, your Tailwind preset likely needs a mapping, not your components.background
Base app background
bg-backgroundcard
Card surface
bg-cardpopover
Menus, popovers, dropdowns
bg-popoverprimary
CTA background
bg-primarysecondary
Soft button background
bg-secondaryaccent (selection surface)
Command/Select hover + selected rows
bg-accentmuted
Muted surface
bg-muteddestructive
Danger/Destructive background
bg-destructiveborder / input preview
border-input + border-border
bg-background border border-inputForeground pairings (shadcn convention)
text-primary-foreground
Primary background contrast
text-secondary-foreground
Secondary background contrast
text-accent-foreground
Selection surface contrast
Note: Your prestige brass is intentionally not mapped to shadcn accent. Use CSS vars (--brand) or a dedicated utility if you want it in the UI.
.stack-2/3/4/6/8, .transition-fast/standard/slow, .card-base, .card-hover. If anything here doesn’t render, it’s missing from the preset/plugin.Stacks
.stack-4
Card base + hover
.card-base
Should use bg-card + border-border
.card-hover
Hover should lift/soft shadow smoothly (transition-standard)
.card-interactive
Hover lifts + shows primary border hint
.surface-elevated
Default elevated surface (no hover effects)
Transitions
transition-fast
hover scale
transition-standard
hover scale
transition-slow
hover scale
Cluster (new)
Semantic Spacing
.card-padding (24px)
.card-padding-lg (32px)
.element-spacing (mb-24px)
accent is wrong. We display all shadcn button variants and common states (default/hover/active/disabled/focus).Variants
States (forced)
Utility Badges (Class-based)
These use .badge .badge-* classes, separate from shadcn Component.
Text Utilities
Press ⌘K to open command.
Use console.log() for debug.
This text should truncate because it is way too long.
Callouts
Default Callout
Generic information block.
Warning Callout
Something needs attention.
Danger Callout
Critical failure occurred.
Success Callout
Operation completed successfully.
Default Callout
Generic information block.
Warning Callout
Something needs attention.
Danger Callout
Critical failure occurred.
Success Callout
Operation completed successfully.
accent mapping or rgb var formatting.This is the new .field-help class.
Error helper text (you may want a dedicated class for this).
Checkbox / Switch
Radio group
Select (selection surface)
Hover/selected rows should use accent (neutral slate), not brand brass.
bg-accent + text-accent-foreground.Command
DropdownMenu
Hover rows should be neutral slate (accent), not gold.
ContextMenu
Right click hereBreadcrumb
Menubar + NavigationMenu
Table + Pagination
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV-001 | Paid | Credit Card | $250.00 |
| INV-002 | Pending | PayPal | $150.00 |
Skeleton + Avatar
Skeletons often reveal if muted/foreground are mis-mapped.
Calendar
Accordion
Tabs
ScrollArea
Carousel
Resizable + Drawer
If something here looked “unstyled”, you may be missing:
- A dedicated
.cluster-*utility (you usedcluster-4in the old page, but your preset only defines stacks + transitions + card-base/hover). - A dedicated
.dividerutility (replace with<Separator />or define it). - A dedicated
.focus-ringutility (shadcn uses focus-visible ring classes; you can wrap them as a utility if you want consistency). - A branded “brass” utility (e.g.
.text-brand,.bg-brand-subtle) that uses--brandinstead of hijackingaccent. - Semantic form patterns (e.g.
.field,.field-label,.field-help) if you want consistent spacing/typography on forms.
DataTable component wraps TanStack Table with a standard shell, supporting pagination, sorting, selection, and customizable toolbars.1. Minimal (No Toolbar/Actions)
The simplest variant just needs data and columns. Suitable for read-only lists or small datasets.
| INV-001 | 1/15/2024 | success | medium | Ken Adams | ken99@yahoo.com | $316.00 | |
| INV-002 | 2/10/2024 | success | low | Abe Lincoln | Abe45@gmail.com | $242.00 | |
| INV-003 | 3/21/2024 | processing | high | Monserrat Banks | Monserrat44@gmail.com | $837.00 |
Rows per page
2. Selection & Bulk Actions
Add a selection column and pass bulkActions. The bulk action bar appears when rows are selected.
| INV-001 | 1/15/2024 | success | medium | Ken Adams | ken99@yahoo.com | $316.00 | ||
| INV-002 | 2/10/2024 | success | low | Abe Lincoln | Abe45@gmail.com | $242.00 | ||
| INV-003 | 3/21/2024 | processing | high | Monserrat Banks | Monserrat44@gmail.com | $837.00 | ||
| INV-004 | 4/5/2024 | success | medium | Silas Marner | Silas22@gmail.com | $874.00 | ||
| INV-005 | 4/12/2024 | failed | high | Carmella Soprano | carmella@hotmail.com | $721.00 | ||
| INV-006 | 5/1/2024 | pending | low | Ken Adams | ken99@yahoo.com | $116.00 |
Rows per page
3. Comprehensive (CRM Mode)
Full power: Column Pinning, Resizing, Inline Editing,Saved Views, and complex filtering. Try double-clicking the 'Amount' or 'Invoice' cells to edit.
| INV-001 | 1/15/2024 | success | medium | Ken Adams | ken99@yahoo.com | $316.00 | ||
| INV-002 | 2/10/2024 | success | low | Abe Lincoln | Abe45@gmail.com | $242.00 | ||
| INV-003 | 3/21/2024 | processing | high | Monserrat Banks | Monserrat44@gmail.com | $837.00 | ||
| INV-004 | 4/5/2024 | success | medium | Silas Marner | Silas22@gmail.com | $874.00 | ||
| INV-005 | 4/12/2024 | failed | high | Carmella Soprano | carmella@hotmail.com | $721.00 | ||
| INV-006 | 5/1/2024 | pending | low | Ken Adams | ken99@yahoo.com | $116.00 |
Rows per page