container, grid, stack, block, surface, callout, hero, overlay, filter_bar, filter_chips, label_overline, segmented_control — Tetris-inspired layouts and backgrounds.
Navigation trail. Last item is current page (no href).
surface(variant="default") — primary surface
surface(variant="muted") — subtle background
surface(variant="elevated") — with shadow
surface(variant="accent") — accent tint
Glass variants (blur over content):
glass — subtle blur
frosted — stronger blur
smoke — dark tint
surface(variant="default|muted|elevated|accent|glass|frosted|smoke", full_width=false, padding=true)
callout(variant="info|success|warning|error|neutral", title=none, icon=none)
hero(title=none, subtitle=none, background="solid|muted|gradient|mesh|animated-gradient")
background="mesh" — radial gradient mesh pattern.
background="animated-gradient" — CSS keyframe animation on the background.
Place overlay as sibling to image inside a position: relative parent.
overlay(variant="dark|gradient-bottom|gradient-top")
Dotted
Fade
divider(), divider("OR"), divider(variant="dotted"), divider(variant="fade"), divider("OR", variant="accent")
list_group(items=[...]) for simple lists; list_group(bordered=true) with list_item() for custom rows.
Stacks arrange content vertically. Use gap="sm", default, or gap="lg".
Auto-fit columns with minmax. Resize to see it adapt.
@container for component-level breakpoints.
padding-inline, margin-inline for i18n.
Engineer · San Francisco
Stacks nest naturally. This card body is a stack of avatar+info, then a caption.
Grids use cols=2, cols=3, or cols=4. Blocks can span=2 or more.
+1.2k this month
Last 30 days
Single column block.
This block spans two columns. On narrow viewports it collapses to one.
Resize me → inner grid reflows with container-type: inline-size.
RTL — padding-inline and margin-inline flip with direction.
Click LTR or RTL to swap the block. Uses dir, padding-inline, margin-inline.
gap=sm
default
gap=lg
Stacks and grids compose. Put a grid inside a block, or stack cards in a grid.
Resize the viewport to see @container queries collapse spans and reflow columns.
Frame resolves rail/content/nav intent, while stack and cluster resolve small pressure decisions without app-local layout classes.
Resizable split layout with a draggable handle. Requires Alpine.js.
Drag the handle to resize the panels.
split_panel(direction="horizontal|vertical", default_split=50, min_split=10, max_split=90)
Title + meta + contextual actions for entity detail pages.
Created 3 days ago
No icon, no actions
entity_header(title, meta=none, icon=none) — use
Header with a prominent search strip for discovery and list pages.
Browse the full library
search_header(title, form_action, query="", subtitle=none, search_placeholder="Search...")
Filter-first action container for list and table controls.
filter_bar(action, method="get") — wraps action_strip inside a form.
Faceted pill rows (not the same as filter_bar). Pairs with register_colors for named theme colors.
See docs/COMPONENT-OPTIONS.md.
filter_group + filter_chip — use href for navigation or HTMX attributes for partial swaps.
Small caps label for cards and dense panels.
Card body under an overline heading.
label_overline(text, section=true, tag="h3"|"span")
Mutually exclusive mode switcher (radiogroup).
segmented_control(items=[...], name="…", size="sm"|"lg")
Container for search, filter, and action rows on list pages.
action_strip(surface_variant="muted", density="sm|md", wrap="wrap|scroll|collapse", sticky=false)
Horizontal row of icon buttons for social actions (like, share, etc.).
action_bar() wraps action_bar_item(icon, label, count=none, href=none, active=false)
Classic media + body layout primitive for lists and cards.
Description text for the media object. Uses the classic OOCSS pattern.
media_object(align="start") with media_object_media, media_object_body, media_object_actions helpers.
Slide-out panel triggered by a button. Requires Alpine.js.
Tray content goes here. Click the backdrop or the close button to dismiss.
tray_trigger(id, label, icon=none) + tray(id, title, position="right")
Bulk-action container shown when list or table rows are selected.
selection_bar(count=0, label="selected") — renders nothing when count is 0.
Contract-aware tabbed page layout with route tabs, header, toolbar, and content slots.
tabbed_page_layout(tabs=[...], current_path="/layout") with slot page_header, slot page_toolbar, slot page_content.