GETTING STARTED

Install Damo UI
in four minutes.

Damo UI is a React + Next.js component library inspired by Memphis design. Tokens, components, and patterns ready to compose into a product UI.

1. Install the package

terminal
1pnpm add damo-ui
2# or
3npm install damo-ui
4# or
5yarn add damo-ui
6

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.

app/layout.tsx
1// app/layout.tsx
2import 'damo-ui/styles/tokens.css'
3import 'damo-ui/styles/globals.css'
4

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

app/globals.css
1/* app/globals.css */
2@import 'damo-ui/styles/tokens.css';
3@import 'damo-ui/styles/globals.css';
4
5@import 'tailwindcss';
6@import 'damo-ui/styles/theme.css';
7
8@source '../../node_modules/damo-ui/dist/**/*.js';
9

3. Render your first component

1import { Button } from 'damo-ui'
2
3export default function Page() {
4  return <Button variant="primary">Save</Button>
5}
6

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:

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