# DAUB UI — Considered Component Library for AI Agents > Version: 3.19.11 > URL: https://daub.dev > CSS: https://daub.dev/daub.css > JS: https://daub.dev/daub.js > Repo: https://github.com/sliday/daub > License: MIT > Components: 76 > Theme Families: 20 (40 variants total) > Components JSON: https://daub.dev/components.json > TypeScript: https://daub.dev/daub.d.ts > React: npm install daub-react daub-ui (72 typed JSX components) ## Quick Start ```html ``` Alternative CDNs (npm package: daub-ui): ```html ``` Classless (zero-class drop-in styling for plain HTML): ```html ``` Progressive (classless defaults + class-based components): ```html ``` Fonts: System font stacks by default. Optional Google Fonts: ```html ``` Icons (optional): `` ## Class Prefix All classes: `db-`. All CSS custom properties: `--db-`. ## Themes 20 theme families in 4 categories, each with light & dark modes (40 variants): **Originals**: default, grunge, solarized, ink, ember, bone **Classics**: dracula, nord, one-dark, monokai, gruvbox **Modern**: night-owl, github, catppuccin, tokyo-night, material **Trending**: synthwave, shades-of-purple, ayu, horizon | Family | Light | Dark | Character | |--------|-------|------|-----------| | Default | `light` | `dark` | Warm cream / deep charcoal | | Grunge | `grunge-light` | `grunge-dark` | Typewriter / ink-stained | | Solarized | `solarized` | `solarized-dark` | Aged paper / antiqued leather | | Ink | `ink-light` | `ink` | Cool editorial / navy silver | | Ember | `ember-light` | `ember` | Sunlit pottery / copper glow | | Bone | `bone` | `bone-dark` | Stark white / grayscale brutalism | | 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 | | 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 | | 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 | Set via attribute: `` Family API: `DAUB.setFamily('ink')`, `DAUB.setScheme('dark')`, `DAUB.getFamily()` Direct API: `DAUB.setTheme('ink')`, `DAUB.cycleTheme()`, `DAUB.getTheme()` Accent API: `DAUB.setAccent('#6B7C3E')`, `DAUB.resetAccent()`, `DAUB.getAccent()` Temperature API: `DAUB.setTemperature('auto')` (daylight-aware), `DAUB.setTemperature(0.5)` (manual -1 to +1), `DAUB.getTemperature()` Persisted in `localStorage` keys: `db-theme`, `db-scheme`, `db-accent`, `db-temperature`. ## Quick Reference Skeletons Required HTML nesting for overlay and complex components. Use these as a starting template — each shows the minimum required structure. | Component | Skeleton | JS API | |-----------|----------|--------| | Modal | `db-modal-overlay#id[aria-hidden] > db-modal > __header + __body + __footer` | `DAUB.openModal('id')` / `closeModal('id')`. Dynamic content: `DAUB.openModal('id', { title: 'New Title', body: '

Content

', footer: '' })` | | Alert Dialog | `db-alert-dialog#id > __overlay + __panel > __title + __desc + __actions` | `DAUB.openAlertDialog('id')` | | Sheet | `db-sheet.--right#id > __overlay + __panel > __header + __body` | `DAUB.openSheet('id')` | | Drawer | `db-drawer#id > __overlay + __panel > __handle + __body` | `DAUB.openDrawer('id')` | | Command Palette | `db-command#id > __overlay + __panel > __input-wrap + __list` | `DAUB.openCommand('id')` | | Dropdown Menu | `db-dropdown > __trigger + __content > __item + __separator` | Auto-init on click | | Context Menu | `[data-context-menu='id'] + db-context-menu#id > __item + __separator` | Auto-init on right-click | | Tabs | `db-tabs > __list[role=tablist] > __tab + __panel` | Auto-init | | Accordion | `db-accordion > __item > __trigger + __content` | Auto-init | | Custom Select | `db-custom-select > __trigger + __dropdown > __option` | Auto-init | **Notes:** - `__` prefix means BEM child of the block (e.g., `__header` = `db-modal__header`) - Overlay wrappers (modal-overlay, alert-dialog, sheet, drawer, command) need an `id` for JS targeting - `db-modal-overlay` also needs `aria-hidden="true"` for accessibility - `db-field__input` goes on wrapper elements — not just `` tags - Icons: DAUB pairs well with [Lucide](https://unpkg.com/lucide@latest) — all demos use Lucide icons ## Components (76) ### 1. Button — `.db-btn` Variants: `db-btn--primary`, `db-btn--secondary`, `db-btn--ghost` States: `db-btn--loading`, `db-btn--disabled`, `db-btn--pressed` Sizes: `db-btn--sm`, `db-btn--lg`, `db-btn--icon` Icon colors: `db-btn--icon-danger`, `db-btn--icon-success`, `db-btn--icon-accent` ```html ``` ### 2. Button Group — `.db-btn-group` ```html
``` ### 3. Text Field — `.db-field` ```html
We'll never share your email.
``` Error state: add `db-field--error` to wrapper. ### 4. Input (standalone) — `.db-input` Sizes: `db-input--sm`, `db-input--lg`. Error: `db-input--error`. ```html ``` ### 5. Input Group — `.db-input-group` ```html
https://
``` ### 6. Textarea (standalone) — `.db-textarea` ```html ``` Error: `db-textarea--error`. ### 7. Checkbox — `.db-checkbox` ```html ``` ### 8. Radio — `.db-radio` ```html
``` ### 9. Switch — `.db-switch` ```html
Label
``` ### 10. Slider — `.db-slider` ```html
Volume50
``` ### 11. Toggle — `.db-toggle` Sizes: `db-toggle--sm`. Active: `aria-pressed="true"` or `db-toggle--active`. ```html ``` ### 12. Toggle Group — `.db-toggle-group` Single select by default. Add `data-multi` for multi-select. ```html
``` ### 13. Native Select — `.db-select` ```html
``` ### 14. Custom Select — `.db-custom-select` With search/filter. JS auto-initializes. ```html
Option A
Option B
``` ### 15. Kbd — `.db-kbd` Sizes: `db-kbd--sm`. ```html Ctrl + K ``` ### 16. Label — `.db-label` Modifiers: `db-label--required` (adds *), `db-label--optional` (adds "(optional)"). ```html ``` ### 17. Spinner — `.db-spinner` Sizes: `db-spinner--sm`, `db-spinner--lg`, `db-spinner--xl`. ```html ``` ### 18. Input OTP — `.db-otp` ```html
-
``` ### 19. Tabs — `.db-tabs` ```html
Content 1
``` CSS-only mode: add `db-tabs--static`. Uses radio inputs — no JS required. Ideal for React Server Components, Astro, or SSR contexts. ```html
Content 1
Content 2
``` ### 20. Card — `.db-card` Media variant: `db-card--media` removes padding for edge-to-edge images. ```html

Title

Description

Title

Description

``` Interactive: `db-card--interactive` adds cursor pointer + hover lift. ### 21. Modal — `.db-modal` ```html ``` Open: `DAUB.openModal('my-modal')`. Close: `DAUB.closeModal('my-modal')` or `DAUB.closeModal(overlayEl)`. ### 22. Alert Dialog — `.db-alert-dialog` ```html

Are you sure?

This action cannot be undone.

``` Open: `DAUB.openAlertDialog('confirm-delete')`. Close: `DAUB.closeAlertDialog('confirm-delete')`. ### 23. Sheet — `.db-sheet` Sides: `db-sheet--right`, `db-sheet--left`, `db-sheet--top`, `db-sheet--bottom`. ```html
Title
Content
``` Open: `DAUB.openSheet('my-sheet')`. Close: `DAUB.closeSheet('my-sheet')`. ### 24. Drawer — `.db-drawer` Mobile-friendly bottom panel. ```html
Content
``` Open: `DAUB.openDrawer('my-drawer')`. Close: `DAUB.closeDrawer('my-drawer')`. ### 25. Toast — via JS API ```js DAUB.toast({ type: 'success', title: 'Saved', message: 'Changes saved.', duration: 4000 }); ``` Types: `success`, `error`, `warning`, `info`. ### 26. Alert — `.db-alert` ```html
Warning

Something needs attention.

``` Variants: `--info`, `--warning`, `--error`, `--success`. ### 27. Badge — `.db-badge` ```html New ``` Variants: `--new`, `--updated` / `--success`, `--warning`, `--error` / `--danger`. Colour variants: `db-badge--green`, `db-badge--blue` / `--info`, `db-badge--purple`, `db-badge--amber`, `db-badge--red`, `db-badge--gray`. > Badges = static status indicators. Chips = interactive/removable/filterable tags. ### 28. Avatar — `.db-avatar` ```html
User
AB
``` Sizes: `--sm` (32px), `--md` (40px), `--lg` (56px). Avatar Group: overlapping stack with overflow counter. ```html
+5
``` ### 29. Table — `.db-table` ```html
NameRole
AliceEngineer
``` Sortable: add `data-db-sort` to ``. ### 30. Data Table — `.db-data-table` Enhanced table with checkbox selection and sortable headers. ```html
Name Status
ItemActive
``` Table utilities: `db-data-table--numeric` for tabular-nums on whole table. `db-numeric` class on ``/`` for right-aligned numbers. `db-truncate` for ellipsis overflow (max-width 200px). ### 31. List — `.db-list` ```html
Item
Details
``` ### 32. Breadcrumbs — `.db-breadcrumbs` ```html ``` ### 33. Pagination — `.db-pagination` ```html ``` ### 34. Stepper — `.db-stepper` ```html
1
Done
2
Current
``` ### 35. Nav Menu — `.db-nav-menu` ```html ``` ### 36. Navbar — `.db-navbar` Sticky top app bar with brand, nav links, spacer, and action buttons. Mobile hamburger toggle. JS: `DAUB.toggleNavbar(el)`. Mobile auto-close on outside click. ```html ``` **Responsive (built-in):** At ≤640px the `__toggle` button appears and `__nav` collapses. Clicking toggle adds `db-navbar--open` to show the mobile menu (vertical dropdown). Auto-closes on outside click. No framework code needed — `daub.js` auto-initializes. React/Next.js: include ` ``` ### Recipe 2: Image Card Grid (Pinterest-style) ```html Explore
All Nature Food Art Travel

Mountain Sunrise

Beautiful morning light over the peaks.

+3
``` ### Recipe 3: Settings Form ```html Settings

Account Settings

Profile

We'll never share your email.

Notifications

Email notifications
Push notifications
``` ## Chart.js Integration Recipe Use `DAUB.getColor()` to read theme tokens for chart libraries: ```js const chart = new Chart(document.getElementById('revenue'), { type: 'bar', data: { labels: ['Jan','Feb','Mar','Apr','May','Jun'], datasets: [{ label: 'Revenue', data: [12, 19, 3, 5, 2, 3], backgroundColor: DAUB.getColor('terracotta'), borderColor: DAUB.getColor('clay'), borderWidth: 1 }] }, options: { plugins: { legend: { labels: { color: DAUB.getColor('charcoal') } } }, scales: { x: { ticks: { color: DAUB.getColor('warm-gray') }, grid: { color: DAUB.getColor('sand') } }, y: { ticks: { color: DAUB.getColor('warm-gray') }, grid: { color: DAUB.getColor('sand') } } } } }); ``` Wrap the canvas inside `db-chart-card` for consistent card framing: ```html
Monthly Revenue
``` ## React Integration (daub-react) 72 typed JSX components wrapping DAUB's CSS classes. Full TypeScript, IDE autocomplete, forwardRef on all components. ```bash npm install daub-react daub-ui ``` ```tsx import "daub-ui/daub.css"; import { Button, Card, Stack, ThemeProvider, Modal, Tabs, Switch } from "daub-react"; function App() { return ( ); } ``` Components: Stack, Grid, Surface, Container, Separator, ScrollArea, AspectRatio, Card, Badge, Avatar, AvatarGroup, Alert, Progress, Skeleton, EmptyState, Spinner, StatCard, ChartCard, Chart, Image, Button, ButtonGroup, Input, Textarea, Field, InputGroup, InputIcon, Search, Select, Label, Kbd, Prose, List, Table, DataTable, Chip, Breadcrumbs, Pagination, NavMenu, BottomNav, Stepper, Navbar, HoverCard, ThemeProvider, Checkbox, Radio, RadioGroup, Switch, Slider, Toggle, ToggleGroup, InputOTP, Tabs, Accordion, Collapsible, CustomSelect, Calendar, DatePicker, Carousel, Modal, AlertDialog, Sheet, Drawer, Tooltip, Popover, DropdownMenu, ContextMenu, CommandPalette, Toast, ToastProvider. Hooks: useControllable, useToast, useEscapeKey, useOutsideClick, useFocusTrap. npm: https://www.npmjs.com/package/daub-react ## Design Intelligence (v3.19.11) DAUB's MCP server and generation pipeline include industry-aware design intelligence that automatically adapts the system prompt based on prompt content. ### Industry Intent Detection `detectIndustryIntent(prompt)` maps 20 industry categories to optimal DAUB themes and layout guidance: | Industry | Theme | Key Rules | |----------|-------|-----------| | SaaS/B2B | github | Trust blue, data-dense, Hero+Features+Pricing | | E-commerce | light | Product cards, CTA prominence, grid catalogs | | Fintech | material-light | Data-dense, muted palette, StatCards for KPIs | | Healthcare | nord-light | Calming, accessible, high contrast, no dark default | | Dashboard | github | StatCards + Charts + Tables, sidebar nav, compact | | Dev tools | dracula | Dark theme, monospace, Kbd shortcuts, compact | | Creative | grunge-dark | Bold, large imagery, full-bleed sections | | Gaming | tokyo-night | Dark, immersive, leaderboard tables, bold accents | | Music | synthwave | Dark + vibrant, list-based tracks, progress bars | Plus: education, blog, social, real estate, food, travel, fitness, HR, legal, nonprofit, onboarding. ### UX Validation Warnings `validateSpec()` returns a `warnings` array with soft UX checks: - BottomNav with >5 items - Multiple `variant:"primary"` Buttons in same parent - Input without Label or Field wrapper - Empty Text content - Card with no title and no children ### Page Formulas Structural templates injected into prompts for common page types: - Dashboard: Navbar + StatCards + Chart/Table + Activity feed - Settings: Sidebar/Tabs + Section cards + Form fields + Save footer - Onboarding: Stepper + Welcome + Profile + Preferences + Complete - Profile: Avatar + Stats + Tabs + Content - Pricing: Toggle + Plan cards + Feature comparison + FAQ ### Mobile Design Rules `detectMobileIntent(prompt)` triggers mobile-specific guidance: - BottomNav (5 tabs max) as primary navigation - Single-column layout, 48px touch targets - Sheet over Modal, Drawer for settings - App Shell pattern: Navbar + content + BottomNav