# DAUB UI — Component Library for AI Agents > Version: 1.1 > URL: https://daub.dev > CSS: https://daub.dev/daub.css > JS: https://daub.dev/daub.js > Repo: https://github.com/sliday/daub > License: MIT ## Quick Start ```html ``` Fonts (optional, falls back to Georgia/system-ui): ```html ``` Icons (optional, used in demos): ```html ``` ## Class Prefix All classes use `db-` prefix. All CSS custom properties use `--db-` prefix. ## Themes 4 themes: `light`, `dark`, `grunge-light`, `grunge-dark` Set via attribute: `` JS API: `DAUB.setTheme('dark')`, `DAUB.cycleTheme()`, `DAUB.getTheme()` Persisted in `localStorage` key `db-theme`. ## Components (28) ### 1. Button — `.db-btn` Variants: `db-btn--primary`, `db-btn--secondary` States: `db-btn--loading`, `db-btn--disabled`, `db-btn--pressed` Sizes: `db-btn--sm`, `db-btn--lg`, `db-btn--icon` ```html ``` ### 2. Text Field — `.db-field` ```html

Email We'll never share your email.

``` Error state: add `db-field--error` to the wrapper. ### 3. Checkbox — `.db-checkbox` ```html Accept terms ``` ### 4. Radio — `.db-radio` ```html

Free

``` ### 5. Switch — `.db-switch` ```html

``` JS auto-initializes. Listen: `element.addEventListener('db:change', e => e.detail.checked)` ### 6. Slider — `.db-slider` ```html

Volume 50

``` ### 7. Tabs — `.db-tabs` ```html

Content 1

``` ### 8. Card — `.db-card` ```html

``` ### 9. Modal — `.db-modal` ```html ``` Open: `DAUB.openModal('my-modal')` or add `data-db-modal-trigger="my-modal"` to a button. Close: `DAUB.closeModal(overlayElement)` ### 10. Toast — via JS API ```js DAUB.toast({ type: 'success', title: 'Saved', message: 'Changes saved.', duration: 4000 }); ``` Types: `success`, `error`, `warning`, `info` ### 11. Alert — `.db-alert` ```html

Warning

Something needs attention.

``` Variants: `db-alert--info`, `db-alert--warning`, `db-alert--error`, `db-alert--success` ### 12. Badge — `.db-badge` ```html Default New ``` Variants: `db-badge--new`, `db-badge--updated`, `db-badge--warning`, `db-badge--error` ### 13. Avatar — `.db-avatar` ```html

``` Sizes: `db-avatar--sm` (32px), `db-avatar--md` (40px), `db-avatar--lg` (56px) ### 14. Table — `.db-table` ```html

Name	Role
Alice	Engineer

``` Sortable column: add `data-db-sort` to ``. ### 15. List — `.db-list` ```html

Item

Details

``` ### 16. Breadcrumbs — `.db-breadcrumbs` ```html ``` ### 17. Pagination — `.db-pagination` ```html ``` ### 18. Stepper — `.db-stepper` ```html

Done

Current

``` ### 19. Tooltip — `.db-tooltip` ```html ``` ### 20. Progress — `.db-progress` ```html

``` Indeterminate: add `db-progress--indeterminate`. ### 21. Skeleton — `.db-skeleton` ```html

``` ### 22. Empty State — `.db-empty` ```html

No items

Create your first item to get started.

``` ### 23. Surface — `.db-surface` Variants: `db-surface--raised`, `db-surface--inset`, `db-surface--pressed` ### 24. Typography — `.db-h1` through `.db-h4`, `.db-body`, `.db-label`, `.db-caption` ```html

Heading

Body text

Label Caption ``` ### 25. Elevation — `.db-elevation-1`, `.db-elevation-2`, `.db-elevation-3` ### 26. Layout — `.db-container`, `.db-flex`, `.db-grid` ```html

Col 1

Col 2

``` Flex: `db-flex--col`, `db-flex--wrap`, `db-flex--center` Grid: `db-grid--2`, `db-grid--3` Gap: `db-gap-1` through `db-gap-6` Margin: `db-mt-1` through `db-mt-6`, `db-mb-4`, `db-mb-5` ### 27. Theme Switcher — `.db-theme-switcher` ```html

``` ### 28. Utilities - `db-sr-only` — screen reader only - `db-text-muted`, `db-text-accent`, `db-text-error`, `db-text-success` - `db-border`, `db-border-b`, `db-divider` - `db-rounded-sm`, `db-rounded`, `db-rounded-md`, `db-rounded-lg`, `db-rounded-full` ## CSS Custom Properties Key variables (set on `:root`, themed via `[data-theme]`): - `--db-cream`, `--db-sand`, `--db-terracotta`, `--db-clay`, `--db-charcoal`, `--db-ink`, `--db-white` - `--db-font-heading` (Fraunces), `--db-font-body` (Source Serif 4), `--db-font-ui` (Cabin) - `--db-radius-1` through `--db-radius-4`, `--db-radius-full` - `--db-shadow-1` through `--db-shadow-3` - `--db-space-1` through `--db-space-6` - `--db-error`, `--db-success`, `--db-warning` ## Accessibility - All interactive components have ARIA attributes - Focus-visible outlines on all focusable elements - Modal includes focus trapping and Escape key close - Switch uses role="switch" with aria-checked - Tabs use arrow key navigation - Toast stack uses aria-live="polite" - `.db-sr-only` for screen reader text

Title

No items

Heading