daub-ui

Category: Tools & Productivity | Uploader: sliday | Downloads: 0 | Version: v1.0（Latest）

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

Changelog: Source: GitHub https://github.com/sliday/daub

Directory Structure

Current level: tree/main/

📁 .llm/
- 📄 todo.md 936 B
📁 .well-known/
- 📄 ai-plugin.json 1.1 KB
📁 blocks/
- 📁 app-specific/
  - 📄 api-keys-page-01.json 3.6 KB
  - 📄 billing-page-01.json 5.3 KB
  - 📄 changelog-page-01.json 7.9 KB
  - 📄 onboarding-tour-01.json 2.9 KB
  - 📄 profile-page-01.json 4.8 KB
  - 📄 settings-page-01.json 5.8 KB
- 📁 auth/
  - 📄 auth-page-01.json 6.8 KB
  - 📄 forgot-password-01.json 2.2 KB
  - 📄 forgot-password-check-email-01.json 2.3 KB
  - 📄 forgot-password-form-01.json 2.1 KB
  - 📄 forgot-password-new-password-01.json 2.7 KB
  - 📄 forgot-password-success-01.json 1.8 KB
  - 📄 login-form-01.json 2.7 KB
  - 📄 login-page-card-01.json 3.6 KB
  - 📄 login-page-card-02.json 3.4 KB
  - 📄 login-page-illustration-01.json 3.6 KB
  - 📄 login-page-minimal-01.json 3.4 KB
  - 📄 login-page-nav-01.json 4.3 KB
  - 📄 login-page-simple-01.json 3.7 KB
  - 📄 login-page-social-01.json 3.3 KB
  - 📄 login-page-social-leading-01.json 2.3 KB
  - 📄 login-split-carousel-01.json 9.5 KB
  - 📄 login-split-geometric-01.json 5.5 KB
  - 📄 login-split-image-01.json 4.8 KB
  - 📄 login-split-image-quote-01.json 5.8 KB
  - 📄 login-split-mockup-01.json 6.1 KB
  - 📄 login-split-mockup-quote-01.json 7.5 KB
  - 📄 login-split-quote-01.json 5.6 KB
  - 📄 register-form-01.json 3.5 KB
  - 📄 reset-password-01.json 2.8 KB
  - 📄 signup-card-01.json 3.8 KB
  - 📄 signup-card-02.json 4.6 KB
  - 📄 signup-nav-01.json 5.3 KB
  - 📄 signup-progress-01.json 2.9 KB
  - 📄 signup-progress-02.json 5.3 KB
  - 📄 signup-progress-03.json 4.3 KB
  - 📄 signup-sidebar-progress-01.json 7.3 KB
  - 📄 signup-sidebar-progress-02.json 6.8 KB
  - 📄 signup-sidebar-progress-03.json 6.8 KB
  - 📄 signup-simple-01.json 3.5 KB
  - 📄 signup-social-01.json 3.7 KB
  - 📄 signup-social-leading-01.json 3.5 KB
  - 📄 signup-split-app-mockup-01.json 6.6 KB
  - 📄 signup-split-arrow-01.json 6.6 KB
  - 📄 signup-split-carousel-01.json 8.7 KB
  - 📄 signup-split-gradient-01.json 5.5 KB
  - 📄 signup-split-image-bg-01.json 6.6 KB
  - 📄 signup-split-mockup-01.json 6.7 KB
  - 📄 signup-split-mockup-quote-01.json 8.0 KB
  - 📄 signup-split-quote-carousel-01.json 7.3 KB
  - 📄 signup-split-quote-image-01.json 5.4 KB
  - 📄 signup-split-quote-image-02.json 6.2 KB
  - 📄 social-login-01.json 3.4 KB
  - 📄 two-factor-01.json 2.5 KB
- 📁 banners/
  - 📄 banner-bottom-sticky-01.json 1.9 KB
  - 📄 banner-inline-01.json 2.3 KB
  - 📄 banner-top-01.json 1.3 KB
- 📁 blog/
  - 📄 blog-featured-01.json 2.7 KB
  - 📄 blog-grid-01.json 8.3 KB
  - 📄 blog-list-01.json 6.5 KB
  - 📄 blog-newsletter-01.json 4.4 KB
  - 📄 blog-post-header-01.json 3.5 KB
  - 📄 blog-sidebar-01.json 6.8 KB
- 📁 comparison/
  - 📄 before-after-01.json 3.1 KB
  - 📄 comparison-table-01.json 2.8 KB
  - 📄 vs-layout-01.json 4.1 KB
- 📁 contact/
  - 📄 contact-form-simple-01.json 3.2 KB
  - 📄 contact-info-01.json 4.1 KB
  - 📄 contact-offices-01.json 4.7 KB
  - 📄 contact-split-01.json 5.9 KB
  - 📄 contact-with-map-01.json 4.7 KB
- 📁 content/
  - 📄 content-numbered-steps-01.json 6.7 KB
  - 📄 content-quote-highlight-01.json 4.1 KB
  - 📄 content-section-01.json 2.8 KB
  - 📄 content-split-01.json 3.6 KB
  - 📄 content-video-embed-01.json 4.7 KB
  - 📄 content-with-image-01.json 4.1 KB
- 📁 cta/
  - 📄 cta-abstract-images-01.json 7.7 KB
  - 📄 cta-banner-01.json 1.7 KB
  - 📄 cta-card-horizontal-01.json 1.8 KB
  - 📄 cta-card-horizontal-split-01.json 2.0 KB
  - 📄 cta-card-vertical-01.json 1.9 KB
  - 📄 cta-download-01.json 3.4 KB
  - 📄 cta-floating-01.json 2.0 KB
  - 📄 cta-iphone-mockup-01.json 5.3 KB
  - 📄 cta-iphone-mockup-02.json 4.3 KB
  - 📄 cta-iphone-mockup-03.json 4.9 KB
  - 📄 cta-iphone-mockup-04.json 4.9 KB
  - 📄 cta-screen-mockup-01.json 7.7 KB
  - 📄 cta-screen-mockup-02.json 7.9 KB
  - 📄 cta-screen-mockup-03.json 5.7 KB
  - 📄 cta-screen-mockup-04.json 7.8 KB
  - 📄 cta-simple-01.json 1.2 KB
  - 📄 cta-simple-centered-01.json 1.6 KB
  - 📄 cta-simple-left-01.json 1.5 KB
  - 📄 cta-simple-logos-01.json 2.8 KB
  - 📄 cta-simple-logos-02.json 3.8 KB
  - 📄 cta-split-01.json 3.8 KB
  - 📄 cta-split-image-01.json 2.6 KB
  - 📄 cta-split-image-02.json 2.7 KB
  - 📄 cta-split-image-03.json 3.1 KB
  - 📄 cta-split-image-04.json 3.2 KB
  - 📄 cta-split-image-quote-01.json 5.6 KB
  - 📄 cta-split-image-quote-02.json 4.2 KB
  - 📄 cta-split-image-quote-03.json 3.6 KB
  - 📄 cta-split-image-quote-04.json 4.3 KB
  - 📄 cta-with-form-01.json 2.6 KB
- 📁 dashboard/
  - 📄 activity-feed-01.json 2.5 KB
  - 📄 chart-panel-01.json 4.3 KB
  - 📄 chart-section-01.json 1.5 KB
  - 📄 dashboard-header-01.json 1.6 KB
  - 📄 data-table-01.json 5.0 KB
  - 📄 empty-state-01.json 1.3 KB
  - 📄 header-01.json 4.2 KB
  - 📄 kanban-board-01.json 4.1 KB
  - 📄 notification-panel-01.json 3.3 KB
  - 📄 sidebar-layout-01.json 11.0 KB
  - 📄 stats-cards-row-01.json 1.2 KB
  - 📄 stats-row-01.json 1.1 KB
- 📁 data-display/
  - 📄 empty-state-01.json 653 B
  - 📄 notification-center-01.json 1.4 KB
  - 📄 profile-01.json 2.5 KB
- 📁 ecommerce/
  - 📄 category-grid-01.json 5.8 KB
  - 📄 checkout-form-01.json 8.2 KB
  - 📄 order-summary-01.json 9.9 KB
  - 📄 product-card-01.json 4.1 KB
  - 📄 product-carousel-01.json 6.7 KB
  - 📄 product-detail-01.json 7.1 KB
  - 📄 product-grid-01.json 4.6 KB
  - 📄 shopping-cart-01.json 10.7 KB
  - 📄 wishlist-01.json 7.5 KB
- 📁 error-pages/
  - 📄 404-illustration-01.json 3.5 KB
  - 📄 404-illustration-02.json 3.4 KB
  - 📄 404-illustration-03.json 4.6 KB
  - 📄 404-illustration-04.json 4.3 KB
  - 📄 404-page-01.json 3.0 KB
  - 📄 404-simple-01.json 1.6 KB
  - 📄 404-simple-02.json 3.2 KB
  - 📄 404-simple-03.json 1.7 KB
  - 📄 404-simple-04.json 5.0 KB
  - 📄 404-split-image-01.json 2.7 KB
  - 📄 404-split-image-02.json 2.6 KB
  - 📄 404-split-image-03.json 2.8 KB
  - 📄 404-split-image-04.json 5.4 KB
  - 📄 500-page-01.json 3.1 KB
  - 📄 coming-soon-01.json 5.5 KB
  - 📄 maintenance-page-01.json 5.2 KB
- 📁 event-schedule/
  - 📄 event-countdown-01.json 5.3 KB
  - 📄 schedule-tabs-01.json 3.7 KB
  - 📄 speaker-grid-01.json 7.6 KB
- 📁 faq/
  - 📄 faq-accordion-01.json 3.0 KB
  - 📄 faq-grid-01.json 2.6 KB
  - 📄 faq-simple-01.json 4.6 KB
  - 📄 faq-with-sidebar-01.json 4.0 KB
- 📁 features/
  - 📄 feature-alternating-01.json 5.2 KB
  - 📄 feature-bento-01.json 6.9 KB
  - 📄 feature-centered-01.json 3.6 KB
  - 📄 feature-comparison-01.json 5.2 KB
  - 📄 feature-grid-01.json 4.2 KB
  - 📄 feature-icon-grid-01.json 7.6 KB
  - 📄 feature-list-01.json 6.8 KB
  - 📄 feature-tabs-01.json 6.7 KB
  - 📄 feature-with-code-01.json 5.5 KB
- 📁 footer/
  - 📄 footer-columns-01.json 5.6 KB
  - 📄 footer-mega-01.json 7.6 KB
  - 📄 footer-minimal-01.json 1.2 KB
  - 📄 footer-simple-01.json 1.8 KB
  - 📄 footer-with-cta-01.json 6.4 KB
- 📁 forms/
  - 📄 checkout-01.json 5.4 KB
  - 📄 contact-01.json 2.3 KB
  - 📄 file-upload-01.json 5.5 KB
  - 📄 form-inline-01.json 2.9 KB
  - 📄 form-multi-step-01.json 3.5 KB
  - 📄 form-stacked-01.json 5.7 KB
  - 📄 form-with-sidebar-01.json 4.6 KB
  - 📄 login-01.json 2.6 KB
  - 📄 search-bar-01.json 2.9 KB
  - 📄 settings-01.json 3.4 KB
  - 📄 settings-form-01.json 5.6 KB
  - 📄 signup-01.json 3.1 KB
- 📁 hero/
  - 📄 hero-centered-01.json 2.8 KB
  - 📄 hero-fullscreen-01.json 2.4 KB
  - 📄 hero-minimal-01.json 1.7 KB
  - 📄 hero-split-01.json 4.0 KB
  - 📄 hero-video-background-01.json 2.3 KB
  - 📄 hero-with-app-screenshot-01.json 3.4 KB
  - 📄 hero-with-form-01.json 3.1 KB
  - 📄 hero-with-stats-01.json 3.0 KB
- 📁 how-it-works/
  - 📄 process-alternating-01.json 5.1 KB
  - 📄 steps-horizontal-01.json 4.5 KB
  - 📄 steps-vertical-01.json 5.7 KB
- 📁 integrations/
  - 📄 api-reference-01.json 7.1 KB
  - 📄 integration-grid-01.json 10.3 KB
  - 📄 integration-showcase-01.json 5.4 KB
- 📁 landing/
  - 📄 features-grid-01.json 2.1 KB
  - 📄 footer-01.json 4.4 KB
  - 📄 hero-01.json 3.1 KB
  - 📄 pricing-01.json 4.6 KB
  - 📄 testimonials-01.json 4.8 KB
- 📁 logo-bar/
  - 📄 logo-cloud-scrolling-01.json 2.9 KB
  - 📄 logo-cloud-simple-01.json 4.2 KB
  - 📄 logo-cloud-with-heading-01.json 4.3 KB
- 📁 media/
  - 📄 gallery-carousel-01.json 5.5 KB
  - 📄 gallery-grid-01.json 2.6 KB
  - 📄 media-with-text-01.json 4.4 KB
  - 📄 video-section-01.json 4.0 KB
- 📁 misc/
  - 📄 back-to-top-01.json 437 B
  - 📄 divider-01.json 741 B
  - 📄 language-switcher-01.json 995 B
  - 📄 scroll-indicator-01.json 417 B
  - 📄 skip-link-01.json 444 B
  - 📄 social-links-01.json 1.8 KB
  - 📄 table-of-contents-01.json 1.3 KB
  - 📄 theme-toggle-01.json 1.5 KB
- 📁 mobile/
  - 📄 app-shell-01.json 7.0 KB
- 📁 modals-overlays/
  - 📄 command-palette-01.json 1.9 KB
  - 📄 cookie-consent-01.json 1.9 KB
  - 📄 drawer-01.json 3.9 KB
  - 📄 lightbox-01.json 3.0 KB
  - 📄 modal-confirm-01.json 1.6 KB
  - 📄 modal-dialog-01.json 3.4 KB
  - 📄 toast-notification-01.json 1.5 KB
- 📁 navigation/
  - 📄 bottom-nav-01.json 605 B
  - 📄 breadcrumbs-01.json 1.0 KB
  - 📄 navbar-mega-menu-01.json 4.1 KB
  - 📄 navbar-mobile-drawer-01.json 2.6 KB
  - 📄 navbar-simple-01.json 2.1 KB
  - 📄 navbar-with-auth-01.json 1.1 KB
  - 📄 navbar-with-search-01.json 2.3 KB
  - 📄 pagination-01.json 1015 B
  - 📄 sidebar-nav-01.json 2.4 KB
  - 📄 tab-nav-01.json 3.9 KB
  - 📄 topbar-announcement-01.json 886 B
- 📁 newsletter/
  - 📄 newsletter-card-01.json 2.2 KB
  - 📄 newsletter-footer-01.json 2.8 KB
  - 📄 newsletter-inline-01.json 1.3 KB
  - 📄 newsletter-popup-01.json 2.0 KB
- 📁 portfolio/
  - 📄 portfolio-carousel-01.json 6.1 KB
  - 📄 portfolio-case-study-01.json 7.6 KB
  - 📄 portfolio-grid-01.json 9.0 KB
- 📁 pricing/
  - 📄 pricing-calculator-01.json 6.8 KB
  - 📄 pricing-comparison-table-01.json 3.8 KB
  - 📄 pricing-faq-01.json 3.7 KB
  - 📄 pricing-single-01.json 4.1 KB
  - 📄 pricing-tiers-01.json 6.7 KB
  - 📄 pricing-toggle-01.json 7.0 KB
- 📁 social-proof/
  - 📄 case-study-card-01.json 5.1 KB
  - 📄 press-mentions-01.json 4.3 KB
  - 📄 review-stars-01.json 7.4 KB
  - 📄 social-proof-bar-01.json 3.2 KB
  - 📄 testimonial-carousel-01.json 6.3 KB
  - 📄 testimonial-grid-01.json 5.7 KB
  - 📄 testimonial-single-01.json 2.1 KB
  - 📄 testimonial-wall-01.json 7.4 KB
- 📁 stats/
  - 📄 stats-counter-01.json 3.1 KB
  - 📄 stats-grid-01.json 1.7 KB
  - 📄 stats-row-01.json 2.8 KB
  - 📄 stats-with-description-01.json 4.7 KB
- 📁 team/
  - 📄 team-carousel-01.json 4.6 KB
  - 📄 team-featured-01.json 2.6 KB
  - 📄 team-grid-01.json 6.0 KB
  - 📄 team-list-01.json 6.0 KB
- 📁 timeline/
  - 📄 changelog-01.json 7.6 KB
  - 📄 roadmap-01.json 5.4 KB
  - 📄 timeline-horizontal-01.json 4.9 KB
  - 📄 timeline-vertical-01.json 2.3 KB
- 📄 embeddings.json 3.5 MB
- 📄 index.json 114.5 KB
- 📄 qa-results.json 6.3 KB
- 📄 regenerate-screenshots.sh 2.6 KB
- 📄 taxonomy.json 27.7 KB
📁 case-studies/
- 📄 dashrock-apps.jpg 772.5 KB
- 📄 dashrock-overview.jpg 1.2 MB
- 📄 dashrock-stack.jpg 59.8 KB
- 📄 dashrock-trends.jpg 864.2 KB
- 📄 dashrock-usage.jpg 876.0 KB
- 📄 marat-avatar.jpg 8.5 KB
- 📄 tamp-terminal.jpg 107.9 KB
📁 functions/
- 📁 api/
  - 📄 figma-callback.js 2.8 KB
  - 📄 figma.js 13.9 KB
  - 📄 generate.js 3.0 KB
  - 📄 mcp.js 127.5 KB
  - 📄 weblook.js 10.4 KB
📁 mcp/
- 📁 lib/
  - 📄 design-knowledge.js 12.5 KB
  - 📄 generate.js 2.4 KB
  - 📄 prompt.js 18.1 KB
  - 📄 render.js 3.0 KB
  - 📄 renderers.js 63.6 KB
  - 📄 validate.js 3.8 KB
- 📄 package-lock.json 39.7 KB
- 📄 package.json 290 B
- 📄 server.js 5.9 KB
📁 scripts/
- 📄 wcag-audit.mjs 3.6 KB
- 📄 wcag-fix.mjs 6.2 KB
📁 skill-landing-pages/
- 📁 references/
  - 📄 decisions.md 6.0 KB
  - 📄 patterns.md 15.2 KB
- 📄 SKILL.md 7.7 KB
📁 tests/
- 📄 chip-colors.test.mjs 2.1 KB
- 📄 design-intelligence.test.mjs 10.7 KB
- 📄 openui-parser.test.js 26.7 KB
- 📄 theme-preview.test.mjs 3.0 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
- 📄 block-batch-generate.js 12.5 KB
- 📄 block-embed.js 7.1 KB
- 📄 block-fix-input-types.js 1.9 KB
- 📄 block-format-convert.js 2.7 KB
- 📄 block-generate.js 20.4 KB
- 📄 block-index-builder.js 7.1 KB
- 📄 block-qa.js 7.6 KB
- 📄 block-screenshot.js 8.7 KB
- 📄 block-test.js 15.8 KB
- 📄 LAYOUT-RULES.md 8.3 KB
📄 .gitignore 247 B
📄 _headers 764 B
📄 _redirects 36 B
📄 case-studies.html 24.8 KB
📄 CHANGELOG.md 75.7 KB
📄 components.json 59.1 KB
📄 daub-classless.css 50.5 KB
📄 daub-openui-parser.js 18.1 KB
📄 daub-render.js 64.6 KB
📄 daub.css 164.3 KB
📄 daub.d.ts 3.4 KB
📄 daub.js 83.9 KB
📄 demo.html 50.9 KB
📄 docs.html 15.8 KB
📄 index.html 162.8 KB
📄 llms-compact.txt 4.8 KB
📄 llms.txt 56.1 KB
📄 og-image.png 75.3 KB
📄 og-template.html 13.4 KB
📄 package.json 947 B
📄 PIPELINE.md 5.6 KB
📄 playground.html 286.8 KB
📄 README.md 24.9 KB
📄 roadmap.html 33.4 KB
📄 ROADMAP.md 8.7 KB
📄 robots.txt 280 B
📄 sitemap.xml 2.2 KB
📄 SKILL.md 10.6 KB
📄 theme-preview.html 28.4 KB
📄 themes.html 17.4 KB
📄 wrangler.toml 314 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
  - 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: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.

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

Comments 0

Latest | Hot

Please login before commenting.

No comments yet. Be the first one!

daub-ui

Directory Structure

SKILL.md

Report

Notice