@duestel/ui

A Material 3 (M3) React component library — the Duestel design guide, packaged. Built on Base UI primitives, Tailwind 4 (CSS-first tokens), and React 19.

• 🎨 40 components — accordion → tooltip, all M3-spec'd
• 🌗 Theming — light + dark out of the box, on M3 semantic color tokens
• 🧩 Headless behavior — Base UI compound parts (Root / Trigger / Panel …) wrapped in M3 styling
• 🔠 Full M3 type scale, radii, elevation — text-title-medium, rounded-medium, shadow-mm-1, …
• 📦 Tree-shakeable — per-component subpath exports, preserveModules build

Published publicly under the @duestel scope — npm install @duestel/ui, no auth required.

📖 Docs & live component explorer: ui.duestel.com

Install

npm install @duestel/ui
# or
bun add @duestel/ui

react and react-dom (^19) are peer dependencies — install them in your app.

Quick start

Import the styles once at your app root, then use components anywhere.

// app entry (e.g. main.tsx / layout.tsx)
import '@duestel/ui/styles.css'

import { Button } from '@duestel/ui'

export function App() {
  return <Button.Root variant="filled">Click me</Button.Root>
}

The components render with Readex Pro. styles.css is a zero-config drop-in — it ships the M3 tokens plus exactly the Tailwind utilities the components use. Load Readex Pro yourself (e.g. via Google Fonts or @fontsource/readex-pro).

Imports

Two import styles, both supported:

// 1. Namespace barrel (the root export)
import { Button, Accordion, DataTable } from '@duestel/ui'

<Accordion.Root>
  <Accordion.Item>…</Accordion.Item>
</Accordion.Root>

// 2. Per-component subpath (mirrors Base UI, best for tree-shaking)
import { Root, Item, Trigger, Panel } from '@duestel/ui/accordion'

Shared compound part names (Root, Trigger, …) collide in the flat barrel, so the root export exposes each component as a namespace object (Accordion.Root). Reach bare parts via the namespace or the subpath import.

Theming

Light is the default (:root); wrap any subtree in .dark for dark mode:

<div className="dark">
  {/* M3 dark tokens apply here */}
</div>

Colors are driven by M3 semantic tokens — primary / secondary / tertiary / error (+ on-*, *-container), surfaces (surface, surface-container-low, on-surface-variant, …), outline, scrim. Override the --m3-* CSS variables to retheme.

Bring-your-own Tailwind build

If your app already runs Tailwind 4 and you want the raw token layer (so component utilities compile in your pipeline), use theme.css instead of styles.css:

/* your app's main css */
@import '@duestel/ui/theme.css';
@source '@duestel/ui';

This imports the M3 @theme token layer and tells Tailwind to scan the package for utilities. Load Readex Pro yourself in this mode too.

Components

| | | | | |---|---|---|---| | accordion | alert-dialog | autocomplete | avatar | | badge | button | carousel | checkbox | | collapsible | combobox | command | context-menu | | data-table | date-picker | dialog | drawer | | form | hotkeys | menu | menubar | | meter | navigation-menu | number-field | otp-field | | pagination | popover | preview-card | progress | | radio | resizable | scroll-area | select | | separator | slider | switch | tabs | | toast | toggle | toolbar | tooltip |

Data tables are powered by TanStack Table; app forms by TanStack Form (useAppForm pre-binds M3 fields). Browse every component's stories, variants, and props at ui.duestel.com.

MCP server (AI agents)

A hosted Storybook MCP server exposes the component docs to AI coding agents — list components, fetch props/variants/usage, and preview stories, straight from the live Storybook at ui.duestel.com. Add it to Claude Code:

claude mcp add --transport http duestel-ui https://ui.duestel.com/mcp

Any MCP client that speaks streamable HTTP can connect to the same URL.

Requirements

• React 19+
• A Tailwind 4 toolchain only if you use theme.css; styles.css needs none.

License

UNLICENSED — © Duestel. Publicly available on npm; all rights reserved.