Buttons
Button styles using palette tokens. Primary actions typically use primary-200 fills.
Typography
Type scale and utilities aligned with the theme. Section titles use theme primary text; accent color appears in samples where noted.
Headings
Heading 1 (text-4xl)
Heading 2 (text-3xl)
Heading 3 (text-2xl)
Heading 4 (text-xl)
Heading 5 (text-lg)
Heading 6 (text-base)
Body text
This is regular body text (text-base). Lorem ipsum dolor sit amet, consectetur adipiscing elit.
This is small text (text-sm). Used for captions, labels, and secondary information.
This is extra small text (text-xs). Used for fine print and disclaimers.
Text colors
text-theme-primary — Main text color
text-theme-secondary — Secondary text color
text-theme-muted — Muted text color
text-primary-200 — Primary accent text
text-secondary-200 — Secondary accent text
text-tertiary-200 — Tertiary accent text
Font weights
font-thin (100)
font-light (300)
font-normal (400)
font-medium (500)
font-semibold (600)
font-bold (700)
font-extrabold (800)
Links
Default
Default link styleWithout underline
Link without underlineBorder hover
Link with border hoverSecondary color
Secondary linkBlockquotes
"This is a simple blockquote with a left border."
"This blockquote uses the secondary color scheme."
"This blockquote has a background for additional emphasis."
Code
Inline
Use inline code for short snippets.
Block
function example() {
console.log('This is a code block');
return true;
}Styled tokens
const greeting = 'Hello World';Text alignment
Left (default)
This text is left-aligned.
Center
This text is center-aligned.
Right
This text is right-aligned.
Justified
This text is justified so it stretches to fill the width of the container with even word spacing.
Form elements
Inputs, custom selects, and controls used across the app. Pair labels with controls for accessibility.
Text inputs
This field has an error.
This field is valid.
Textarea
0 / 500 characters
Select / dropdown
Hold Ctrl/Cmd to select multiple options
Checkbox
Primary Color
Different Shapes
Different Colors
States
Radio buttons
Primary Color
Different Colors
States
Switch / toggle
File upload
Accepts images only
Range slider
Date & time pickers
Custom, reusable date and time picker components. Supports both calendar selection and keyboard input.
Date only - no time selection
Time only - no date selection
Full date and time picker
Other form controls
60% complete
70% of maximum
Form layouts
Complete Form Example
Inline Form Layout
Navigation
Breadcrumbs, pagination, tabs, dropdowns, and steppers. Pagination controls are styled for lists; pagination.js can attach behaviors when you wire real page changes.
Breadcrumbs
Use an ordered list with aria-current="page" on the last item.
Default
With icons
Pagination
Use a unique aria-label per pagination region when multiple appear on one page.
Simple
With ellipsis
Tabs
In-page tabs use data-tabs and tabs.js.
Content for Tab 1
Content for Tab 2
Content for Tab 3
Dropdown menus
Powered by dropdown.js.
Stepper / steps
Visual progress for multi-step flows.
Horizontal
Vertical
Step 1: Information
Complete your basic information
Step 2: Verification
Verify your details
Step 3: Confirmation
Review and confirm
Layout
Cards, grids, containers, dividers, and spacing utilities for page structure.
Cards
Card components for displaying content in containers.
Basic Card
Card Title
This is a basic card with a title and some content.
Card with Image
Card with Image
This card includes an image at the top.
Card with Actions
Card with Actions
This card includes action buttons in the footer.
Elevated Card
Elevated Card
This card has a larger shadow for more emphasis.
Grid layouts
Responsive grid systems for organizing content.
2-Column Grid
Column 1
Column 2
3-Column Grid
Column 1
Column 2
Column 3
4-Column Grid
Column 1
Column 2
Column 3
Column 4
Containers
Container components for constraining content width.
Centered Container
This container is centered with a max-width of 4xl.
Full Width Container
This container spans the full width.
Constrained Container
This container has a constrained max-width for readability.
Dividers / separators
Visual separators for dividing content sections.
Horizontal Divider
Content above
Content below
Divider with Text
Vertical Divider
Left Content
Right Content
Spacing utilities
Spacing utilities for consistent layout spacing.
Padding Examples
Margin Examples
Content
Lists, tables, badges, avatars, and inline alerts. Removable badges use badges.js; dismissible alerts use alerts.js.
Lists
List components for ordered and unordered content.
Unordered
- First item
- Second item
- Third item
Ordered
- First step
- Second step
- Third step
Description list
- Term 1
- Description for term 1
- Term 2
- Description for term 2
Nested
- Parent item 1
- Child item 1.1
- Child item 1.2
- Parent item 2
Tables
Wrap wide tables in overflow-x-auto for small screens.
Basic
| Name | Role | |
|---|---|---|
| John Doe | john@example.com | Admin |
| Jane Smith | jane@example.com | User |
Striped
| Product | Price | Stock |
|---|---|---|
| Item 1 | $29.99 | 50 |
| Item 2 | $39.99 | 30 |
| Item 3 | $19.99 | 100 |
With actions
| Name | Status | Actions |
|---|---|---|
| Project Alpha | Active | |
| Project Beta | Pending |
Badges / tags
Removable chips use data-badge-removable and data-badge-remove.
Colors
Sizes
Removable
Avatars
Initials, sizes, and status dots.
Sizes
With status
Placeholder
Alerts
Dismissible inline alerts via data-alert and data-alert-close (alerts.js).
Success
Your changes were saved.
Error
Something went wrong. Try again.
Warning
Please review before continuing.
Info
Here is some contextual information.
Data display
Accordions, metrics, charts (Chart.js), empty states, skeletons, and timelines.
Accordion / collapsible
Expandable and collapsible content sections.
This is the content for accordion item 1. It can contain any HTML content.
This is the content for accordion item 2. You can have multiple accordion items.
This is the content for accordion item 3. Each item can be expanded or collapsed independently.
Stats / metrics cards
Metric cards for displaying key statistics and numbers.
Total Users
1,234
+12% from last month
Revenue
$45,678
+8% from last month
Orders
567
-3% from last month
Conversion
3.24%
+0.5% from last month
Charts
Chart.js graphs for data visualization.
Line Chart
Bar Chart
Pie Chart
Doughnut Chart
Area Chart
Empty states
Empty state components for when there's no data to display.
No items found
Get started by creating a new item.
No documents
You haven't created any documents yet.
Skeleton loaders
Loading placeholders that mimic content structure.
Text Skeleton
Card Skeleton
Table Skeleton
Timeline
Timeline components for displaying chronological events.
Event 1
Description of the first event
2 hours ago
Event 2
Description of the second event
5 hours ago
Event 3
Description of the third event
1 day ago
Feedback
Toasts, modals, popovers, tooltips, confirmations, drawers, and progress — wired through shared scripts in base.html.
Notifications / toasts
Temporary feedback via notifications.js.
Modals / dialogs
modal.js — click outside to close when enabled.
Popovers
popover.js
Tooltips
tooltip.js — hover or focus.
Confirmation dialogs
confirm.js
Drawers / side panels
drawer.js
Progress indicators
progress.js for linear, circular, and spinners.
Linear progress
Circular progress
Spinners
App & platform
Global scripts loaded from base.html and how they surface in the real app shell.
App chrome
Theme toggle — Light and dark mode use theme.js with a single control in the navbar (id="theme-toggle"). Do not add a second toggle with the same id on this page; use the control in the site header to preview behavior.
Logo transition — logo-theme-transition.js uses GSAP when available; animations should respect prefers-reduced-motion where applied in that script.
Navbar — navbar.js handles mobile menu and tracking-related hooks. Resize the window or use the menu button in the header to exercise the responsive navigation pattern.
HTMX
HTMX is loaded globally for partial page updates. This example fetches a small HTML fragment from the server without a full reload.