@noxlovette/material

Google's Material Design 3 system, built for Svelte.

Every component is a real MD3 citizen — the token vocabulary (color roles, typescale, elevation, shape, motion), the state layers, the canonical layouts — implemented on top of Bits UI's headless primitives and styled with tailwind-variants. You get the accessibility and interaction behavior Bits UI already gets right, with Material's actual look and feel on top.

📖 Docs & overview · 🧩 Storybook — browse every component live

Storybook is the canonical place to actually look at things: every component, every variant, with Controls to poke at props and an a11y panel to check contrast and roles as you go. The docs site is prose — install steps, theming, rationale — and links out to Storybook rather than re-implementing a gallery of its own.

Install

npm i @noxlovette/material

/* your root stylesheet */
@import 'tailwindcss';
@import '@noxlovette/material/styles';
@import '@noxlovette/material/theme/light';
@import '@noxlovette/material/theme/dark';

<script lang="ts">
  import { App, Button, Card, Title } from '@noxlovette/material';
</script>

<App>
  <Card class="p-4">
    <Title>Hello world</Title>
    <Button>Click me</Button>
  </Card>
</App>

App wires up theming, dark-mode detection, and icon loading. Dynamic theming (generate a whole MD3 theme from a source color or an image, toggle light/dark/contrast at runtime) is covered on the docs site, along with the SSR setup that avoids a flash of unstyled content.

What's inside

Buttons, cards, dialogs, navigation rail/bar, side sheets, snackbars, tabs, sliders, chips, menus, text fields, and the rest of the MD3 component set, plus Pane/PaneGrid for Material's canonical layouts (list-detail, supporting-pane, feed) without hand-rolling flex/sticky positioning yourself. The full list, with live previews, is in Storybook.

A Claude Code skill ships alongside the library — npx @noxlovette/material material-claude-skill installs it into .claude/skills/material-design, so an agent working in your app gets the same token vocabulary and variant-selection rules this library was built with.

Credits

• Material Design 3 — the design system itself. All token names, color roles, and layout patterns here are Google's, not reinvented.
• Bits UI — the headless primitives underneath every interactive component. This library owes its accessibility behavior and interaction correctness to it; ours is the Material skin on top.

Contributing

bun run dev              # showcase site: landing page + prose docs
bun run storybook        # component workbench — the canonical way to view/QA components
bun run check             # svelte-check + tsc
bun run test              # vitest

See CLAUDE.md for the fuller architecture rundown and known pitfalls.

License

MIT