Shape

Action--md-shape-action28pxButton, IconButton, ButtonGroup, Select, DatePicker actions, FAB menu actions

Field--md-shape-field16pxTextField rounded containers

Field square--md-shape-field-square12pxTextField square containers, InputOtp inputs

Chip--md-shape-chip8pxChip, Menu inactive containers, Tabs active tonal containers, TimePicker fields

Card--md-shape-card12pxCard, rich Tooltip, Tabs tonal containers and focus indicators

Popover--md-shape-popover16pxMenu surfaces, active menu containers, detached SideSheet surfaces

Compact--md-shape-compact4pxSnackbar and plain Tooltip surfaces

Overlay--md-shape-overlay28pxDialog, DatePicker surfaces, TimePicker surfaces

Indicator--md-shape-indicatorfullLinearProgressIndicator, LoadingIndicator, NavigationRail active indicators, ListItem indicators

FAB--md-shape-fab16pxFloatingActionButton and FloatingActionButtonMenu triggers

CSS

:root {
  --md-shape-action: 28px;
  --md-shape-field: 16px;
  --md-shape-field-square: 12px;
  --md-shape-chip: 8px;
  --md-shape-card: 12px;
  --md-shape-popover: 16px;
  --md-shape-compact: 4px;
  --md-shape-overlay: 28px;
  --md-shape-indicator: 9999px;
  --md-shape-fab: 16px;
}

Documentation

M3 Vue

Material Design 3 components for Vue 3.

Get started Browse components

Installpnpm

pnpm add @chillet/m3-vue

Setup instructions arrow_forward

Documentation

Start with installation, or go directly to the reference you need.

rocket_launchGetting startedInstall the package and register the Vue plugin.arrow_forward widgetsComponentsBrowse component APIs, examples, and styling tokens.arrow_forward paletteStylingCustomize color, shape, typography, and elevation.arrow_forward menu_bookGuidesRead about composables, patterns, and integration details.arrow_forward

Components

Browse by component category.

smart_buttonActions edit_noteInputs toggle_onSelection view_sidebarNavigation dialogsContainment notificationsFeedback