Components
73 components, one system
Every component follows the same Material 3 contract: tonal color roles from the active seed, the five interaction states at spec opacities, and tokens resolved at build time. Pick a family below or search by name.
Inputs
15Text field
Text fields let people enter and edit a single line of text, with a floating label, supporting text, and inline validation.
Textarea
MTextarea provides native multiline editing with shared M3 field chrome, auto-grow, resize policy, and counters.
Number input
MNumberInput keeps a clean number model while allowing locale-aware incomplete editing drafts.
File input
MFileInput adds native file selection and reusable policy checks to the shared M3 field surface.
Autocomplete
MAutocomplete combines a searchable text field with typed local or remote listbox selection.
OTP input
MOtpInput uses one native autofill-friendly input with segmented visual cells.
File upload
MFileUpload composes one file policy with a transport-agnostic upload queue.
Color Input
Text-field color entry with formatting, validation, and picker integration.
Color Picker
Visual color editor with canvas, inputs, preview, and swatches.
Date Picker
Calendar surface for selecting a valid date inside configured bounds.
Dropdown
A field that holds a chosen value and a listbox that hands one over.
Form Renderer
Schema-driven form composition over the kit input and validation contracts.
Search
Search field with focus state, clearing, and accessible labelling.
Slider
Continuous or discrete numeric input with single and range modes.
Time Picker
Dial or keyboard surface for entering a time in 12- or 24-hour format.
Selection
8Rating
MRating is a single slider-like numeric control with fractional visuals.
Chip group
MChipGroup gives a set of chips one stable-value model and one roving focus entry point.
Checkbox
Independent boolean control for opting an item or setting in or out.
Chip
Compact assist, filter, input, or suggestion action.
Radio
Single-choice control used inside a mutually exclusive option group.
Selection Group
Headless selection coordinator for single, multiple, mandatory, and limited modes.
Selection Item
Registered selectable item that exposes group-derived state through its slot.
Switch
Immediate boolean setting control with visible on and off states.
Feedback
6Badge
Badges show a compact count or status associated with another interface element.
Alert
MAlert is a persistent inline status block that stays next to the state it explains.
Banner
MBanner is a neutral contextual action surface for page and section level situations.
Loading
Indeterminate progress indicator for work without a measurable completion value.
Progress
Linear or circular progress feedback for determinate and indeterminate work.
Snackbar
Transient status message with an optional recovery action.
Overlays
6Confirm edit
MConfirmEdit isolates a draft and protects async save, conflict, and dismissal flows.
Dialog
Modal decision surface with managed focus, dismissal, and action grouping.
Menu
Anchored action surface with stack, focus, keyboard, and outside-click behavior.
Overlay
Controlled transient-surface primitive for stacking, scrim, focus, and dismissal.
Sheet
Bottom-aligned modal surface with managed focus and drag-to-dismiss behavior.
Tooltip
Non-interactive contextual label shown from pointer or keyboard focus.
Layout
16List subheader
MListSubheader is a passive, optionally sticky section label for lists.
Timeline
MTimeline renders a vertical sequence of chronological events (v1).
Card
Bounded content surface for grouping related information and actions.
Column
Responsive grid column that translates breakpoint spans into layout geometry.
Container
Responsive content boundary that owns grid columns, width, and gutters.
Divider
Visual separator that clarifies grouping without adding another container.
Expansion Panel
Disclosure surface that reveals supporting content from an accessible header.
Expansion Panels
Selection-aware group that coordinates multiple expansion panels.
Layout
Grid host that coordinates registered application zones and responsive insets.
List
Structured vertical collection for related rows and item content.
Main
Legacy flex content boundary retained for compatibility; use MLayoutMain for grid-based application layout.
Responsive
Aspect-ratio boundary for stable responsive media and preview geometry.
Row
Responsive grid row that coordinates columns, alignment, and gutters.
Spacer
Flexible layout item that distributes remaining space between siblings.
Surface
Semantic Material surface with controlled treatment, shape, and HTML root.
Table
Structured data view with sorting, selection, custom cells, and pagination.
Utilities
6Icon
Icons communicate actions, states, and ideas through compact visual symbols.
Lazy
MLazy delays client-side subtree activation until view, idle time, interaction, or an explicit command.
Avatar
MAvatar is a passive identity surface with deterministic image, initials, and icon fallback.
App
Application root that owns theme scope, loading state, and the shared overlay host.
Hotkey
Platform-aware visual hint for a keyboard shortcut.
Shape
Canonical Material expressive shape rendered as scalable vector geometry.