Complete Tailwind CSS color palette. Edit tokens in :root to theme globally.
4px base unit scale. Use var(--space-xs), var(--space-sm), var(--space-md), var(--space-xl), var(--space-2xl), etc. for consistent spacing.
Font sizes, weights, and line heights.
Elevation levels for depth and hierarchy.
Subtle elevation
Default elevation
Medium elevation
Large elevation
Extra large elevation
Maximum elevation
Corner rounding options.
Styled link variants for navigation and actions.
Links underline on hover by default. Add .link-underlined class to show underline in upstate.
Always shows underline, even in upstate.
This is a paragraph with an inline primary link embedded in the text. You can also use secondary links for less emphasis, or ghost links for subtle navigation.
Form controls for data entry.
Container components for grouping content.
A simple card with border only, no shadow. Good for lists and grids.
Card with medium shadow for emphasis and interactive elements.
Strong shadow for modals, dropdowns, and overlays.
Status indicators and labels.
Contextual feedback messages.
User profile images and placeholders.
On/off switch controls.
Visual progress indicators.
Data display with multiple variants and features.
Classes: .table-striped
.table-bordered
.table-compact
.table-relaxed
.table-no-hover
.table-sticky-header
.table-selectable
| Name | Department | Status | |
|---|---|---|---|
| Alice Johnson | Engineering | Active |
|
| Bob Chen | Design | Active |
|
| Carol Martinez | Product | Active |
|
| David Lee | Marketing | Away |
|
| Name | Department | Status | |
|---|---|---|---|
| Alice Johnson | Engineering | Active |
|
| Bob Chen | Design | Active |
|
| Carol Martinez | Product | Active |
|
| Name | Department | Status | |
|---|---|---|---|
| David Lee | Marketing | Contract |
|
| Emma Wilson | Consulting | Contract |
|
| Name | Department | Status | |
|---|---|---|---|
| Frank Brown | Sales | Archived |
|
| Project | Assignee | Progress | |
|---|---|---|---|
| Dashboard Redesign | Sarah Kim | 75% |
|
| API Integration | Mike Torres | 45% |
|
| Project | Assignee | Progress | |
|---|---|---|---|
| Mobile App | Unassigned | 0% |
|
| Project | Assignee | Progress | |
|---|---|---|---|
| Login System | Alex Park | 100% |
|
| Email Templates | Jordan Lee | 100% |
|
Standardized modal dialogs with scrollable content, header/footer shadows, and flexible button layouts.
Click to see different modal widths. Use grid columns to control modal width.
Click to see different footer button configurations.
Click to see different content column layouts inside modals.
480px width modals for confirmations, alerts, and simple dialogs.
Default width modal with tabs under the title.
Interactive list items with flexible icon slots and optional inline editing.
Gray background with leading and trailing icons. Text is not editable.
Border-only with leading and trailing icons. Text is not editable.
Gray background with editable input. Click to edit, background changes on focus.
Border-only with editable input. Click to edit, background changes on focus.
Gray background, no icons.
Border-only, no icons.
Expandable/collapsible list items with an editable header and nested table content. Used throughout the Settings modal for organizing configurable data like Series, Finishes, and Accessories.
Click the header to expand/collapse. Drag the grip handle to reorder. Class variants: .series-item, .finish-item, .accessory-item for wrappers. Content variants: .series-content, .finish-content, .accessory-content. Uses toggleCollapsible(header) for behavior. Grip handle: .drop-pill-grip.
Extensible pill component for room management. Combine modifiers: --draggable, --add, --labeled, --editable, --bordered, --deletable.
.room-pill--draggable --add --deletable
.room-pill--draggable --labeled --editable --bordered --deletable
Three modern loading indicator styles.
SVG icon system with sizes, colors, and backgrounds.
12-column responsive grid. Resize browser to see breakpoints.