@wjqserver/md3

A Material Design 3 component library for SolidJS, built on Kobalte and Tailwind CSS v4.

Features

• Accessible: Built on Kobalte's headless primitives with ARIA support
• Tailwind CSS v4: Native CSS variables + theme integration
• Lightweight: Tree-shakeable ESM exports
• Type-safe: Full TypeScript support
• Themeable: CSS variable overrides, light/dark mode support

Installation

npm install @wjqserver/md3
# or
pnpm add @wjqserver/md3
# or
bun add @wjqserver/md3

Usage

import { Button, Card, TopAppBar, Icon } from "@wjqserver/md3"
import "@wjqserver/md3/theme.css"

function App() {
  return (
    <div>
      <TopAppBar title="My App" />
      <Card>
        <h2>Hello</h2>
        <Button variant="filled">Click me</Button>
      </Card>
    </div>
  )
}

Note: @wjqserver/md3 uses Tailwind CSS v4 classes. If you use Tailwind v4, the theme CSS file (@import "@wjqserver/md3/theme.css") integrates directly with Tailwind's @theme directive and auto-discovers component classes. For non-Tailwind consumers, the CSS variables in @wjqserver/md3/tokens.css provide the raw MD3 design tokens.

Components

| Component | Description | |---|---| | Button | Filled, tonal, outlined, text, elevated variants | | Card | Elevated, filled, outlined variants | | TopAppBar | Small, center, large variants | | NavigationDrawer | Standard, modal variants | | Dialog | Alert, simple dialogs | | TextField | Filled, outlined variants | | Select | Dropdown select | | Switch | Toggle switch | | Tabs | Primary, secondary variants | | FAB | Standard, small, extended variants | | Chip | Assist, filter, input, suggestion variants | | Snackbar | Toast notifications | | Tooltip | Hover tooltips | | Menu | Dropdown menus | | Badge | Dot, standard variants | | Divider | Full, inset, middle-inset variants | | Icon | Material Symbols icons | | Progress | Linear, circular variants | | Checkbox | Checkbox input | | Radio | Radio input |

Customization

Override CSS variables to customize the theme:

:root {
  --md-primary: oklch(0.42 0.18 280);
  --md-surface: oklch(0.98 0.005 280);
  /* ... */
}

.dark {
  --md-primary: oklch(0.8 0.15 280);
  --md-surface: oklch(0.15 0.005 280);
  /* ... */
}

License

MIT