Skip to content
M3 Expressive

Components

Every Material 3 Expressive component, rebuilt in Svelte 5 with Tailwind 4 and shadcn-svelte. All demos are live and follow the theme you set in the Theme panel.

6 groups · 38 components · built from the spec values

Styles

The foundation every component reads from: color roles, type, shape, motion and elevation.

  • Color roles
  • Type scale
  • Corner radius
  • Shape library
  • Motion springs
  • Elevation
  • State layers

Actions

Buttons in five sizes and shapes that morph when pressed, plus FABs and button groups.

  • Buttons
  • Icon buttons
  • FAB
  • Extended FAB
  • FAB menu
  • Button groups
  • Split button
  • Segmented button

Selection

Controls for picking options and values, from checkboxes to the Expressive slider.

  • Checkbox
  • Radio button
  • Switch
  • Slider
  • Chips

Inputs

Text entry and choosing from lists: fields with floating labels, search, menus and pickers.

  • Text fields
  • Search
  • Menus
  • Select
  • Date picker

Navigation

Ways to move between destinations, with bars and rails that adapt to the window size.

  • Navigation bar
  • Navigation rail
  • Navigation drawer
  • App bars
  • Toolbars
  • Tabs

Containment

Surfaces that hold and group content, from cards and lists to dialogs and sheets.

  • Cards
  • Dialogs
  • Bottom sheets
  • Side sheets
  • Lists
  • Divider
  • Carousel

Communication

Status and feedback: badges, wavy progress, the shape-morphing loader, snackbars and tooltips.

  • Badges
  • Linear progress
  • Circular progress
  • Loading indicator
  • Snackbar
  • Tooltips
  • Skeleton