DAUB

Considered CSS components for discerning interfaces.

Live Demo | Docs | Block Gallery | Playground | Roadmap | Case Studies | AI Docs

What is DAUB?

A drop-in CSS + JS component library with a tactile, handcrafted aesthetic. 76 components, 20 theme families (each with light & dark modes), zero build step. Thoughtfully composed, no ceremony required.

Not a CSS framework with AI bolted on — DAUB was designed from the ground up as the rendering layer for AI-generated interfaces. JSON-Render spec, MCP server, 230+ block RAG library, complexity-routed pipeline, and llms.txt documentation were built together. See ROADMAP.md for where DAUB is headed and what makes it different.

Playground Model Taxonomy

The Playground uses a task-based model routing strategy:

| Tier | Model | Use | |------|-------|-----| | Planning/Reasoning | gemini-3.1-pro-preview | Architecture planning, review assembly, regression design | | Regular | gemini-3-flash-preview | Chunk execution, default backend, main generation | | Regular fallback | kimi-k2.5 | Retry when Flash fails | | Quick/Granular | gemini-3.1-flash-lite-preview | Regression tests, yes/no decisions | | Decision Helper | minimax-m2.5 | Alternative opinion tool (text only) |

Fast Mode

Toggle in the Chat toolbar (on by default). Forces gemini-3.1-flash-lite-preview across all pipeline stages with reduced reasoning effort per stage complexity. Same orchestration, same flow — just faster and cheaper. Toggle off to restore the full multi-model routing above.

Quick Start

CDN (recommended)

<!-- Full library: 76 components + themes -->
<link rel="stylesheet" href="https://daub.dev/daub.css">
<script src="https://daub.dev/daub.js"></script>

<!-- Or classless only: plain HTML looks good, zero classes -->
<link rel="stylesheet" href="https://daub.dev/daub-classless.css">

Alternative CDNs (npm package: daub-ui):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daub-ui@latest/daub.css">
<script src="https://cdn.jsdelivr.net/npm/daub-ui@latest/daub.js"></script>

Download

git clone https://github.com/sliday/daub.git

Optional: Fonts & Icons

DAUB uses system font stacks by default. For richer typography:

<link href="https://fonts.googleapis.com/css2?family=Fraunces:[email protected]&family=Source+Serif+4:[email protected]&family=Cabin:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  :root {
    --db-font-heading: 'Fraunces', Georgia, serif;
    --db-font-body: 'Source Serif 4', Georgia, serif;
    --db-font-ui: 'Cabin', system-ui, sans-serif;
  }
</style>

<!-- Lucide Icons (recommended — used in all demos) -->
<script src="https://unpkg.com/lucide@latest"></script>

Components (76)

Foundations

| Component | Class | Notes | |-----------|-------|-------| | Surface | db-surface | --raised, --inset, --pressed | | Typography | db-h1–db-h4 | db-body, db-label, db-caption | | Prose | db-prose | --sm, --lg, --xl, --2xl | | Elevation | db-elevation-1 | 1, 2, 3 | | Separator | db-separator | --vertical, --dashed, __label | | Stack | flexbox layout | direction, gap, justify, align, wrap, container | | Grid | db-grid--2–--6 | columns, gap, align, container, db-gap-* | | Responsive | db-hide-mobile | db-show-mobile, db-hide-tablet, db-show-tablet, etc. | | Utilities | db-sr-only | db-text-muted, db-rounded-*, etc. |

Controls

| Component | Class | Notes | |-----------|-------|-------| | Button | db-btn | --primary, --secondary, --ghost, --sm, --lg, --icon, --loading | | Button Group | db-btn-group | Groups buttons with connected borders | | Text Field | db-field | --error | | Input | db-input | --sm, --lg, --error, standalone | | Input Group | db-input-group | Addons + inputs + buttons | | Input Icon | db-input-icon | --right, icon prefix/suffix | | Search | db-search | __icon, __clear, auto show/hide clear button | | Textarea | db-textarea | --error, standalone | | Checkbox | db-checkbox | | | Radio | db-radio | db-radio-group | | Switch | db-switch | aria-checked | | Slider | db-slider | | | Toggle | db-toggle | --sm, aria-pressed | | Toggle Group | db-toggle-group | Single/multi select | | Native Select | db-select | __input with chevron | | Custom Select | db-custom-select | Search, selection, combobox | | Kbd | db-kbd | --sm | | Label | db-label | --required, --optional | | Spinner | db-spinner | --sm, --lg, --xl | | Input OTP | db-otp | __input, __separator |

Navigation

| Component | Class | Notes | |-----------|-------|-------| | Tabs | db-tabs | | | Breadcrumbs | db-breadcrumbs | | | Pagination | db-pagination | | | Stepper | db-stepper | --completed, --active, --pending | | Nav Menu | db-nav-menu | __item, --active | | Navbar | db-navbar | __brand, __nav, __actions, __toggle, sticky mobile hamburger | | Menubar | db-menubar | __item, __dropdown | | Sidebar | db-sidebar | __item, --active, --collapsed, __toggle | | Bottom Nav | db-bottom-nav | __item, --active, __badge, --always |

Data Display

| Component | Class | Notes | |-----------|-------|-------| | Card | db-card | --media for edge-to-edge images | | Table | db-table | data-db-sort | | Data Table | db-data-table | Sortable, selectable rows | | List | db-list | | | Badge | db-badge | --new, --updated, --warning, --error | | Avatar | db-avatar | --sm, --md, --lg | | Avatar Group | db-avatar-group | Overlapping stack + __overflow counter | | Calendar | db-calendar | Day selection, today highlight | | Chart | db-chart | CSS-only bar chart | | Carousel | db-carousel | __track, __slide, __dots | | Aspect Ratio | db-aspect | --16-9, --4-3, --1-1, --21-9 | | Chip | db-chip | --red, --green, --blue, --purple, --amber, --pink, --active, __close, data-db-chip-toggle | | Scroll Area | db-scroll-area | --horizontal, --vertical |

Feedback

| Component | Class | Notes | |-----------|-------|-------| | Toast | JS only | DAUB.toast({ type, title, message }) | | Alert | db-alert | --info, --warning, --error, --success | | Progress | db-progress | --indeterminate | | Skeleton | db-skeleton | --text, --heading, --avatar, --btn | | Empty State | db-empty | | | Tooltip | db-tooltip | --top, --bottom, --left, --right |

Overlays

| Component | Class | Notes | |-----------|-------|-------| | Modal | db-modal | DAUB.openModal(), DAUB.closeModal() | | Alert Dialog | db-alert-dialog | DAUB.openAlertDialog() | | Sheet | db-sheet | --right, --left, --top, --bottom | | Drawer | db-drawer | Mobile-friendly bottom panel | | Popover | db-popover | --top, --bottom, --left, --right | | Hover Card | db-hover-card | CSS hover trigger | | Dropdown Menu | db-dropdown | __item, __separator, __label | | Context Menu | db-context-menu | Right-click, data-context-menu | | Command Palette | db-command | DAUB.openCommand(), Ctrl+K |

Layout & Utility

| Component | Class | Notes | |-----------|-------|-------| | Accordion | db-accordion | Single/multi mode via data-multi | | Collapsible | db-collapsible | Progressive disclosure | | Resizable | db-resizable | __handle--right, --bottom, --corner | | Date Picker | db-date-picker | Wraps Calendar in popover | | Theme Switcher | db-theme-switcher | 20 families + scheme switcher |

Themes

20 theme families in 4 categories, each with light and dark modes (40 variants total):

Originals

| Family | Light | Dark | Character | |--------|-------|------|-----------| | Default | light | dark | Warm cream / deep charcoal | | Grunge | grunge-light | grunge-dark | Typewriter / ink-stained | | Solarized | solarized | solarized-dark | Warm tinted / dusky amber | | Ink | ink-light | ink | Cool editorial / navy silver | | Ember | ember-light | ember | Sunlit pottery / copper glow | | Bone | bone | bone-dark | Stark white / grayscale brutalism |

Classics

| Family | Light | Dark | Character | |--------|-------|------|-----------| | Dracula | dracula-light | dracula | Alucard warmth / vampire purple | | Nord | nord-light | nord | Snow storm / arctic frost | | One Dark | one-dark-light | one-dark | Soft atom / midnight code | | Monokai | monokai-light | monokai | Warm latte / neon noir | | Gruvbox | gruvbox-light | gruvbox | Retro cream / earthy dark |

Modern

| Family | Light | Dark | Character | |--------|-------|------|-----------| | Night Owl | night-owl-light | night-owl | Soft dawn / deep twilight | | GitHub | github | github-dark | Clean primer / dimmed slate | | Catppuccin | catppuccin | catppuccin-dark | Latte pastel / mocha warmth | | Tokyo Night | tokyo-night-light | tokyo-night | Storm light / city neon | | Material | material-light | material | Lighter paper / palenight haze |

Trending

| Family | Light | Dark | Character | |--------|-------|------|-----------| | Synthwave | synthwave-light | synthwave | Warm retro / neon purple | | Shades of Purple | shades-of-purple-light | shades-of-purple | Soft lavender / deep violet | | Ayu | ayu | ayu-dark | Warm light / mirage dark | | Horizon | horizon-light | horizon | Soft rose / warm dusk |

Switching themes

<html data-theme="dark">

// Family-based (recommended)
DAUB.setFamily('ink');       // sets ink-light or ink depending on scheme
DAUB.setScheme('dark');      // switches current family to dark mode
DAUB.cycleTheme();           // cycles through 20 families, preserving mode

// Direct theme (backward compatible)
DAUB.setTheme('ink');        // sets exact theme variant
DAUB.getTheme();             // returns current theme name

// Accent color
DAUB.setAccent('#6B7C3E');   // olive accent, overrides terracotta
DAUB.resetAccent();          // restore theme default

Theme, scheme, and accent persist across page loads via localStorage.

FOUC Prevention

<script>
  (function(){try{var t=localStorage.getItem('db-theme');if(t)document.documentElement.setAttribute('data-theme',t);var s=localStorage.getItem('db-scheme');if(s)document.documentElement.setAttribute('data-scheme',s);var a=localStorage.getItem('db-accent');if(a)document.documentElement.style.setProperty('--db-terracotta',a)}catch(e){}})();
</script>

Prose Typography

The .db-prose class provides considered typographic defaults for long-form content:

<div class="db-prose">
  <h2>Title</h2>
  <p>Body text with comfortable 1.75 line-height and 65ch max-width.</p>
</div>

Scale variants: db-prose--sm, db-prose--lg, db-prose--xl, db-prose--2xl.

Customization

Override CSS custom properties:

:root {
  --db-terracotta: #E07A5F;
  --db-cream: #FAF8F0;
  --db-font-heading: 'Your Font', serif;
  --db-btn-radius: 999px;       /* pill buttons */
  --db-card-padding: 2rem;      /* roomier cards */
  --db-field-border: 2px solid #CBD5E1;
}

Token layers

| Layer | Examples | Count | |-------|---------|-------| | Palette | --db-terracotta, --db-cream, --db-sand, --db-clay, --db-ink | ~30 | | Scale | --db-space-1–8, --db-radius-1–full, --db-shadow-1–3, --db-text-xs–2xl | ~30 | | Semantic | --db-color-bg, --db-color-surface, --db-color-text, --db-color-accent | ~15 | | Component | --db-btn-*, --db-card-*, --db-field-*, --db-modal-*, --db-switch-* | ~70 |

Component tokens (v3.19): button, field, card, badge, switch, tabs, table, modal, toast, alert, progress, separator, navbar, sidebar, dropdown — each with --db-{component}-* properties for size, color, border, radius, and shadow.

Accessibility

• WCAG AA colour contrast across all 40 theme variants
• aria-* attributes on all interactive components
• Focus-visible outlines (keyboard navigation)
• Modal/Dialog: focus trapping, Escape to close
• Tabs: arrow key navigation
• Screen reader utility: db-sr-only
• Reduced motion support via prefers-reduced-motion

AI Integration

DAUB speaks both human and machine:

• /llms.txt — Plain-text component reference for LLMs (spec)
• /llms-compact.txt — Condensed version for token-constrained contexts
• /components.json — Machine-readable structured component reference (76 components with HTML examples)
• /daub.d.ts — TypeScript declarations for window.DAUB API
• /.well-known/ai-plugin.json — AI plugin manifest
• SKILL.md — Claude Code skill for DAUB development

Point your AI at https://daub.dev/llms.txt for complete component docs with HTML snippets, or fetch https://daub.dev/components.json for structured data.

For json-render (Vercel Generative UI): see the integration recipe in llms.txt.

Agent Skill

Install the DAUB skill into any AI coding agent (40+ supported):

npx skills add sliday/daub

This gives your agent full knowledge of all 76 components, class conventions, theme API, and usage patterns. Works with Claude Code, Cursor, Codex, Gemini CLI, OpenCode, and more.

Block Library

DAUB includes 230+ pre-made layout patterns across 34 categories. Every block is a self-contained UI section with realistic data.

| Category | Count | Category | Count | |----------|-------|----------|-------| | Auth | 48 | Newsletter | 4 | | Dashboard | 12 | FAQ | 4 | | Forms | 12 | Team | 4 | | Navigation | 11 | Timeline | 4 | | Ecommerce | 9 | Media | 4 | | Features | 9 | Data Display | 4 | | Hero | 8 | Banners | 3 | | Social Proof | 8 | Comparison | 3 | | Misc | 8 | Event Schedule | 3 | | Modals/Overlays | 7 | How It Works | 3 | | App Specific | 6 | Integrations | 3 | | Blog | 6 | Logo Bar | 3 | | Content | 6 | Portfolio | 3 | | CTA | 6 | Stats | 3 | | Pricing | 6 | Mobile | 1 | | Contact | 5 | | | | Footer | 5 | | | | Landing (legacy) | 5 | | | | Error Pages | 4 | | |

Blocks are automatically retrieved via RAG (Retrieval-Augmented Generation) during generate_ui calls. The system embeds user prompts with Gemini, finds the top-5 matching blocks by cosine similarity, and injects their full specs as few-shot examples.

Browse blocks via the MCP get_block_library tool or view them at blocks/index.json.

MCP Server

DAUB includes a remote Model Context Protocol (MCP) server that lets AI assistants generate, validate, and render DAUB UI specs directly — no API key required.

The MCP server uses complexity-based model routing: each prompt is scored across 6 dimensions and routed to an appropriate model tier with automatic fallback chains and exponential backoff.

| Tier | Score | Primary | Fallbacks | |------|-------|---------|-----------| | SIMPLE | 0–15 | Gemini 3.1 Flash Lite | DeepSeek V3.2, Grok 4.1 Fast | | MEDIUM | 16–35 | Gemini 3 Flash | MiniMax M2.5, Kimi K2.5 | | COMPLEX | 36–60 | Gemini 3.1 Pro | Claude Haiku 4.5, GPT-5.4 | | PREMIUM | 61–100 | Claude Sonnet 4.6 | Claude Opus 4.6, GPT-5.4 Pro |

What is MCP?

MCP is an open protocol that lets AI assistants use external tools. Once you connect the DAUB MCP server, your AI can generate full UI layouts, validate specs, and preview results — all through natural conversation.

Setup

Add to Claude Code:

claude mcp add daub --transport http https://daub.dev/api/mcp

For Cursor, Windsurf, or other MCP clients, add to your config:

{
  "mcpServers": {
    "daub": {
      "type": "http",
      "url": "https://daub.dev/api/mcp"
    }
  }
}

Tools

| Tool | Description | |------|-------------| | generate_ui | Generate a complete DAUB UI from a natural language prompt. Supports format: "openui" for 67% fewer tokens | | get_component_catalog | Browse available components, props, themes, and spec format | | validate_spec | Validate a DAUB spec JSON and get issue reports | | render_spec | Get a playground preview URL for any spec | | get_block_library | Browse pre-made layout blocks by category | | parse_openui | Parse OpenUI Lang code into a DAUB JSON spec |

Example Workflow

Once connected, just ask your AI assistant naturally:

"Build me a settings page with a sidebar, profile card, and notification toggles. Use the nord theme."

The AI will call generate_ui behind the scenes and return a complete DAUB spec — a flat JSON object describing every component, its props, and layout hierarchy:

{
  "theme": "nord-light",
  "root": "page",
  "elements": {
    "page": { "type": "Stack", "props": { "direction": "horizontal", "gap": 4 }, "children": ["sidebar", "main"] },
    "sidebar": { "type": "Sidebar", "props": { "sections": [{ "title": "Settings", "items": [{ "label": "Profile", "icon": "user", "active": true }, { "label": "Notifications", "icon": "bell" }] }] } },
    "main": { "type": "Stack", "props": { "direction": "vertical", "gap": 4 }, "children": ["profile-card", "notif-card"] },
    "profile-card": { "type": "Card", "props": { "title": "Profile", "description": "Manage your account details" }, "children": ["avatar", "name-field", "email-field"] },
    "avatar": { "type": "Avatar", "props": { "initials": "JD", "size": "lg" } },
    "name-field": { "type": "Field", "props": { "label": "Full Name", "placeholder": "Jane Doe" } },
    "email-field": { "type": "Field", "props": { "label": "Email", "placeholder": "[email protected]", "type": "email" } },
    "notif-card": { "type": "Card", "props": { "title": "Notifications" }, "children": ["email-switch", "push-switch"] },
    "email-switch": { "type": "Switch", "props": { "label": "Email notifications", "checked": true } },
    "push-switch": { "type": "Switch", "props": { "label": "Push notifications" } }
  }
}

You can then:

• Iterate — "Add a danger zone section with a delete account button and alert dialog"
• Validate — the AI calls validate_spec to check for missing children, unknown types, etc.
• Preview — the AI calls render_spec to get a live playground URL
• Refine — "Switch to the dracula theme and make the sidebar collapsible"

The spec renders directly in the DAUB Playground or any page with daub.css + daub.js.

No API key required. Runs on Cloudflare's edge network.

OpenUI Lang (Token-Efficient Output)

DAUB supports OpenUI Lang — a compact, streaming-first notation that uses ~67% fewer tokens than JSON for LLM-generated UI specs. The Playground auto-detects the format and renders progressively.

__theme = "nord-light"
root = Stack([sidebar, main], "horizontal", 4)
sidebar = Sidebar([{title: "Settings", items: [{label: "Profile", icon: "user", active: true}]}])
main = Stack([profile, notifs], "vertical", 4)
profile = Card([Field("Full Name", "Jane Doe"), Field("Email", "[email protected]", "email")], "Profile")
notifs = Card([Switch("Email notifications", true), Switch("Push notifications")], "Notifications")

This produces the same spec as the JSON example above. Both positional and named arguments are supported.

To use with the MCP server, pass format: "openui" to generate_ui. The parse_openui tool converts OpenUI Lang to JSON specs independently.

Use with AI

Drop these prompts into Claude, ChatGPT, Cursor, or any AI assistant. Each produces a complete, working HTML page. Add "Fetch docs from daub.dev/llms.txt first" for best results.

| Prompt | What You Get | |--------|-------------| | "Build an analytics dashboard using DAUB with sidebar, stat cards, sortable data table, and bar chart. Dark theme." | Full dashboard with db-sidebar, db-card, db-data-table, db-chart | | "Create a user settings page with DAUB. Profile section with avatar, notification switches, danger zone with alert dialog. Nord theme." | Settings form with db-field, db-switch, db-alert-dialog | | "Build a responsive product catalog with DAUB. Media cards in a grid, chip filters, pagination, navbar with search. Catppuccin theme." | E-commerce layout with db-card--media, db-chip, db-pagination, db-search | | "Create a Kanban task board using DAUB. Three columns, priority badges, assignee avatars, command palette. Tokyo Night theme." | Project board with db-grid--3, db-badge, db-avatar, db-command | | "Build a blog reading page with DAUB. Prose typography, breadcrumbs, author card, table of contents sidebar. GitHub theme." | Article layout with db-prose, db-breadcrumbs, db-nav-menu | | "Create a multi-step onboarding form with DAUB's stepper. Account info, preferences, confirmation. Ember theme." | Wizard flow with db-stepper, db-field, db-switch, db-card |

Minimal Dashboard

<!DOCTYPE html>
<html data-theme="light">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dashboard</title>
  <link rel="stylesheet" href="https://daub.dev/daub.css">
</head>
<body>
  <nav class="db-navbar">
    <a class="db-navbar__brand" href="/">Acme</a>
    <div class="db-navbar__spacer"></div>
    <div class="db-navbar__actions">
      <div class="db-avatar db-avatar--sm">JD</div>
    </div>
  </nav>
  <main class="db-container" style="padding:var(--db-space-6) var(--db-space-4)">
    <div class="db-grid db-grid--3 db-gap-4 db-mb-5">
      <div class="db-card" style="padding:var(--db-space-4)">
        <div class="db-stat">
          <span class="db-stat__label">Revenue</span>
          <span class="db-stat__value">$12,450</span>
          <span class="db-stat__change db-stat__change--up">↑ 12.5%</span>
        </div>
      </div>
      <div class="db-card" style="padding:var(--db-space-4)">
        <div class="db-stat">
          <span class="db-stat__label">Users</span>
          <span class="db-stat__value">1,284</span>
          <span class="db-stat__change db-stat__change--up">↑ 4.3%</span>
        </div>
      </div>
      <div class="db-card" style="padding:var(--db-space-4)">
        <div class="db-stat">
          <span class="db-stat__label">Orders</span>
          <span class="db-stat__value">342</span>
          <span class="db-stat__change db-stat__change--down">↓ 2.1%</span>
        </div>
      </div>
    </div>
    <div class="db-card">
      <div class="db-card__header">
        <h3 class="db-card__title">Recent Orders</h3>
        <span class="db-badge">Today</span>
      </div>
      <table class="db-table">
        <thead><tr><th>Customer</th><th class="db-numeric">Amount</th><th>Status</th></tr></thead>
        <tbody>
          <tr><td>Alice Park</td><td class="db-numeric">$120</td><td><span class="db-badge db-badge--new">Paid</span></td></tr>
          <tr><td>Bob Chen</td><td class="db-numeric">$85</td><td><span class="db-badge db-badge--warning">Pending</span></td></tr>
          <tr><td>Carol Davis</td><td class="db-numeric">$240</td><td><span class="db-badge db-badge--new">Paid</span></td></tr>
        </tbody>
      </table>
    </div>
  </main>
  <div class="db-theme-switcher"></div>
  <script src="https://daub.dev/daub.js"></script>
</body>
</html>

Save as .html, open in a browser. No build step.

Browser Support

• Chrome/Edge 90+
• Firefox 90+
• Safari 15+
• Mobile Safari, Chrome for Android

No polyfills needed.

Changelog

See CHANGELOG.md for the full release history.

Latest: v3.19.6 — Perceptually balanced chip colors (luminance 3.1x → 1.3x) + new Theme Preview page for testing Daub Style Chrome extension themes with live component previews.

v3.19.2 — SEO & AI discoverability: keyword-rich title/meta, FAQ schema, complete sitemap, consistent component count (76), llms.txt version sync. Mobile fixes: hamburger nav on all pages, configurator corner radius, toggle sizing, classless demo overflow, docs title responsiveness.

v3.19.1 — Fix playground renderer: add Icon and Link components, fix Field children prop passing, eliminate orphan elements. All 135 parser tests pass.

v3.19.0 — WCAG AA contrast across all 40 themes, native <dialog> + <progress> support, docs page, classless demo, comparison table. 76 components, 20 theme families.

Star History

License

MIT

Made with consideration by Sliday.