DAUB

Considered CSS components for discerning interfaces.

CleanShot 2026-03-02 at 16 07 28 - 02

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:wght@300..900&family=Source+Serif+4:wght@300..900&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 |

Daub

Install / Use

README