Patterns

Small semantic HTML compositions built from native elements and CSS.


accordion

Expandable content sections

alert

Compact feedback blocks for status and context.

aspect-ratio

Fixed-ratio media wrapper

avatar

User avatar, fallback, badge, and group primitives.

badge

Inline status and metadata labels with semantic variants.

breadcrumb

Page location navigation

button-group

Layout primitive for visually connected buttons and form controls.

card

Sectioned content container using semantic parts.

chart

HTML-first chart container, legend, axis, and tooltip primitives

description-list

Semantic record details

disclosure

HTML-first disclosure state and trigger/panel relationships

empty

Empty state layout

field

Group labels, helper text, and errors with semantic field wrapper selectors.

file-upload

Native file selection and transfer status

filter-bar

Search and filter controls for data views

input-group

Grouped input controls and addon content with shared focus/description wiring.

input-otp

A native one-time-code input with a segmented visual treatment.

item

Flexible list item primitive

pagination

Page navigation links

popover

Floating rich content panels

skeleton

Loading placeholder primitive

spinner

Loading status indicator

stepper

Ordered multi-step workflow navigation

toggle

Pressed-state button primitive with aria-pressed state.

toggle-group

Native radio or checkbox groups with a toggle-button presentation.

validation-summary

Linked form validation messages