App components

Find application components by purpose and open their examples and API.

Component guides are grouped by purpose. Each guide pairs rendered examples with their markup and an API table for the relevant elements, attributes, variants, states and tokens.

After choosing a component, open the utility reference for focused spacing, color, typography, layout and elevation adjustments.

Actions

Buttons
Base button styles, semantic color utilities and FAB variants.
Links
Inline, standalone and quiet link treatments for navigation and supporting actions.
Chips
Chip tones and checked, pressed and current visual states.

Forms

Forms
Field, floating-label, validation-state and toggle selectors.

Breadcrumbs
Wrapping breadcrumb trails built from direct link and button children.
Toolbars
Wrapping nav[data-toolbar] rows and container variants.
Tabs
Grouped details layout selected by data-tabs.
Menus
Positioned menus inside details[data-trigger].
Expansion panels
Full-width details panels with a generated open-state marker.
Steppers
Horizontal, vertical and numbers-only stepper presentations.

Feedback

Alerts
Alert surfaces with info, success, warning and danger tones.
Notifications
Fixed and inline notifications with tone, position and shadow tokens.
Progress
Determinate, indeterminate and spinner styles for progress elements.

Surfaces

Cards
Basic, elevated, squared and full-width card variants.
Dialogs
Centered dialogs with shape, width and elevation variants.
Bottom sheets
Bottom-anchored dialog layout with an optional shadow.
Drawers
Persistent and temporary complementary regions at either viewport edge.

Data display