Materialcn

Overview

materialcn is a React component library that brings Material 3 Expressive design to shadcn/ui, built on Base UI primitives and Tailwind CSS v4. Its core idea is that Material is a token layer underneath shadcn: semantic variables such as --primary, --card and --border are pointed at M3 color roles, so an unmodified shadcn Button already renders as Material.

Tokens are extracted from the official Material Figma kit and cover color roles with four alternate palettes, the type scale, shape, spacing, elevation, state layers and motion springs. The registry holds 61 UI components plus a theme item, and parts of Material that shadcn lacks, such as tertiary colors and the surface-container ramp, are available as m3- utilities. A contrast check script verifies that every role pairing meets WCAG AA.

Features

• Single-item retheme: The materialcn-theme registry item restyles an existing shadcn project as Material.
• Material buttons: Five button variants across five sizes, round and square shapes, a press morph and a size-stable loading state.
• M3-specific components: FAB and FAB menu, split button, top and bottom app bars, navigation bar and rail, search bar and search view.
• Pickers: Date picker, date picker dialog, time picker and time dial.
• Feedback: Circular and linear progress, loading indicator, rich tooltip, notification badge and toast.
• Motion springs: Components such as the accordion animate on M3 motion springs.
• Tested in Storybook: Every story runs in a real browser through Vitest.

Tech stack

• React, Base UI, Tailwind CSS v4, shadcn/ui
• class-variance-authority, Embla Carousel, Roboto Flex, Storybook, Vitest

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @materialcn/component-name