Components
Every component and pattern on one page, to find the one that fits before opening its reference.
Components carry a visual identity, states and interaction styling. Patterns normalize a recurring semantic shape, such as a navigation list or an icon slot, so it composes with the components and the layout primitives.
Components
Accordion
Collapsible regions built on native details and summary, with optional exclusive groups via the name attribute.
Alert
Inline status messages for confirmations, warnings, and errors, with intents, icons, and action lists.
App navigation
Primary application destinations in a persistent bottom bar or labelled side navigation.
Aura
Aura adds a decorative intent-colored border and halo around one direct child. It is visual emphasis only and does not change the child's semantics.
Avatar
Initials or image representing a person or entity, composable with a status dot.
Badge
Compact label for counts, status, or category tags, with shared intents and variants.
Bleed
.bleed lets a direct child of a padded surface reach its edges. Use it for a full-width image, a colored header or footer, or a notice band.
Breadcrumb
Trail of links showing the current page's location in a hierarchy.
Button
Actions and navigation with shared intents, variants, sizes, and loading, pressed, and disabled states.
Card
Flexible content container with optional header, body, and footer regions.
Chat
Chat lays out message metadata, an optional avatar, and a content-sized bubble at either edge of a conversation.
Close
Icon-only X button that closes a dialog, dismisses an alert, or removes a tag.
Data list
A compact key/value layout for object properties.
Diagrams
The framework draws no diagrams. Render Mermaid text with an external engine such as Pele and theme it with Actual tokens.
Dialog
Centered modal overlay for focused tasks, confirmations, or forms, built on the native <dialog> element.
Drawer
Modal side or bottom sheet that overlays the page for navigation, filters or actions.
Floating action button
FAB fixes a primary action near the viewport's block-end and inline-end edges.
Indicator
Attach any component to one of a container's four corners.
Key
Keyboard keys and shortcut tokens for app UI, command palettes, menus, and help text.
List
Repeated application rows with optional leading and trailing regions.
Mark sweep
Mark Sweep wipes a highlight in behind a phrase the first time it enters the viewport, using the same colors as <mark>.
Meter
Scalar measurement within a known range, not a progress indicator.
Navbar
Horizontal top-level navigation bar with a brand, an inline .cluster link list, and a vertical .nav-list for drawers.
Pagination
Navigation controls to move between pages of content.
Progress
Indeterminate or determinate indicator of task completion.
Rating
Integer star rating built from native radio inputs, and a read-only display of a rating.
Reveal
Reveal fades a block into place on its first render, or the first time it scrolls into view with the in-view runtime.
Segmented control
One compact choice among a few options, on a shared track with the selected segment raised.
Shimmer
Shimmer sweeps a highlight across a text label to show an activity in progress: an agent working, a chatbot composing, a job processing.
Skeleton
Placeholder shapes for content that is loading.
Spinner
Loading indicator for actions or regions that may take noticeable time.
Steps
Progress through a short multi-step flow.
Table
Data table with caption and scope attributes, and an accessible scroll region for wide content.
Timeline
Vertical history of dated events: activity feed, audit log, order tracking.
Patterns
How patterns relate to layout and components: Patterns overview.
Navigation list
Arrange navigation links in vertical lists or horizontal rows using .nav-list and .cluster.
Icon input
Add a leading icon to a search or filter input with .input-icon, keeping the text clear of the icon.
Icon slot
Compose a stable icon box for notifications, activity feeds and cards, using existing layout primitives.
Structured lists
Choose semantic list markup and compose the layout or component treatment that fits the collection.
Hierarchical scrollable nav
Build a scrollable sidebar with collapsible navigation groups using native details and existing primitives.
Code block with copy button
Add a copy button to a code block with .btn, native code markup and the enhance() lifecycle.
Exclusive accordion
Keep one accordion panel open at a time with native <details> groups, without a JavaScript engine.
Intent nesting
Apply an intent to each component independently, so nested buttons and controls keep their own colors.
Empty state
Guide users when a list is empty or a search has no results, with a message and an optional next action.
Stat
Present a key figure with its label, supporting detail and optional trend for dashboards and KPI cards.