GETTING STARTED

Set up Damo UI
in four minutes.

Damo UI is a CLI + registry that copies Memphis-styled React components straight into your codebase, shadcn-style. Tokens, components, and patterns you own and can tweak.

1. Initialize

1# scaffold components.json (no dependency to add)
2npx damo-ui init
3

2. Wire the styles

Import the design tokens and the global stylesheet once in your root layout. Tokens define colors, typography, radius, shadow, and motion as CSS variables.

1# copies the design tokens / theme / global CSS into ./styles
2npx damo-ui add base
3

If you use Tailwind v4, replace your globals.css with:

1/* app/globals.css */
2@import './styles/tokens.css';
3@import './styles/globals.css';
4
5@import 'tailwindcss';
6@import './styles/theme.css';
7
8/* let Tailwind v4 scan your copied-in components */
9@source './components/ui/**/*.{ts,tsx}';
10

3. Render your first component

1// after: npx damo-ui add button
2import { Button } from '@/components/ui/button'
3
4export default function Page() {
5  return <Button variant="primary">Save</Button>
6}
7

4. Wire theme, palette, density

Three orthogonal data-attributes on <html> drive every visual choice. Drop the lib's switcher components in your top bar and you're done — they read & write the attributes and persist to localStorage:

1// app/layout.tsx
2import { AppTopBar } from '@/components/ui/app-top-bar'
3import { AttrToggleGroup } from '@/components/ui/attr-toggle-group'
4
5export default function RootLayout({ children }) {
6  return (
7    <html
8      lang="en"
9      data-theme="light"        // 'light' | 'dark' | …your custom values
10      data-palette="default"    // any value you wired in CSS
11      data-density="normal"     // 'compact' | 'normal' | 'comfortable'
12      suppressHydrationWarning
13    >
14      <body suppressHydrationWarning>
15        <AppTopBar
16          logo={<a href="/">Brand</a>}
17          actions={
18            <>
19              <AttrToggleGroup
20                label="Theme"
21                storageKey="theme"
22                attribute="data-theme"
23                options={[
24                  { value: 'light', label: 'Light' },
25                  { value: 'dark',  label: 'Dark' },
26                ]}
27                defaultValue="light"
28              />
29              <AttrToggleGroup
30                label="Palette"
31                variant="select"
32                storageKey="palette"
33                attribute="data-palette"
34                options={[
35                  { value: 'default',   label: 'Default' },
36                  { value: 'cyberpunk', label: 'Cyberpunk' },
37                ]}
38                defaultValue="default"
39              />
40              <AttrToggleGroup
41                label="Density"
42                storageKey="density"
43                attribute="data-density"
44                options={[
45                  { value: 'compact',     label: 'Compact' },
46                  { value: 'normal',      label: 'Normal' },
47                  { value: 'comfortable', label: 'Comfortable' },
48                ]}
49                defaultValue="normal"
50              />
51            </>
52          }
53        />
54        {children}
55      </body>
56    </html>
57  )
58}
59

Valid attribute values

data-theme — the lib ships light only; declare your own [data-theme='dark'] CSS overrides. Wire a <AttrToggleGroup attribute="data-theme"> to switch between values.
data-palette — no built-ins; the lib's neutral defaults assume a single palette. Define [data-palette='cyberpunk'], [data-palette='sunset'], etc., and pass the same list to <AttrToggleGroup attribute="data-palette">.
data-density — built-in: compact, normal, comfortable. Drives --density-scale-y for vertical spacing.

Full guide with dark-mode setup, custom palettes, programmatic switching, and FOUC prevention → Theming.

Ready to compose? Browse components or generate a custom theme.

View on GitHub →

Set up Damo UIin four minutes.

1. Initialize

2. Wire the styles

3. Render your first component

4. Wire theme, palette, density

Set up Damo UI
in four minutes.