--- name: daub-ui description: | Use when building UI with DAUB, the considered CSS component library from daub.dev. Trigger phrases: "daub", "daub.dev", "considered components", "db- components", "tactile UI kit" allowed-tools: - Read - Write - Edit - Bash - WebFetch - mcp__daub__generate_ui - mcp__daub__get_component_catalog - mcp__daub__validate_spec - mcp__daub__render_spec --- # DAUB UI — Component Library DAUB is a drop-in CSS + JS library with 73 considered components and 20 theme families (40 variants). Thoughtfully composed, no ceremony required. npm: `daub-ui` | CDN: `cdn.jsdelivr.net/npm/daub-ui@latest/daub.css` Machine-readable component reference: `https://daub.dev/components.json` TypeScript declarations: `https://daub.dev/daub.d.ts` ## Include (CDN) ```html ``` Alternative CDN: ```html ``` npm install: ```bash npm install daub-ui ``` Optional fonts (falls back gracefully): ```html ``` ## Class Convention All classes: `db-` prefix. All CSS variables: `--db-` prefix. ## Themes Set: `` Family API: `DAUB.setFamily('ink')` / `DAUB.setScheme('dark')` / `DAUB.getFamily()` Direct API: `DAUB.setTheme('dark')` / `DAUB.cycleTheme()` / `DAUB.getTheme()` Accent: `DAUB.setAccent('#6B7C3E')` / `DAUB.resetAccent()` Families (20): default, grunge, solarized, ink, ember, bone, dracula, nord, one-dark, monokai, gruvbox, night-owl, github, catppuccin, tokyo-night, material, synthwave, shades-of-purple, ayu, horizon (each with light + dark) Categories: originals, classics, modern, trending Category API: `DAUB.THEME_CATEGORIES`, `DAUB.getCategory('dracula')` ## Components Quick Reference ### Foundations - **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` / `-2` / `-3` - **Separator**: `db-separator` / `--vertical` / `--dashed` / `__label` - **Stack**: flexbox layout — `direction`, `gap`, `justify`, `align`, `wrap`, `container` - **Grid**: CSS grid layout — `columns` (2-6), `gap`, `align`, `container`; classes: `db-grid--2` through `--6`, `db-gap-3` - **Responsive**: `db-hide-mobile`, `db-show-mobile`, `db-hide-tablet`, `db-show-tablet`, `db-hide-desktop`, `db-show-desktop` - **Utilities**: `db-sr-only`, `db-text-muted`, `db-rounded-*` ### Controls - **Button**: `db-btn db-btn--primary` / `--secondary` / `--ghost` / `--sm` / `--lg` / `--icon` / `--loading` - **Icon Button Colors**: `db-btn--icon-danger` / `--icon-success` / `--icon-accent` - **Button Group**: `db-btn-group` — groups buttons with connected borders - **Field**: `db-field` > `db-field__label` + `db-field__input` + `db-field__helper` - **Input**: `db-input` / `--sm` / `--lg` / `--error` (standalone) - **Input Group**: `db-input-group` > `__addon` + `db-input` + `db-btn` - **Input Icon**: `db-input-icon` > `db-input-icon__icon` + `db-input` / `--right` - **Search**: `db-search` > `db-search__icon` + `db-input` + `db-search__clear` - **Textarea**: `db-textarea` / `--error` (standalone) - **Checkbox**: `db-checkbox` > `db-checkbox__input` + `db-checkbox__box` - **Radio**: `db-radio-group` > `db-radio` > `db-radio__input` + `db-radio__circle` - **Switch**: `db-switch` (role="switch", JS-managed) - **Slider**: `db-slider` > `db-slider__input` + `db-slider__value` - **Toggle**: `db-toggle` / `--sm` (aria-pressed) - **Toggle Group**: `db-toggle-group` — single/multi select - **Native Select**: `db-select` > `db-select__input` - **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` > `db-otp__input` + `db-otp__separator` ### Navigation - **Tabs**: `db-tabs` > `db-tabs__list` > `db-tabs__tab` + `db-tabs__panel` - **Breadcrumbs**: `db-breadcrumbs` > ol > li > a - **Pagination**: `db-pagination` > `db-pagination__btn` - **Stepper**: `db-stepper` > `db-stepper__step--completed/--active/--pending` - **Nav Menu**: `db-nav-menu` > `db-nav-menu__item` / `--active` - **Navbar**: `db-navbar` > `__brand` + `__nav` + `__spacer` + `__actions` + `__toggle` (sticky, mobile hamburger) - **Menubar**: `db-menubar` > `db-menubar__item` + `db-menubar__dropdown` - **Sidebar**: `db-sidebar` > `db-sidebar__section` > `db-sidebar__item` / `--active` / `--collapsed` / `__toggle` - **Bottom Nav**: `db-bottom-nav` > `db-bottom-nav__item` / `--active` / `__badge` / `--always` ### Data Display - **Card**: `db-card` > `db-card__header` + `db-card__title` + `db-card__footer` / `--media` (edge-to-edge images) - **Table**: `db-table` (sortable with `data-db-sort` on th) - **Data Table**: `db-data-table` — sortable, selectable rows - **List**: `db-list` > `db-list__item` > `db-list__title` + `db-list__secondary` - **Badge**: `db-badge` / `--new` / `--updated` / `--warning` / `--error` - **Chip**: `db-chip` / `--red` / `--green` / `--blue` / `--purple` / `--amber` / `--pink` / `--active` / `__close` / `data-db-chip-toggle` - **Avatar**: `db-avatar db-avatar--md` (sm=32px, md=40px, lg=56px) - **Avatar Group**: `db-avatar-group` > `db-avatar` + `db-avatar-group__overflow` (overlapping stack) - **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` - **Scroll Area**: `db-scroll-area` / `--horizontal` / `--vertical` ### Feedback - **Toast**: `DAUB.toast('Quick message')` or `DAUB.toast({ type: 'success', title: 'Done', message: '...' })` - **Alert**: `db-alert db-alert--warning` > `db-alert__icon` + `db-alert__content` - **Progress**: `db-progress` > `db-progress__bar` style="--db-progress: 65%" - **Skeleton**: `db-skeleton--text` / `--heading` / `--avatar` / `--btn` - **Empty State**: `db-empty` > `db-empty__icon` + `db-empty__title` + `db-empty__message` - **Tooltip**: `db-tooltip` / `--top` / `--bottom` / `--left` / `--right` ### Overlays (always use JS API — handles backdrop, focus trap, scroll lock) - **Modal**: `db-modal-overlay#id[aria-hidden] > db-modal > __header + __body + __footer` JS: `DAUB.openModal('id')` / `DAUB.closeModal('id')` / `data-db-modal-trigger="id"` - **Alert Dialog**: `db-alert-dialog#id > __overlay + __panel > __title + __desc + __actions` JS: `DAUB.openAlertDialog('id')` / `data-action="cancel"` auto-closes - **Sheet**: `db-sheet.db-sheet--right#id > __overlay + __panel > __header + __body` JS: `DAUB.openSheet('id')` — modifiers: `--right` / `--left` / `--top` / `--bottom` - **Drawer**: `db-drawer#id > __overlay + __panel > __handle + __body` JS: `DAUB.openDrawer('id')` — mobile-friendly bottom panel - **Command Palette**: `db-command#id > __overlay + __panel > __input-wrap + __list` JS: `DAUB.openCommand('id')` — Ctrl+K / Cmd+K shortcut - **Dropdown Menu**: `db-dropdown > __trigger + __content > __item + __separator + __label` JS auto-initializes click toggle. `__content--right` for right-aligned. `__menu` is an alias for `__content`. - **Context Menu**: `db-context-menu` — right-click, `data-context-menu` - **Popover**: `db-popover` / `--top` / `--bottom` / `--left` / `--right` - **Hover Card**: `db-hover-card` — CSS hover trigger ### Layout & Utility - **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` — toggle button + categorized popover with 20 families + scheme row ### Dashboard Primitives - **Stat Card**: `db-stat` > `db-stat__label` + `db-stat__value` + `db-stat__trend` / `--up` / `--down` - **Chart Card**: `db-chart-card` > `db-chart-card__header` + `db-chart-card__body` - **Table Utilities**: `db-table--compact`, `db-table--hover`, `db-td--number`, `db-td--actions` ### JS Helpers - **getColor**: `DAUB.getColor('primary')` — returns current theme's CSS variable value as hex - **Theme Events**: `document.addEventListener('daub:theme-change', e => e.detail.theme)` ## Notes - **Field inputs**: `db-field__input` goes on the wrapper element (not just ``) — applies to input, textarea, select wrappers, or custom control elements. - **Icons**: DAUB pairs well with [Lucide](https://lucide.dev) icons (``). All demos use Lucide. - **Overlay BEM**: Overlay components use hyphenated block names (e.g. `db-modal-overlay`, `db-alert-dialog`) with `__` children (e.g. `__panel`, `__body`). The outer wrapper gets the `id` and `aria-hidden` attributes that JS targets. ## MCP Server DAUB has a remote MCP server — if it's connected, use the tools instead of manually building HTML. **Setup** (one-time): ```bash claude mcp add daub --transport http https://daub.dev/api/mcp ``` **Tools available:** | Tool | When to use | |------|-------------| | `generate_ui` | Generate a full DAUB spec from a natural language prompt. Returns a JSON spec with components, props, layout, and theme. | | `get_component_catalog` | Look up available components, their props, valid themes, and the spec format. Use before hand-building specs. | | `validate_spec` | Check a spec for broken references, unknown types, missing children. Run after editing specs manually. | | `render_spec` | Get a playground preview URL for any spec. | **Workflow with MCP:** 1. Call `generate_ui` with a prompt like "Admin dashboard with sidebar, stat cards, and data table. Dracula theme." 2. The tool returns a flat JSON spec — iterate by calling `generate_ui` again with `existing_spec` + modification instructions 3. Call `validate_spec` to verify the spec is clean 4. Call `render_spec` to get a preview URL **Without MCP** (fallback): Build HTML manually using the component classes documented above, or point the LLM at `https://daub.dev/llms.txt`. ## Full Docs For complete HTML examples: `https://daub.dev/llms.txt` For json-render (Vercel Generative UI) integration: see the catalog+registry recipe in `llms.txt`.