### Daub Example UI Structure

Source: https://github.com/sliday/daub/blob/main/playground.html

Provides a concrete example of how to structure a UI using Daub components. It demonstrates setting the theme, defining the root layout, and composing various components like headers, stats, and content cards.

```openui-lang
__theme = "bone"
root = Stack([header, stats, content], "vertical", 4)
header = Stack([Text("Dashboard", "h1"), Button("Settings", "ghost")], "horizontal", 2, "between", "center")
stats = Grid([s1, s2], 2, 3)
s1 = StatCard("Revenue", "$12,345", "up", "+12%")
s2 = StatCard("Users", "1,234", "up", "+5%")
content = Card([], "Overview", "Dashboard content goes here")

```

--------------------------------

### Bash json-render and Daub Integration Setup

Source: https://github.com/sliday/daub/blob/main/llms.txt

Bash commands to install necessary packages for integrating json-render with React and Daub UI. It includes installing core json-render, its React wrappers, Zod for validation, and assumes Daub CSS/JS are handled separately.

```bash
npm install @json-render/core @json-render/react zod
# Plus DAUB CSS/JS via CDN or npm (daub-ui)
```

--------------------------------

### Toggle Component HTML Example

Source: https://github.com/sliday/daub/blob/main/llms.txt

Provides an example of a toggle button, demonstrating its basic structure and how to indicate an active state using ARIA attributes or a class.

```html
<button class="db-toggle" aria-pressed="false">Bold</button>
```

--------------------------------

### Install DAUB UI via npm

Source: https://github.com/sliday/daub/blob/main/SKILL.md

Install the DAUB UI package into your local project environment using the npm package manager.

```bash
npm install daub-ui
```

--------------------------------

### Standalone Input Component HTML Example

Source: https://github.com/sliday/daub/blob/main/llms.txt

Demonstrates a standalone input field with options for different sizes and an error state.

```html
<input class="db-input" type="text" placeholder="Standalone input">
```

--------------------------------

### Text Field Component HTML Example

Source: https://github.com/sliday/daub/blob/main/llms.txt

Provides an example of the text field component, including a label, input, and helper text. It also notes how to apply an error state.

```html
<div class="db-field">
  <label class="db-field__label">Email</label>
  <input class="db-field__input" type="email" placeholder="you@example.com">
  <span class="db-field__helper">We'll never share your email.</span>
</div>
```

--------------------------------

### Generate UI Spec (OpenUI Lang)

Source: https://github.com/sliday/daub/blob/main/README.md

This is an example of OpenUI Lang, a compact, token-efficient notation for UI specifications. It represents the same UI structure as the JSON example but uses a more concise syntax, suitable for LLM-generated output. Both positional and named arguments are supported.

```openui
__theme = "nord-light"
root = Stack([sidebar, main], "horizontal", 4)
sidebar = Sidebar([{title: "Settings", items: [{label: "Profile", icon: "user", active: true}]}])
main = Stack([profile, notifs], "vertical", 4)
profile = Card([Field("Full Name", "Jane Doe"), Field("Email", "jane@example.com", "email")], "Profile")
notifs = Card([Switch("Email notifications", true), Switch("Push notifications")], "Notifications")
```

--------------------------------

### Button Component HTML Examples

Source: https://github.com/sliday/daub/blob/main/llms.txt

Demonstrates various styles and states for the button component using HTML. Includes primary, secondary, ghost, icon, loading, and disabled states.

```html
<button class="db-btn db-btn--primary">Save</button>
<button class="db-btn db-btn--secondary db-btn--sm">Cancel</button>
<button class="db-btn db-btn--ghost">Ghost</button>
<button class="db-btn db-btn--icon db-btn--icon-danger" aria-label="Delete">×</button>
<button class="db-btn db-btn--primary db-btn--loading" disabled>Saving</button>
```

--------------------------------

### Keyboard Input Display HTML Example

Source: https://github.com/sliday/daub/blob/main/llms.txt

Represents keyboard input using the `kbd` tag, styled with the `.db-kbd` class. Supports small size modifier `db-kbd--sm`.

```html
<kbd class="db-kbd">Ctrl</kbd> + <kbd class="db-kbd">K</kbd>
```

--------------------------------

### Input Group Component HTML Examples

Source: https://github.com/sliday/daub/blob/main/llms.txt

Illustrates two common use cases for the input group component: with an addon and with a button.

```html
<div class="db-input-group">
  <span class="db-input-group__addon">https://</span>
  <input class="db-input" type="text" placeholder="example.com">
</div>
<div class="db-input-group">
  <input class="db-input" type="email" placeholder="Email">
  <button class="db-btn db-btn--primary">Subscribe</button>
</div>
```

--------------------------------

### Switch Component HTML Example

Source: https://github.com/sliday/daub/blob/main/llms.txt

Shows the HTML structure for a switch component, including track and thumb elements, along with ARIA attributes for accessibility.

```html
<div class="db-switch" role="switch" tabindex="0" aria-checked="false">
  <span class="db-switch__track"><span class="db-switch__thumb"></span></span>
  Label
</div>
```

--------------------------------

### Spinner HTML Example

Source: https://github.com/sliday/daub/blob/main/llms.txt

A loading spinner component styled with `.db-spinner`. Available in multiple sizes: `db-spinner--sm`, `db-spinner--lg`, `db-spinner--xl`.

```html
<span class="db-spinner"></span>
```

--------------------------------

### Native Select HTML Example

Source: https://github.com/sliday/daub/blob/main/llms.txt

A standard HTML select element styled with the `.db-select` class, including a label.

```html
<div class="db-select">
  <label class="db-label">Framework</label>
  <select class="db-select__input">
    <option value="">Choose...</option>
    <option>React</option>
    <option>Vue</option>
  </select>
</div>
```

--------------------------------

### Define UI with OpenUI-lang Syntax

Source: https://github.com/sliday/daub/blob/main/playground.html

An example of the OpenUI-lang syntax used for token-efficient UI generation, utilizing identifier assignments and component expressions.

```Text
root = Stack(direction="vertical", children=[
  header = Text("Welcome"),
  button = Button("Click Me")
])
```

--------------------------------

### Custom Select with Search HTML Example

Source: https://github.com/sliday/daub/blob/main/llms.txt

A custom select component with search/filter capabilities. JavaScript auto-initializes this component.

```html
<div class="db-custom-select">
  <button class="db-custom-select__trigger" type="button">
    <span class="db-custom-select__placeholder">Select...</span>
    <svg class="db-custom-select__icon" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>
  </button>
  <div class="db-custom-select__dropdown">
    <div class="db-custom-select__search"><input type="text" placeholder="Search..."></div>
    <div class="db-custom-select__option">Option A</div>
    <div class="db-custom-select__option">Option B</div>
  </div>
</div>
```

--------------------------------

### Adding Daub Agent Skill (Bash)

Source: https://github.com/sliday/daub/blob/main/README.md

A command-line instruction to install the Daub skill into an AI coding agent using the 'skills' package manager. This provides the agent with comprehensive knowledge of Daub components and APIs.

```bash
npx skills add sliday/daub
```

--------------------------------

### Structure a Card Component

Source: https://github.com/sliday/daub/blob/main/llms-compact.txt

Illustrates the basic structure of a card component using `.db-card`. It includes examples of modifiers like `.db-card--media` and how to integrate other components like buttons within the card.

```html
<div class="db-card">
  <div class="db-card__header"><h3 class="db-card__title">Title</h3></div>
  <div class="db-card__footer"><button class="db-btn db-btn--primary db-btn--sm">Action</button></div>
</div>
```

--------------------------------

### Toggle Group HTML Example

Source: https://github.com/sliday/daub/blob/main/llms.txt

Demonstrates a single-select toggle group. Add `data-multi` attribute for multi-select functionality.

```html
<div class="db-toggle-group">
  <button class="db-toggle" aria-pressed="true">Left</button>
  <button class="db-toggle" aria-pressed="false">Center</button>
  <button class="db-toggle" aria-pressed="false">Right</button>
</div>
```

--------------------------------

### Radio Component HTML Example

Source: https://github.com/sliday/daub/blob/main/llms.txt

Demonstrates the HTML structure for a radio button within a group, including the input and a visually styled circle.

```html
<div class="db-radio-group">
  <label class="db-radio">
    <input class="db-radio__input" type="radio" name="plan" value="free">
    <span class="db-radio__circle"></span>
    Free
  </label>
</div>
```

--------------------------------

### Add DAUB MCP Server (Bash)

Source: https://github.com/sliday/daub/blob/main/SKILL.md

Command to add the DAUB remote MCP server for UI generation and management. This is a one-time setup command.

```bash
claude mcp add daub --transport http https://daub.dev/api/mcp
```

--------------------------------

### Render UI Spec with MCP (Bash)

Source: https://github.com/sliday/daub/blob/main/SKILL.md

Command to get a playground preview URL for a DAUB UI specification using the 'render_spec' tool via the MCP server.

```bash
claude mcp invoke daub render_spec --spec <your_spec.json>
```

--------------------------------

### OTP Input HTML Example

Source: https://github.com/sliday/daub/blob/main/llms.txt

An input group for One-Time Password (OTP) entry, using the `.db-otp` class and individual `.db-otp__input` fields.

```html
<div class="db-otp">
  <input class="db-otp__input" type="text" inputmode="numeric">
  <input class="db-otp__input" type="text" inputmode="numeric">
  <input class="db-otp__input" type="text" inputmode="numeric">
  <span class="db-otp__separator">-</span>
  <input class="db-otp__input" type="text" inputmode="numeric">
  <input class="db-otp__input" type="text" inputmode="numeric">
  <input class="db-otp__input" type="text" inputmode="numeric">
</div>
```

--------------------------------

### MCP Server Setup and Tools

Source: https://github.com/sliday/daub/blob/main/README.md

The DAUB MCP server allows AI assistants to generate, validate, and render DAUB UI specs without API keys. It uses complexity-based model routing and offers several tools for UI development.

```APIDOC
## MCP Server

DAUB includes a remote [Model Context Protocol](https://modelcontextprotocol.io) (MCP) server that lets AI assistants generate, validate, and render DAUB UI specs directly — no API key required.

### Model Routing

The MCP server uses complexity-based model routing: each prompt is scored across 6 dimensions and routed to an appropriate model tier with automatic fallback chains and exponential backoff.

| Tier | Score | Primary | Fallbacks |
|------|-------|---------|-----------|
| SIMPLE | 0–15 | Gemini 3.1 Flash Lite | DeepSeek V3.2, Grok 4.1 Fast |
| MEDIUM | 16–35 | Gemini 3 Flash | MiniMax M2.5, Kimi K2.5 |
| COMPLEX | 36–60 | Gemini 3.1 Pro | Claude Haiku 4.5, GPT-5.4 |
| PREMIUM | 61–100 | Claude Sonnet 4.6 | Claude Opus 4.6, GPT-5.4 Pro |

### What is MCP?

MCP is an open protocol that lets AI assistants use external tools. Once you connect the DAUB MCP server, your AI can generate full UI layouts, validate specs, and preview results — all through natural conversation.

### Setup

Add to Claude Code:

```bash
claude mcp add daub --transport http https://daub.dev/api/mcp
```

For Cursor, Windsurf, or other MCP clients, add to your config:

```json
{
  "mcpServers": {
    "daub": {
      "type": "http",
      "url": "https://daub.dev/api/mcp"
    }
  }
}
```

### Tools

| Tool |
|------| 
| `generate_ui` | 
| `get_component_catalog` | 
| `validate_spec` | 
| `render_spec` | 
| `get_block_library` | 
| `parse_openui` | 

#### Tool Descriptions

- **`generate_ui`**: Generate a complete DAUB UI from a natural language prompt. Supports `format: "openui"` for 67% fewer tokens.
- **`get_component_catalog`**: Browse available components, props, themes, and spec format.
- **`validate_spec`**: Validate a DAUB spec JSON and get issue reports.
- **`render_spec`**: Get a playground preview URL for any spec.
- **`get_block_library`**: Browse pre-made layout blocks by category.
- **`parse_openui`**: Parse OpenUI Lang code into a DAUB JSON spec.
```

--------------------------------

### Generate UI Spec with MCP (Bash)

Source: https://github.com/sliday/daub/blob/main/SKILL.md

Example of using the 'generate_ui' tool via the MCP server to create a DAUB UI specification from a natural language prompt. This tool returns a JSON spec.

```bash
claude mcp invoke daub generate_ui --prompt "Admin dashboard with sidebar, stat cards, and data table. Dracula theme."
```

--------------------------------

### Basic Grid Layout with DAUB

Source: https://github.com/sliday/daub/blob/main/index.html

Demonstrates the DAUB grid system for creating responsive layouts. This example shows a 4-column grid that adjusts to 2 columns on tablets and 1 column on mobile devices.

```html
<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

--------------------------------

### Label HTML Example

Source: https://github.com/sliday/daub/blob/main/llms.txt

A basic label element styled with `.db-label`. Includes modifiers for required (`db-label--required`) and optional (`db-label--optional`) states.

```html
<label class="db-label db-label--required">Email</label>
```

--------------------------------

### Initiate Streaming Process

Source: https://github.com/sliday/daub/blob/main/playground.html

Starts the streaming process by creating an AbortController and calling the appropriate streaming function (e.g., streamDefault, streamOpenAI). It handles text chunks, completion signals, and errors, including logic for automatically continuing truncated responses.

```javascript
function startStream(msgs, model) {
  _abortCtrl = new AbortController();
  var signal = _abortCtrl.signal;
  var callStreamFn = function(m, onT, onD, onE) {
    if (useDefault) streamDefault(m, onT, onD, onE, model || fastModel(), signal);
    else streamFn(m, onT, onD, onE, signal);
  };
  callStreamFn(msgs, function onText(chunk) {
    accumulated += chunk;
    $json.value = accumulated;
    $json.scrollTop = $json.scrollHeight;
  }, function onDone() {
    // Auto-continue if response was truncated (finish_reason: "length")
    if (_lastFinishReason === 'length' && continuations < MAX_CONTINUATIONS) {
      continuations++;
      $status.textContent = 'Continuing (' + continuations + '/' + MAX_CONTINUATIONS + ')…';
      var contMsg = _detectedFormat === 'openui' ? 'Continue the openui-lang code from where you stopped. Output ONLY remaining statements, no repetition, no explanation.' : 'Con'
```

--------------------------------

### Basic HTML Structure for Prose Typography

Source: https://github.com/sliday/daub/blob/main/README.md

An example of how to apply the `.db-prose` class to an HTML element to enable considered typographic defaults for long-form content, including line height and max-width.

```html
<div class="db-prose">
  <h2>Title</h2>
  <p>Body text with comfortable 1.75 line-height and 65ch max-width.</p>
</div>
```

--------------------------------

### Include DAUB UI CSS and JS

Source: https://github.com/sliday/daub/blob/main/llms-compact.txt

This snippet shows how to quickly integrate the DAUB UI framework into your project by linking the main CSS and JavaScript files from a CDN. This is the most straightforward way to start using DAUB's styling and functionalities.

```html
<link rel="stylesheet" href="https://daub.dev/daub.css">
<script src="https://daub.dev/daub.js"></script>
```

--------------------------------

### Get Component Catalog with MCP (Bash)

Source: https://github.com/sliday/daub/blob/main/SKILL.md

Command to retrieve the catalog of available DAUB components, their properties, and valid themes using the 'get_component_catalog' tool via the MCP server. Useful before manual spec building.

```bash
claude mcp invoke daub get_component_catalog
```

--------------------------------

### Card Component HTML Example

Source: https://github.com/sliday/daub/blob/main/llms.txt

A basic card component with header, body, and footer. Supports a media variant (`db-card--media`) for edge-to-edge images and an interactive variant (`db-card--interactive`).

```html
<div class="db-card">
  <div class="db-card__header">
    <h3 class="db-card__title">Title</h3>
    <p class="db-card__desc">Description</p>
  </div>
  <div class="db-card__footer">
    <button class="db-btn db-btn--primary db-btn--sm">Action</button>
  </div>
</div>

<!-- Media card (edge-to-edge image) -->
<div class="db-card db-card--media">
  <div class="db-card__media"><img src="photo.jpg" alt=""></div>
  <div class="db-card__body">
    <h3 class="db-card__title">Title</h3>
    <p class="db-card__desc">Description</p>
  </div>
  <div class="db-card__footer">
    <button class="db-btn db-btn--primary db-btn--sm">Action</button>
  </div>
</div>
```

--------------------------------

### Search Input Component in HTML

Source: https://github.com/sliday/daub/blob/main/llms.txt

Provides an example of a search input component using Daub's search classes. It includes a search icon, an input field, and a clear button that appears when the input has text.

```html
<div class="db-search">
  <svg class="db-search__icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
  <input class="db-input" type="search" placeholder="Search...">
  <button class="db-search__clear" aria-label="Clear">×</button>
</div>
```

--------------------------------

### Bottom Navigation Bar in HTML

Source: https://github.com/sliday/daub/blob/main/llms.txt

Demonstrates the structure of a fixed bottom navigation bar for mobile devices using Daub's bottom navigation classes. It includes examples for active items and badges, and notes its responsiveness to desktop via `db-bottom-nav--always`.

```html
<nav class="db-bottom-nav db-bottom-nav--always">
  <a class="db-bottom-nav__item db-bottom-nav__item--active" href="#">
    <svg>...</svg>
    <span>Home</span>
  </a>
  <a class="db-bottom-nav__item" href="#">
    <svg>...</svg>
    <span>Search</span>
    <span class="db-bottom-nav__badge">3</span>
  </a>
  <a class="db-bottom-nav__item" href="#">
    <svg>...</svg>
    <span>Profile</span>
  </a>
</nav>
```

--------------------------------

### MCP Server Section Styling (CSS)

Source: https://github.com/sliday/daub/blob/main/index.html

Styles for the MCP Server section, covering headings, descriptions, installation commands, tools, and examples. It includes responsive adjustments for smaller screens.

```css
/* MCP Server section */
.db-mcp-section {
  max-width: 960px;
  margin: 0 auto 64px;
  padding: 0 24px;
  text-align: center;
}

.db-mcp-section__heading {
  font-family: var(--db-font-heading);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--db-ink);
  margin: 12px 0 12px;
}

.db-mcp-section__desc {
  font-family: var(--db-font-body);
  font-size: 1.0625rem;
  color: var(--db-warm-gray);
  max-width: 600px;
  margin: 0 auto 32px;
  line-height: 1.6;
}

.db-mcp-install {
  max-width: 640px;
  margin: 0 auto 32px;
  text-align: left;
}

.db-mcp-install__label {
  font-family: var(--db-font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--db-warm-gray);
  margin-bottom: 8px;
}

.db-mcp-install__cmd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--db-charcoal, #2D2A26);
  border-radius: 8px;
  font-family: var(--db-font-mono, 'SF Mono', 'Fira Code', monospace);
  font-size: 0.8125rem;
  color: var(--db-cream, #FAF8F0);
  overflow-x: auto;
}

.db-mcp-install__cmd code {
  flex: 1;
  white-space: nowrap;
}

.db-mcp-install__cmd .db-hero__copy {
  flex-shrink: 0;
  color: var(--db-cream, #FAF8F0);
  opacity: 0.6;
}

.db-mcp-install__cmd .db-hero__copy:hover {
  opacity: 1;
}

.db-mcp-tools {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 640px;
  margin: 0 auto 32px;
  text-align: left;
}

.db-mcp-tool {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: var(--db-color-surface, var(--db-white, #fff));
  border: 1px solid var(--db-color-border, var(--db-sand));
  border-radius: 8px;
}

.db-mcp-tool__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--db-sand, #EDE8D0);
  border-radius: 8px;
  color: var(--db-terracotta);
}

.db-mcp-tool__name {
  font-family: var(--db-font-mono, monospace);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--db-ink);
  margin-bottom: 4px;
}

.db-mcp-tool__desc {
  font-size: 0.8125rem;
  color: var(--db-warm-gray);
  line-height: 1.5;
}

.db-mcp-example {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
}

.db-mcp-example__label {
  font-family: var(--db-font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--db-warm-gray);
  margin-bottom: 12px;
}

.db-mcp-example__flow {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.db-mcp-example__step {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.875rem;
  line-height: 1.6;
}

.db-mcp-example__step--user {
  background: var(--db-color-surface, var(--db-sand));
  color: var(--db-ink);
  margin-right: 48px;
}

.db-mcp-example__step--ai {
  background: var(--db-charcoal, #2D2A26);
  color: var(--db-cream, #FAF8F0);
  margin-left: 48px;
}

.db-mcp-example__role {
  display: block;
  font-family: var(--db-font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  opacity: 0.6;
}

@media (max-width: 720px) {
  .db-mcp-tools {
    grid-template-columns: 1fr;
  }
  .db-mcp-example__step--user {
    margin-right: 16px;
  }
  .db-mcp-example__step--ai {
    margin-left: 16px;
  }
}
```

--------------------------------

### Implement a Responsive Grid Layout

Source: https://github.com/sliday/daub/blob/main/llms-compact.txt

Shows how to create a responsive grid layout using `.db-grid` with column count modifiers (e.g., `.db-grid--3`). The grid adapts to different screen sizes, collapsing on smaller devices.

```html
<div class="db-grid db-grid--3">
  <div class="db-card">...</div>
  <div class="db-card">...</div>
  <div class="db-card">...</div>
</div>
```

--------------------------------

### Initialize DAUB UI Components

Source: https://github.com/sliday/daub/blob/main/llms-compact.txt

Explains how to initialize DAUB UI components. `DAUB.init()` can be called automatically on page load or manually after dynamic HTML content is added, optionally targeting a specific parent element.

```javascript
DAUB.init(); // Auto on page load
DAUB.init(parentElement); // After dynamic HTML
```

--------------------------------

### Initialize Pipeline UI Steps

Source: https://github.com/sliday/daub/blob/main/playground.html

Creates a visual progress tracker for the UI generation pipeline using static SVG icons and DOM elements. The helper function _mkStep constructs individual progress steps for tasks like analysis, planning, and testing.

```javascript
function _mkStep(iconHtml, label) {
  var s = document.createElement('div');
  s.className = 'pg-pipeline__step';
  var ico = document.createElement('span');
  ico.className = 'pg-pipeline__icon';
  ico.innerHTML = iconHtml;
  var lbl = document.createElement('span');
  lbl.className = 'pg-pipeline__label';
  lbl.textContent = label;
  var stats = document.createElement('span');
  stats.className = 'pg-pipeline__stats';
  s.appendChild(ico);
  s.appendChild(lbl);
  s.appendChild(stats);
  s._stats = stats;
  s._startTime = Date.now();
  pipeDetails.appendChild(s);
  return s;
}
```

--------------------------------

### Implement a Switch Control

Source: https://github.com/sliday/daub/blob/main/llms-compact.txt

Illustrates the HTML structure for a switch control using `.db-switch`. It includes accessibility attributes for better usability and semantic understanding.

```html
<div class="db-switch" role="switch" tabindex="0" aria-checked="false">
  <span class="db-switch__track"><span class="db-switch__thumb"></span></span>
  Dark mode
</div>
```

--------------------------------

### DAUB CSS Bar Chart

Source: https://github.com/sliday/daub/blob/main/index.html

Demonstrates a CSS-only bar chart component provided by DAUB. This example shows bars for days of the week.

```html
<div>
  <span>Mon</span>
  <span>Tue</span>
  <span>Wed</span>
  <span>Thu</span>
  <span>Fri</span>
  <span>Sat</span>
  <span>Sun</span>
</div>
```

--------------------------------

### DAUB Calendar Component

Source: https://github.com/sliday/daub/blob/main/index.html

Illustrates the DAUB calendar component, a visual representation of a month with selectable dates. This example shows March 2026.

```html
<div>
  <h2>March 2026</h2>
  <table>
    <thead>
      <tr>
        <th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th><th>Su</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>1</td>
      </tr>
      <tr>
        <td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td>
      </tr>
      <tr>
        <td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
      </tr>
      <tr>
        <td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td>
      </tr>
      <tr>
        <td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td>
      </tr>
      <tr>
        <td>30</td><td>31</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
      </tr>
    </tbody>
  </table>
</div>
```

--------------------------------

### Standalone Textarea Component HTML Example

Source: https://github.com/sliday/daub/blob/main/llms.txt

Shows a basic standalone textarea element, noting the availability of an error state modifier.

```html
<textarea class="db-textarea" placeholder="Write here..."></textarea>
```

--------------------------------

### Initialize Theme and Scheme from Local Storage (JavaScript)

Source: https://github.com/sliday/daub/blob/main/roadmap.html

This JavaScript code snippet initializes the theme, scheme, and accent color of the application by retrieving them from the browser's local storage. It applies these settings to the document's root element and styles. It includes error handling for cases where local storage might not be available or accessible.

```javascript
(function(){
try{
var t=localStorage.getItem('db-theme');
if(t)
document.documentElement.setAttribute('data-theme',t);
var s=localStorage.getItem('db-scheme');
if(s)
document.documentElement.setAttribute('data-scheme',s);
var a=localStorage.getItem('db-accent');
if(a)
document.documentElement.style.setProperty('--db-terracotta',a)
}catch(e){}
})();
```

--------------------------------

### Create a Chip Element

Source: https://github.com/sliday/daub/blob/main/llms-compact.txt

Demonstrates the creation of a chip element with `.db-chip`, suitable for tags or labels. It mentions customization options via CSS variables and presets, as well as toggle functionality.

```html
<span class="db-chip db-chip--blue">Tag</span>
```

--------------------------------

### Create Pinterest-style Image Card Grid with Daub

Source: https://github.com/sliday/daub/blob/main/llms.txt

This snippet demonstrates how to structure a responsive layout using the Daub framework. It includes a navigation bar, a category chip filter, and a grid of media cards.

```html
<!DOCTYPE html>
<html data-theme="light">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Explore</title>
  <link rel="stylesheet" href="https://daub.dev/daub.css">
</head>
<body>
  <nav class="db-navbar">
    <a class="db-navbar__brand" href="/">Pinboard</a>
    <div class="db-navbar__nav">
      <div class="db-nav-menu">
        <a class="db-nav-menu__item db-nav-menu__item--active" href="/">Home</a>
        <a class="db-nav-menu__item" href="/explore">Explore</a>
      </div>
    </div>
    <div class="db-navbar__spacer"></div>
    <div class="db-navbar__actions">
      <div class="db-search db-hide-mobile">
        <svg class="db-search__icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
        <input class="db-input" type="search" placeholder="Search pins...">
        <button class="db-search__clear" aria-label="Clear">×</button>
      </div>
      <div class="db-avatar db-avatar--sm"><img src="user.jpg" alt=""></div>
    </div>
    <button class="db-navbar__toggle" aria-label="Menu">☰</button>
  </nav>

  <main class="db-container db-container--wide" style="padding-top:var(--db-space-6);">
    <div data-db-chip-toggle class="db-flex db-flex--wrap db-gap-2 db-mb-5">
      <span class="db-chip db-chip--blue db-chip--active">All</span>
      <span class="db-chip db-chip--green">Nature</span>
      <span class="db-chip db-chip--amber">Food</span>
      <span class="db-chip db-chip--purple">Art</span>
      <span class="db-chip db-chip--pink">Travel</span>
    </div>

    <div class="db-grid db-grid--4 db-gap-4">
      <div class="db-card db-card--media">
        <div class="db-card__media"><img src="photo1.jpg" alt=""></div>
        <div class="db-card__body">
          <h3 class="db-card__title">Mountain Sunrise</h3>
          <p class="db-card__desc">Beautiful morning light over the peaks.</p>
        </div>
        <div class="db-card__footer">
          <div class="db-avatar-group">
            <div class="db-avatar db-avatar--sm"><img src="u1.jpg" alt=""></div>
            <div class="db-avatar db-avatar--sm"><img src="u2.jpg" alt=""></div>
            <span class="db-avatar-group__overflow">+3</span>
          </div>
        </div>
      </div>
    </div>
  </main>

  <script src="https://daub.dev/daub.js"></script>
</body>
</html>
```

--------------------------------

### Button Group Component HTML Example

Source: https://github.com/sliday/daub/blob/main/llms.txt

Shows the HTML structure for a button group, which visually clusters related buttons together.

```html
<div class="db-btn-group">
  <button class="db-btn db-btn--secondary">Copy</button>
  <button class="db-btn db-btn--secondary">Cut</button>
  <button class="db-btn db-btn--secondary">Paste</button>
</div>
```

--------------------------------

### DAUB Drawer Component

Source: https://github.com/sliday/daub/blob/main/index.html

Shows the DAUB drawer component, a mobile-friendly bottom drawer for actions, forms, or navigation. This example includes 'Done' and 'Cancel' actions.

```html
<div>
  <button>Done</button>
  <button>Cancel</button>
</div>
```

--------------------------------

### DAUB Popover Component

Source: https://github.com/sliday/daub/blob/main/index.html

Demonstrates the DAUB popover component, which displays contextual information or actions near a target element. This example shows a popover with settings.

```html
<div>
  <span>Settings</span>
  <div>
    <label>Display name</label>
    <input type="text">
    <button>Save</button>
  </div>
</div>
```

--------------------------------

### Initialize Lucide Icons and Block Management JavaScript

Source: https://github.com/sliday/daub/blob/main/demo.html

This JavaScript code initializes Lucide icons and sets up functionality for managing UI blocks. It defines categories, tab labels, and rendering logic for tabs and a block gallery. It also includes functionality to filter blocks by category and open them in a playground environment.

```javascript
lucide.createIcons();
(function () {
  var VERTICALS = {
    all: null,
    saas: ['dashboard', 'app-specific', 'data-display', 'stats', 'integrations'],
    marketing: ['hero', 'features', 'cta', 'social-proof', 'how-it-works', 'landing', 'logo-bar', 'newsletter', 'banners'],
    commerce: ['ecommerce', 'pricing', 'comparison'],
    content: ['blog', 'content', 'media', 'portfolio', 'faq', 'timeline'],
    corporate: ['team', 'contact', 'event-schedule', 'footer'],
    essentials: ['auth', 'forms', 'navigation', 'modals-overlays', 'error-pages', 'mobile'],
    misc: ['misc']
  };
  var TAB_LABELS = {
    all: 'All Blocks',
    saas: 'SaaS & Apps',
    marketing: 'Marketing',
    commerce: 'E-Commerce',
    content: 'Content',
    corporate: 'Corporate',
    essentials: 'Essentials',
    misc: 'Misc'
  };
  var TAB_ORDER = ['all', 'saas', 'marketing', 'commerce', 'content', 'corporate', 'essentials', 'misc'];
  var tabBar = document.getElementById('block-tabs');
  var gallery = document.getElementById('block-gallery');
  var grid = document.getElementById('block-gallery-grid');
  var demos = document.getElementById('demo-layouts');
  var allBlocks = [];
  var activeTab = 'all';

  function clearChildren(el) {
    while (el.firstChild) el.removeChild(el.firstChild);
  }

  function filterBlocks(tabId) {
    var cats = VERTICALS[tabId];
    if (!cats) return allBlocks;
    return allBlocks.filter(function (b) {
      return cats.indexOf(b.category) !== -1;
    });
  }

  function renderTabs() {
    TAB_ORDER.forEach(function (id) {
      var btn = document.createElement('button');
      btn.className = 'block-tabs__tab' + (id === activeTab ? ' block-tabs__tab--active' : '');
      btn.setAttribute('role', 'tab');
      btn.setAttribute('aria-selected', id === activeTab ? 'true' : 'false');
      btn.dataset.tab = id;
      var count = filterBlocks(id).length;
      if (id === 'misc') count += 6;
      btn.textContent = TAB_LABELS[id];
      var span = document.createElement('span');
      span.className = 'block-tabs__count';
      span.textContent = count;
      btn.appendChild(span);
      tabBar.appendChild(btn);
    });
  }

  function renderGallery(blocks) {
    clearChildren(grid);
    if (blocks.length === 0) {
      var empty = document.createElement('div');
      empty.className = 'block-gallery__empty';
      empty.textContent = 'No blocks in this category.';
      grid.appendChild(empty);
      return;
    }
    blocks.forEach(function (block) {
      var card = document.createElement('div');
      card.className = 'block-card';
      card.title = block.name + ' — click to open in Playground';
      var img = document.createElement('img');
      img.className = 'block-card__img';
      img.alt = block.name;
      img.loading = 'lazy';
      img.src = 'blocks/' + block.screenshot;
      var info = document.createElement('div');
      info.className = 'block-card__info';
      var name = document.createElement('span');
      name.className = 'block-card__name';
      name.textContent = block.name;
      var badge = document.createElement('span');
      badge.className = 'block-card__badge';
      badge.textContent = block.category;
      var elCount = document.createElement('span');
      elCount.className = 'block-card__count';
      elCount.textContent = block.element_count + ' el';
      info.appendChild(name);
      info.appendChild(badge);
      info.appendChild(elCount);
      card.appendChild(img);
      card.appendChild(info);
      grid.appendChild(card);
      card.addEventListener('click', function () {
        openInPlayground(block);
      });
    });
  }

  function openInPlayground(block) {
    fetch('blocks/' + block.file)
      .then(function (r) {
        return r.json();
      })
      .then(function (spec) {
        var json = JSON.stringify(spec);
        var compressed = LZString.compressToEncodedURIComponent(json);
        window.open('playground.html?s=' + compressed, '_blank');
      });
  }

  function switchTab(tabId) {
    activeTab = tabId;
    tabBar.querySelectorAll('.block-tabs__tab').forEach(function (btn) {
      var isActive = btn.dataset.tab === tabId;
      btn.className = 'block-tabs__tab' + (isActive ? ' block-tabs__tab--active' : '');
      btn.setAttribute('aria-selected', isActive ? 'true' : 'false');
    });
    renderGallery(filterBlocks(tabId));
  }

  fetch('blocks.json')
    .then(function (r) {
      return r.json();
    })
    .then(function (data) {
      allBlocks = data;
      renderTabs();
      renderGallery(filterBlocks(activeTab));
      tabBar.addEventListener('click', function (e) {
        if (e.target.classList.contains('block-tabs__tab')) {
          switchTab(e.target.dataset.tab);
        }
      });
    });
})();
```

--------------------------------

### DAUB Dropdown Menu

Source: https://github.com/sliday/daub/blob/main/index.html

Illustrates the DAUB dropdown menu component, which provides a list of options or actions that appear when triggered. This example shows options and actions.

```html
<div>
  <span>Options</span>
  <ul>
    <li>Actions</li>
    <li>Duplicate</li>
    <li>Rename</li>
    <li>Delete</li>
  </ul>
</div>
```

--------------------------------

### DAUB Collapsible Component

Source: https://github.com/sliday/daub/blob/main/index.html

Shows the DAUB collapsible component, used for progressive disclosure of content. This example displays advanced configuration options that are hidden by default.

```html
<div>
  <span>Show advanced options</span>
</div>
<div>
  These are the advanced configuration options that are hidden by default. Use the collapsible component for progressive disclosure.
</div>
```

--------------------------------

### Display a Badge

Source: https://github.com/sliday/daub/blob/main/llms-compact.txt

Illustrates how to create a badge element using the `.db-badge` class. It highlights semantic modifiers like `.db-badge--new` and color variations for different states or categories.

```html
<span class="db-badge db-badge--new">New</span>
```

--------------------------------

### Initialize Theme Persistence with JavaScript

Source: https://github.com/sliday/daub/blob/main/demo.html

This script retrieves user-selected theme, color scheme, and accent color preferences from localStorage and applies them to the document root. It ensures that user UI preferences persist across page reloads.

```javascript
(function(){try{var t=localStorage.getItem('db-theme');if(t)document.documentElement.setAttribute('data-theme',t);var s=localStorage.getItem('db-scheme');if(s)document.documentElement.setAttribute('data-scheme',s);var a=localStorage.getItem('db-accent');if(a)document.documentElement.style.setProperty('--db-terracotta',a)}catch(e){}})();
```

--------------------------------

### Slider Component HTML Example

Source: https://github.com/sliday/daub/blob/main/llms.txt

Illustrates the HTML structure for a slider component, including a label, value display, and the range input element.

```html
<div class="db-slider">
  <div class="db-slider__label"><span>Volume</span><span class="db-slider__value">50</span></div>
  <input class="db-slider__input" type="range" min="0" max="100" value="50">
</div>
```

--------------------------------

### Implement Responsive Media Queries

Source: https://github.com/sliday/daub/blob/main/roadmap.html

This snippet provides responsive adjustments for smaller screens, ensuring that grid layouts and component alignments adapt correctly when the viewport width is 640px or less.

```css
@media (max-width: 640px) {
  .rm-layer { grid-template-columns: 1fr; margin-left: 36px; padding: 16px; }
  .rm-version { grid-template-columns: 1fr; }
  .rm-version__tag { text-align: left; }
}
```

--------------------------------

### DAUB Alert Dialog

Source: https://github.com/sliday/daub/blob/main/index.html

Illustrates the DAUB alert dialog component, used for displaying important messages or confirmations to the user. This example shows a confirmation dialog for deletion.

```html
<div>
  <h3>Are you sure?</h3>
  <p>This action cannot be undone. This will permanently delete the selected item from your account.</p>
  <button>Cancel</button>
  <button>Continue</button>
</div>
```

--------------------------------

### Grid Layout System

Source: https://github.com/sliday/daub/blob/main/llms.txt

A responsive grid system for equal-width columns. Automatically collapses columns based on screen size (mobile/tablet/desktop).

```html
<div class="db-container db-container--wide">
  <div class="db-grid db-grid--4 db-gap-4">
    <div>Col 1</div><div>Col 2</div><div>Col 3</div><div>Col 4</div>
  </div>
</div>
```

--------------------------------

### DAUB Tooltip Component

Source: https://github.com/sliday/daub/blob/main/index.html

Shows the DAUB tooltip component, which provides brief, contextual information when a user hovers over an element. This example has a simple tooltip triggered by hover.

```html
<span>Hover me</span>
<div>This is a tooltip</div>
```

--------------------------------

### Checkbox Component HTML Example

Source: https://github.com/sliday/daub/blob/main/llms.txt

Presents the HTML structure for a checkbox, including the input and a visually styled box with an SVG icon for the checked state.

```html
<label class="db-checkbox">
  <input class="db-checkbox__input" type="checkbox">
  <span class="db-checkbox__box"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>
  Accept terms
</label>
```

--------------------------------

### DAUB Data Table

Source: https://github.com/sliday/daub/blob/main/index.html

Illustrates the DAUB data table component, used for displaying structured data in rows and columns. This example includes columns for Component, Category, and Tier.

```html
<table>
  <thead>
    <tr>
      <th>Component</th>
      <th>Category</th>
      <th>Tier</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Accordion</td>
      <td>Interactive</td>
      <td>Tier 2</td>
    </tr>
    <tr>
      <td>Calendar</td>
      <td>Complex</td>
      <td>Tier 3</td>
    </tr>
    <tr>
      <td>Carousel</td>
      <td>Complex</td>
      <td>Tier 3</td>
    </tr>
    <tr>
      <td>Command</td>
      <td>Complex</td>
      <td>Tier 3</td>
    </tr>
    <tr>
      <td>Separator</td>
      <td>CSS-only</td>
      <td>Tier 1</td>
    </tr>
  </tbody>
</table>
```