@materialcn

The Material 3 Expressive token layer: color roles and four alternate palettes, type scale, shape, spacing, elevation, state layers, motion springs, and the re…

Expandable sections on the M3 motion springs.

An inline message in four severities, mapped onto the closest M3 container roles.

A circular image with an initials fallback.

Material chip geometry as a static label.

The bottom app bar, with actions and an optional docked FAB.

The shadcn breadcrumb primitives on the M3 type and color roles.

A breadcrumb trail from a list of entries, collapsing the middle when it overflows.

The five Material button variants across five sizes, in round and square shapes, with the press morph and the loading state that keeps the button's size.

Connected and standard groups of buttons, with the kit's 2dp separation and first/middle/last corner geometry.

Carries a group's shape, size, and variant down to the buttons inside it.

The `cva` definition behind Button's variant, size, and shape props.

The Material date grid, for single dates and ranges.

Date maths for the calendar and the date pickers, free of any date library.

Elevated, filled, and outlined cards on the M3 surface ramp.

The Material carousel layouts — multi-browse, hero, uncontained, full-screen — sized by container query.

The Material checkbox, including the indeterminate state.

Assist, filter, input, and suggestion chips, with selected, removable, and icon states.

The circular progress indicator, determinate and indeterminate.

A text field with a docked date picker.

The modal date picker, with the calendar and text-entry modes.

The Material dialog, basic and full-screen.

The Material menu: standard and vibrant items, leading icons, trailing text, submenus, and destructive actions.

The floating action button in three sizes, plus the extended FAB, which requires a readable label.

A FAB that expands into a column of labelled actions.

The label, description, and error scaffolding shared by every form control.

Sizes and optically aligns a lucide icon against the M3 type scale.

An image on the M3 shape scale, with aspect ratio, fallback, and loading states.

The bare text input Field and TextField build on.

An input with leading and trailing affixes inside one container.

A form label bound to its control.

An inline link on the M3 type and color roles.

Material list rows in three densities, with leading and trailing slots.

The M3 Expressive loading indicator, morphing through the kit's seven shapes.

The bottom navigation bar, with the M3 Expressive active indicator.

The selected destination, shared by the navigation bar and the rail.

The navigation rail, collapsed or expanded, for medium and larger windows.

The dot and numeric badges that sit over an icon, with `99+` overflow.

The shadcn pagination primitives on the M3 roles.

A page control from a total and a current page, with the page-window logic.

The alternate palettes shipped by the theme, as data for a palette picker.

The linear progress indicator, determinate and indeterminate, with the M3 Expressive wave.

Material radio buttons.

The rich tooltip: a title, body text, and optional actions.

The Material search bar, with leading and trailing actions.

The full-screen search surface a search bar expands into.

A select styled to the Material menu.

The Material divider, horizontal or vertical, full-width or inset.

Side and bottom sheets, modal or standard.

Loading placeholders sized to the type scale role they stand in for.

The M3 Expressive slider, continuous or stepped, with the value label.

A primary action joined to a menu trigger, with the kit's asymmetric segment geometry.

The Material 3 switch, with the icon-in-thumb variants.

Primary and secondary tabs with the sliding active indicator.

The Material text field, filled and outlined, with the floating label, supporting text, and character counter.

The context behind `useTheme`: the current color scheme and palette.

Puts the page in light, dark, or system mode and selects a palette, persisting the choice and exposing it through `useTheme`.

The Material clock dial, and the dialog that pairs it with text entry.

Text entry for a time, in 12- or 24-hour mode.

The Material snackbar and its imperative `toast` API, with stacking and actions.

A button that stays pressed, with the Material selected state.

Single- or multi-select groups of toggles.

The floating and docked toolbars, in standard and vibrant color.

The plain Material tooltip.

Small, medium, and large top app bars, with the scroll-collapse behavior.

The `cn` class merger, configured for the M3 utility namespaces. Without it tailwind-merge treats `text-m3-label-lg` and `text-m3-on-primary` as one group and …