---
name: "@materialcn"
slug: "materialcn"
description: "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."
category: "Forms"
tags: ["accessibility", "buttons", "cards", "design-system", "forms", "hooks", "icons", "loaders", "media", "navigation", "overlays", "pro-available", "theming"]
framework: "react"
license: "MIT"
author: "guillermo-rebolledo"
website: "https://github.com/guillermo-rebolledo/materialcn"
github: "https://github.com/guillermo-rebolledo/materialcn"
registry: "https://guillermo-rebolledo.github.io/materialcn/r/registry.json"
pro: true
pro_url: "https://github.com/enterprise/premium-support"
github_stars: 1
component_count: 66
generated_at: "2026-09-21T01:50:16.753Z"
---

# @materialcn

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.

## Links

- Website: https://github.com/guillermo-rebolledo/materialcn
- GitHub: https://github.com/guillermo-rebolledo/materialcn
- Registry JSON: https://guillermo-rebolledo.github.io/materialcn/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/materialcn
- This file: https://sh4dcn.vercel.app/md/materialcn.md
- Pro / pricing: https://github.com/enterprise/premium-support

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/registry.json
pnpm dlx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/registry.json
bunx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/registry.json
# clone the source repo
git clone https://github.com/guillermo-rebolledo/materialcn.git
# fetch the raw registry index
curl -s https://guillermo-rebolledo.github.io/materialcn/r/registry.json
```

## Components (66)

| name | type | description | install |
| --- | --- | --- | --- |
| materialcn-theme | registry:theme | The Material 3 Expressive token layer: color roles and four alternate palettes, type scale, shape, spacing, elevation, state layers, motion springs, and the re… | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json` |
| accordion | registry:ui | Expandable sections on the M3 motion springs. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/accordion.json` |
| alert | registry:ui | An inline message in four severities, mapped onto the closest M3 container roles. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/alert.json` |
| avatar | registry:ui | A circular image with an initials fallback. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/avatar.json` |
| badge | registry:ui | Material chip geometry as a static label. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/badge.json` |
| bottom-app-bar | registry:ui | The bottom app bar, with actions and an optional docked FAB. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/bottom-app-bar.json` |
| breadcrumb | registry:ui | The shadcn breadcrumb primitives on the M3 type and color roles. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/breadcrumb.json` |
| breadcrumbs | registry:ui | A breadcrumb trail from a list of entries, collapsing the middle when it overflows. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/breadcrumbs.json` |
| button | registry:ui | 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. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/button.json` |
| button-group | registry:ui | Connected and standard groups of buttons, with the kit's 2dp separation and first/middle/last corner geometry. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/button-group.json` |
| button-group-context | registry:ui | Carries a group's shape, size, and variant down to the buttons inside it. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/button-group-context.json` |
| button-variants | registry:ui | The `cva` definition behind Button's variant, size, and shape props. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/button-variants.json` |
| calendar | registry:ui | The Material date grid, for single dates and ranges. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/calendar.json` |
| calendar-utils | registry:ui | Date maths for the calendar and the date pickers, free of any date library. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/calendar-utils.json` |
| card | registry:ui | Elevated, filled, and outlined cards on the M3 surface ramp. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/card.json` |
| carousel | registry:ui | The Material carousel layouts — multi-browse, hero, uncontained, full-screen — sized by container query. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/carousel.json` |
| checkbox | registry:ui | The Material checkbox, including the indeterminate state. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/checkbox.json` |
| chip | registry:ui | Assist, filter, input, and suggestion chips, with selected, removable, and icon states. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/chip.json` |
| circular-progress | registry:ui | The circular progress indicator, determinate and indeterminate. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/circular-progress.json` |
| date-picker | registry:ui | A text field with a docked date picker. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/date-picker.json` |
| date-picker-dialog | registry:ui | The modal date picker, with the calendar and text-entry modes. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/date-picker-dialog.json` |
| dialog | registry:ui | The Material dialog, basic and full-screen. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/dialog.json` |
| dropdown-menu | registry:ui | The Material menu: standard and vibrant items, leading icons, trailing text, submenus, and destructive actions. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/dropdown-menu.json` |
| fab | registry:ui | The floating action button in three sizes, plus the extended FAB, which requires a readable label. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/fab.json` |
| fab-menu | registry:ui | A FAB that expands into a column of labelled actions. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/fab-menu.json` |
| field | registry:ui | The label, description, and error scaffolding shared by every form control. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/field.json` |
| icon | registry:ui | Sizes and optically aligns a lucide icon against the M3 type scale. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/icon.json` |
| image | registry:ui | An image on the M3 shape scale, with aspect ratio, fallback, and loading states. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/image.json` |
| input | registry:ui | The bare text input Field and TextField build on. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/input.json` |
| input-group | registry:ui | An input with leading and trailing affixes inside one container. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/input-group.json` |
| label | registry:ui | A form label bound to its control. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/label.json` |
| link | registry:ui | An inline link on the M3 type and color roles. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/link.json` |
| list | registry:ui | Material list rows in three densities, with leading and trailing slots. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/list.json` |
| loading-indicator | registry:ui | The M3 Expressive loading indicator, morphing through the kit's seven shapes. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/loading-indicator.json` |
| navigation-bar | registry:ui | The bottom navigation bar, with the M3 Expressive active indicator. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/navigation-bar.json` |
| navigation-context | registry:ui | The selected destination, shared by the navigation bar and the rail. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/navigation-context.json` |
| navigation-rail | registry:ui | The navigation rail, collapsed or expanded, for medium and larger windows. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/navigation-rail.json` |
| notification-badge | registry:ui | The dot and numeric badges that sit over an icon, with `99+` overflow. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/notification-badge.json` |
| pagination | registry:ui | The shadcn pagination primitives on the M3 roles. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/pagination.json` |
| paginator | registry:ui | A page control from a total and a current page, with the page-window logic. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/paginator.json` |
| palettes | registry:lib | The alternate palettes shipped by the theme, as data for a palette picker. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/palettes.json` |
| progress | registry:ui | The linear progress indicator, determinate and indeterminate, with the M3 Expressive wave. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/progress.json` |
| radio-group | registry:ui | Material radio buttons. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/radio-group.json` |
| rich-tooltip | registry:ui | The rich tooltip: a title, body text, and optional actions. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/rich-tooltip.json` |
| search-bar | registry:ui | The Material search bar, with leading and trailing actions. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/search-bar.json` |
| search-view | registry:ui | The full-screen search surface a search bar expands into. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/search-view.json` |
| select | registry:ui | A select styled to the Material menu. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/select.json` |
| separator | registry:ui | The Material divider, horizontal or vertical, full-width or inset. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/separator.json` |
| sheet | registry:ui | Side and bottom sheets, modal or standard. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/sheet.json` |
| skeleton | registry:ui | Loading placeholders sized to the type scale role they stand in for. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/skeleton.json` |
| slider | registry:ui | The M3 Expressive slider, continuous or stepped, with the value label. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/slider.json` |
| split-button | registry:ui | A primary action joined to a menu trigger, with the kit's asymmetric segment geometry. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/split-button.json` |
| switch | registry:ui | The Material 3 switch, with the icon-in-thumb variants. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/switch.json` |
| tabs | registry:ui | Primary and secondary tabs with the sliding active indicator. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/tabs.json` |
| text-field | registry:ui | The Material text field, filled and outlined, with the floating label, supporting text, and character counter. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/text-field.json` |
| theme-context | registry:component | The context behind `useTheme`: the current color scheme and palette. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/theme-context.json` |
| theme-provider | registry:component | Puts the page in light, dark, or system mode and selects a palette, persisting the choice and exposing it through `useTheme`. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/theme-provider.json` |
| time-dial | registry:ui | The Material clock dial, and the dialog that pairs it with text entry. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/time-dial.json` |
| time-picker | registry:ui | Text entry for a time, in 12- or 24-hour mode. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/time-picker.json` |
| toast | registry:ui | The Material snackbar and its imperative `toast` API, with stacking and actions. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/toast.json` |
| toggle | registry:ui | A button that stays pressed, with the Material selected state. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/toggle.json` |
| toggle-group | registry:ui | Single- or multi-select groups of toggles. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/toggle-group.json` |
| toolbar | registry:ui | The floating and docked toolbars, in standard and vibrant color. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/toolbar.json` |
| tooltip | registry:ui | The plain Material tooltip. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/tooltip.json` |
| top-app-bar | registry:ui | Small, medium, and large top app bars, with the scroll-collapse behavior. | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/top-app-bar.json` |
| utils | registry:lib | 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 … | `npx shadcn@latest add https://guillermo-rebolledo.github.io/materialcn/r/utils.json` |

## For AI agents

```text
You are adding components from @materialcn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/materialcn.md) for the component list.
2. Fetch the machine-readable index: https://guillermo-rebolledo.github.io/materialcn/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: materialcn).
```