Material 3 Expressive for shadcn/ui. Base UI primitives restyled with M3 tokens extracted from the official Figma kit, so stock shadcn markup renders as Material — retheme an existing project with a single item.
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.
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 drops one of them.
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 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 Material 3 Expressive token layer: color roles and four alternate palettes, type scale, shape, spacing, elevation, state layers, motion springs, and the responsive grid. Points shadcn's semantic variables at M3 roles, so stock shadcn components render as Material.
The Material menu: standard and vibrant items, leading icons, trailing text, submenus, and destructive actions.
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.