Back to Marketplace
FREE
Unvetted
Grow Business

DAUB UI Component Library

Build modern web interfaces using DAUB's 73 considered CSS components with 20 theme families and tactile design system

Install in one line

$ mfkvault install daub-ui-component-library

Requires the MFKVault CLI. Prefer MCP?

New skill
No reviews yet
New skill
🤖 Claude Code⚡ Cursor💻 Codex🦞 OpenClaw
FREE

Free to install — no account needed

Copy the command below and paste into your agent.

Instant access • No coding needed • No account needed

What you get in 5 minutes

  • Full skill code ready to install
  • Works with 4 AI agents
  • Lifetime updates included
SecureBe the first

Description

--- 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 <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> ``` Alternative CDN: ```html <link rel="stylesheet" href="https://unpkg.com/daub-ui@latest/daub.css"> <script src="https://unpkg.com/daub-ui@latest/daub.js"></script> ``` npm install: ```bash npm install daub-ui ``` Optional fonts (falls back gracefully): ```html <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"> ``` ## Class Convention All classes: `db-` prefix. All CSS variables: `--db-` prefix. ## Themes Set: `<html data-theme="dark">` 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 `<input>`) — applies to input, textarea, select wrappers, or custom control elements. - **Icons**: DAUB pairs well with [Lucide](https://lucide.dev) icons (`<script src="https://unpkg.com/lucide@latest"></script>`). 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`.

Preview in:

Security Status

Unvetted

Not yet security scanned

Time saved
How much time did this skill save you?

Related AI Tools

More Grow Business tools you might like

codex-collab

Free

Use when the user asks to invoke, delegate to, or collaborate with Codex on any task. Also use PROACTIVELY when an independent, non-Claude perspective from Codex would add value — second opinions on code, plans, architecture, or design decisions.

Rails Upgrade Analyzer

Free

Analyze Rails application upgrade path. Checks current version, finds latest release, fetches upgrade notes and diffs, then performs selective upgrade preserving local customizations.

Asta MCP — Academic Paper Search

Free

Domain expertise for Ai2 Asta MCP tools (Semantic Scholar corpus). Intent-to-tool routing, safe defaults, workflow patterns, and pitfall warnings for academic paper search, citation traversal, and author discovery.

Hand Drawn Diagrams

Free

Create hand-drawn Excalidraw diagrams, flows, explainers, wireframes, and page mockups. Default to monochrome sketch output; allow restrained color only for page mockups when the user explicitly wants webpage-like fidelity.

Move Code Quality Checker

Free

Analyzes Move language packages against the official Move Book Code Quality Checklist. Use this skill when reviewing Move code, checking Move 2024 Edition compliance, or analyzing Move packages for best practices. Activates automatically when working

Claude Memory Kit

Free

"Persistent memory system for Claude Code. Your agent remembers everything across sessions and projects. Two-layer architecture: hot cache (MEMORY.md) + knowledge wiki. Safety hooks prevent context loss. /close-day captures your day in one command. Z