daub-ui

分类: 工具与效率 | 上传者: sliday | 下载: 0 | 版本: v1.0（最新）

Use when building UI with DAUB, the considered CSS component library from daub.dev.

更新日志: Source: GitHub https://github.com/sliday/daub

目录结构

当前层级: 根目录

📁 .llm/
- 📄 todo.md 936 B
📁 .well-known/
- 📄 ai-plugin.json 1.2 KB
📁 functions/
- 📁 api/
  - 📄 generate.js 3.0 KB
  - 📄 weblook.js 10.4 KB
📁 tools/
- 📁 visual-qa/
  - 📄 analyze.js 13.4 KB
  - 📄 DAUB-DEV-BRIEF.md 11.5 KB
  - 📄 daub-visual-qa-findings.md 10.2 KB
  - 📄 generate.js 32.4 KB
  - 📄 package-lock.json 2.0 KB
  - 📄 package.json 356 B
  - 📄 render-capture.js 8.6 KB
📄 .gitignore 157 B
📄 _headers 764 B
📄 _redirects 36 B
📄 CHANGELOG.md 55.2 KB
📄 components.json 51.8 KB
📄 daub-classless.css 50.5 KB
📄 daub.css 154.5 KB
📄 daub.d.ts 3.4 KB
📄 daub.js 79.0 KB
📄 demo.html 40.8 KB
📄 index.html 122.3 KB
📄 llms-compact.txt 4.6 KB
📄 llms.txt 52.7 KB
📄 og-image.png 75.3 KB
📄 og-template.html 13.4 KB
📄 package.json 832 B
📄 playground.html 259.8 KB
📄 README.md 16.9 KB
📄 roadmap.html 28.8 KB
📄 ROADMAP.md 5.6 KB
📄 robots.txt 280 B
📄 sitemap.xml 1.2 KB
📄 SKILL.md 9.2 KB
📄 wrangler.toml 77 B

SKILL.md

---
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
---

# DAUB UI — Component Library

DAUB is a drop-in CSS + JS library with 76 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:wght@300..900&family=Source+Serif+4:wght@300..900&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.

## 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`.

登录后下载/点赞/收藏 ❤ 10 | ★ 0

daub-ui

目录结构

SKILL.md

举报内容

提示