Home Components Templates <>

Navigation

Header Bar

Sticky top bar with brand, nav buttons, and spacer. Uses <header>.

Navigation

Drawer

Slide-in navigation panel. Left or right. Uses <nav class="left"> + .open.

Navigation

Navigation Rail

Vertical icon nav for desktop. Uses <nav class="rail">.

Main content area next to the rail.

Navigation

Bottom Navigation

Mobile bottom bar. Uses <nav class="bottom">.

Content area above the bottom nav.

Button

Buttons — All Variants

Fill / Outline / Ghost / Transparent / Colors
Sizes (sm / default / lg / xl)
Icon Buttons (circle / square)
Round / Extended / Responsive
Full-width
Segmented Buttons

Badge

Badges — Positions & Colors

Chip

Chips — Shapes & Colors

Default Fill Accent Success Warning Error Round ★ With Icon Closable

Card

Cards — All Variants

Default

Dark header, bordered body.

Flat

Light header variant.

Elevated

Box-shadow elevation.

Filled

Accent background.

Round

border-radius: 16px

Metrics
Revenue
$48K
Users
1.2K
Growth
+23%
Churn
2.1%

Input / Select / Textarea / Checkbox / Radio / Switch / Slider

Form Elements — All Variants

We'll never share your email
Invalid format
Checkbox (standard + icon variant)
Options
Radio (standard + icon variant)
Size
Switches
Notifications
Dark Mode
Auto-save
Sliders
40%
70%

Tabs

Tabs — Horizontal & Vertical

Horizontal (5 tabs)

Project summary and metrics.

Vertical

General settings.

Table

Tables — Bordered & Striped

Team directory
NameRoleDeptStatusID
AliceEngineerEngineeringActiveE-001
BobDesignerProductActiveE-002
CarolPMOperationsAwayE-003
DaveAnalystFinanceOfflineE-004
EveDevOpsEngineeringActiveE-005

List

Lists — 1/2/3 Line + Clickable

Single Line
  • Dashboard
  • Profile
  • Settings
  • Messages
Two Line
  • Alice JohnsonLead Engineer
  • Bob MartinezDesigner
  • Carol KimPM
Three Line
  • Sarah ConnorMeeting TomorrowLet's discuss the new project timeline and deliverables for Q2.
  • John DoeBuild PassedAll tests green. Ready to deploy to staging environment.

Menu

Dialog

Dialogs — All Positions + Modal + Round

Expansion

Accordion Panels

Progress

Progress — Linear, Circular, Sizes

Determinate
Indeterminate
Circular (sm / default / lg)

Snackbar

Snackbar — Bottom & Top

Action completed successfully.

Tooltip

Tooltips — 4 Positions

Top tooltip Bottom tooltip Left Right

Overlay

Overlay — Blocking Screen

Page

Page Containers

Welcome Page

Main content area.

Settings Page

Configure your preferences.

Profile Page

Edit your profile.

Shape

Shapes — Circle, Round, Square, Directional

👤
★
✎
›
›
▲
▼
✓
🌐

Divider

Dividers

Default:

Strong:

Vertical:

LeftCenterRight

Grid

Bones Grid — 12 Column

12 Columns
Mixed (8+4, 3+6+3)
Responsive Cards
Alpha

Auto-fit

Beta

Auto-fit

Gamma

Auto-fit

Delta

Auto-fit

GridForms

Dense Data-Entry

Employee Info
Contact
Inventory

Layout

Layout Patterns

Top App Bar
Title
Bottom App Bar
Empty State
No new messages

Click below to start a conversation

Typography

Type Scale

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Body text with bold, italic, underline, uppercase, links, code, kbd.

"The beer is ready!" — BrewCSS

Theming

Theme Cascading

Themes apply via data-* attributes and cascade naturally through the DOM. 6 independent dimensions: style, colors, typography, borders, size, and density. Mix and match freely — child elements inherit the parent theme unless they override a specific dimension.

Cascading Demo — All 6 Dimensions

Parent: neobrutalist + ocean + compact. Inner child: material + forest + comfortable + lg. The button overrides only color to candy.

data-style="neobrutalist" data-colors="ocean" data-density="compact"

Ocean chip
Neobrutalist Ocean Card

Inherits parent theme — bold borders, offset shadows, ocean blues, compact density.

data-style="material" data-colors="forest" data-density="comfortable" data-size="lg"

Forest chip
Material Forest Card

Overrides to material + forest + comfortable + large — subtle shadows, greens, spacious.

Side-by-side Comparison
Brutalist + Sharp

Heavy borders, no radius, functional.

Material + Round + Midnight

Elevated, rounded, purple palette.

Neobrutalist + Candy

Bold, offset shadows, pink pastels.

Typography Presets
System

The quick brown fox jumps over the lazy dog.

Default system font stack

Mono

The quick brown fox jumps over the lazy dog.

Monospace / code font

Serif

The quick brown fox jumps over the lazy dog.

Classic serif typeface

Rounded

The quick brown fox jumps over the lazy dog.

Friendly rounded font

Border Presets
Tag
Tag
Tag
Tag
Color Palettes

Default

Tag

Ocean

Tag

Forest

Tag

Sunset

Tag

Midnight

Tag

Candy

Tag
Size Presets

XS

Tag

SM

Tag

MD (default)

Tag

LG

Tag

XL

Tag
Density Presets

Compact

  • Item one
  • Item two
  • Item three

Default

  • Item one
  • Item two
  • Item three

Comfortable

  • Item one
  • Item two
  • Item three