UI / Component library

Small parts. One system.

DaisyUI controls, Small Council tokens, and inspectable HTML in both themes.

Examples use fictional data. Interactions only affect this page. Use the theme toggle to compare light and dark.

Buttons

Use one primary action per task region. Keep a stable accessible name while loading. Compact controls keep a 44 px minimum target; the shared border and focus rules take precedence over DaisyUI modifiers.

View HTML

<div class="flex flex-wrap gap-3">
  <button class="btn btn-primary" data-dialog-open="component-dialog">Start council</button>
  <button class="btn btn-outline" data-dialog-open="component-dialog">View advisors</button>
  <button class="btn btn-error" data-dialog-open="remove-dialog">Remove memory</button>
  <button class="btn btn-sm" data-dialog-open="component-dialog">Compact action</button>
  <button class="btn" disabled>Unavailable</button>
  <button class="btn btn-primary" disabled aria-busy="true">
    <span class="loading loading-spinner loading-xs" aria-hidden="true"></span>
    Starting…
  </button>
</div>

Forms

Persistent labels, linked help/errors, and native constraints. Submissions only update the specimen.

Advisor handle

Use a single handle without spaces.

View HTML

<form data-demo-form class="grid gap-5 sm:grid-cols-2">
  <div>
    <label class="sc-label" for="council-name">Council name</label>
    <input class="input w-full" id="council-name" name="name" required value="Product perspectives" aria-describedby="council-help">
    <p id="council-help" class="sc-help">A name you can recognize later.</p>
  </div>
  <div>
    <label class="sc-label" for="mode">Rules of engagement</label>
    <select id="mode" class="select w-full">
      <option>Open</option>
      <option>Consensus</option>
      <option>Brainstorming</option>
    </select>
  </div>
  <div class="sm:col-span-2">
    <label class="sc-label" for="question">Question</label>
    <textarea id="question" class="textarea w-full" required rows="3">What should we learn before starting a pilot?</textarea>
  </div>
  <label class="flex items-center gap-3">
    <input type="checkbox" class="checkbox">
    Include a memory attachment
  </label>
  <div>
    <button class="btn btn-primary">Save example</button>
  </div>
  <p role="status" class="sc-help sm:col-span-2"></p>
</form>
<div class="mt-6">
  <label for="invalid-name" class="sc-label">Advisor handle</label>
  <input id="invalid-name" class="input input-error" value="two words" aria-invalid="true" aria-describedby="handle-error">
  <p class="mt-2 text-danger" id="handle-error">Use a single handle without spaces.</p>
</div>

Badge

Status always has a text label. Color reinforces meaning.

AI advisorOpenCompletedPartial responseResponse failedArchived

View HTML

<div class="flex flex-wrap gap-3">
  <span class="badge badge-primary">AI advisor</span>
  <span class="badge badge-secondary">Open</span>
  <span class="badge badge-success">Completed</span>
  <span class="badge badge-warning">Partial response</span>
  <span class="badge badge-error">Response failed</span>
  <span class="badge badge-outline">Archived</span>
</div>

Alerts

Preserve work and explain the next step. Static examples do not interrupt screen readers on load.

This example uses fictional data.

One advisor has not responded. Review the completed responses.

This memory wasn’t saved. Your text is still here.

Example saved in this page.

View HTML

<p id="alerts-heading" tabindex="-1" class="sr-only">Alert examples</p>
<div class="space-y-4">
  <div class="alert alert-info">This example uses fictional data.</div>
  <div class="alert alert-warning">One advisor has not responded. Review the completed responses.</div>
  <div class="alert alert-error">This memory wasn’t saved. Your text is still here.</div>
  <div class="alert alert-success" data-dismissible>
    <span>Example saved in this page.</span>
    <button class="btn btn-ghost" data-dismiss aria-label="Dismiss example notice">Close</button>
  </div>
</div>

Card

Show expertise and AI identity explicitly. Keep actions separate from the card surface.

Strategist

AI advisor · Planning and tradeoffs

Looks for the smallest useful experiment and the conditions that would change the plan.

View HTML

<article class="card bg-base-100 max-w-md">
  <div class="card-body">
    <div class="flex items-center gap-4">
      <span class="sc-avatar" aria-hidden="true">S</span>
      <div>
        <h3 class="card-title">Strategist</h3>
        <p class="text-sm text-muted">AI advisor · Planning and tradeoffs</p>
      </div>
    </div>
    <p class="mt-3">Looks for the smallest useful experiment and the conditions that would change the plan.</p>
    <div class="card-actions mt-4">
      <button class="btn btn-primary" data-dialog-open="component-dialog">View advisor</button>
    </div>
  </div>
</article>

Tables

Use captions, scoped headers, and a scrolling frame for narrow screens.

Illustrative conversation history
Conversation	Mode	Status
Pilot planning	Open	Active
Compare approaches	Brainstorming	Completed
Earlier research	Consensus	Archived

View HTML

<div class="overflow-x-auto">
  <table class="table">
    <caption class="mb-4 text-left font-bold">Illustrative conversation history</caption>
    <thead>
      <tr>
        <th scope="col">Conversation</th>
        <th scope="col">Mode</th>
        <th scope="col">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Pilot planning</td>
        <td>Open</td>
        <td>Active</td>
      </tr>
      <tr>
        <td>Compare approaches</td>
        <td>Brainstorming</td>
        <td>Completed</td>
      </tr>
      <tr>
        <td>Earlier research</td>
        <td>Consensus</td>
        <td>Archived</td>
      </tr>
    </tbody>
  </table>
</div>

Accordion

Use native details/summary for optional supporting information.

What is a council?

A group of AI advisors you can bring together around a question.

Does agreement prove correctness?

No. Review evidence and use your own judgment.

View HTML

<details name="faq-demo">
  <summary>What is a council?</summary>
  <p class="mt-3">A group of AI advisors you can bring together around a question.</p>
</details>
<details name="faq-demo">
  <summary>Does agreement prove correctness?</summary>
  <p class="mt-3">No. Review evidence and use your own judgment.</p>
</details>

Native dialogs provide focus containment and Escape. Restore focus to the invoking control.

View HTML

<button class="btn btn-outline" data-dialog-open="component-dialog">Open advisor dialog</button>
<dialog id="component-dialog" class="sc-dialog" aria-labelledby="component-dialog-title">
  <h3 id="component-dialog-title" class="text-xl font-bold">Strategist · AI advisor</h3>
  <p class="my-5">A fictional advisor for exploring product decisions. This guide does not create advisors in the app.</p>
  <button class="btn btn-primary" data-dialog-close autofocus>Close example</button>
</dialog>
<dialog id="remove-dialog" class="sc-dialog" aria-labelledby="remove-title">
  <h3 id="remove-title" class="text-xl font-bold">Remove “Pilot notes”?</h3>
  <p class="my-5">In the application, explain the exact effect on saved memory. This specimen does not delete any data.</p>
  <div class="flex flex-wrap gap-3">
    <button class="btn btn-outline" data-dialog-close autofocus>Cancel</button>
    <button class="btn btn-error" data-dialog-close>Confirm example</button>
  </div>
</dialog>

Name the current object and maintain space context.

View HTML

<nav class="breadcrumbs text-sm" aria-label="Example breadcrumb">
  <ul>
    <li>
      <a href="workspace.html">Product space</a>
    </li>
    <li>
      <a href="workspace.html#councils-and-advisors">Councils</a>
    </li>
    <li aria-current="page">Pilot planning</li>
  </ul>
</nav>

Button group

Use pressed state for single-choice view controls. This demonstration selects a view label only.

View HTML

<div class="join" role="group" aria-label="Example view" data-toggle-group>
  <button class="btn join-item" aria-pressed="true">All</button>
  <button class="btn join-item" aria-pressed="false">Active</button>
  <button class="btn join-item" aria-pressed="false">Archived</button>
</div>

Carousel

Manual controls only; do not hide essential instructions in a carousel.

1. Ask a clear question

Name the decision you are trying to make.

Step 1 of 3

View HTML

<div data-carousel>
  <div data-slide>
    <h3 class="text-xl font-bold">1. Ask a clear question</h3>
    <p class="mt-3">Name the decision you are trying to make.</p>
  </div>
  <div data-slide hidden>
    <h3 class="text-xl font-bold">2. Invite different perspectives</h3>
    <p class="mt-3">Choose AI advisors with distinct roles.</p>
  </div>
  <div data-slide hidden>
    <h3 class="text-xl font-bold">3. Review the reasoning</h3>
    <p class="mt-3">Consider disagreement and decide for yourself.</p>
  </div>
  <div class="mt-5 flex flex-wrap items-center gap-3">
    <button class="btn btn-outline" data-slide-prev>Previous</button>
    <p data-slide-status aria-live="polite">Step 1 of 3</p>
    <button class="btn btn-outline" data-slide-next>Next</button>
  </div>
</div>

Close button

A close action needs an accessible name and a usable touch target.

44 px target. Opens a dismissible dialog for this specimen.

View HTML

<div class="flex items-center gap-4">
  <button class="sc-close" aria-label="Open and close dialog example" data-dialog-open="component-dialog"></button>
  <p class="text-sm text-muted">44 px target. Opens a dismissible dialog for this specimen.</p>
</div>

Collapse

Use native disclosure for details that can safely start hidden.

Show model interaction

State: Completed example
Model: Illustrative model
Tool results: No tools used in this example.

View HTML

<details>
  <summary>Show model interaction</summary>
  <dl class="mt-4 grid gap-2">
    <dt class="font-bold">State</dt>
    <dd>Completed example</dd>
    <dt class="font-bold">Model</dt>
    <dd>Illustrative model</dd>
    <dt class="font-bold">Tool results</dt>
    <dd>No tools used in this example.</dd>
  </dl>
</details>

Dropdowns

Use a disclosure with normal keyboard focus for a short list of links.

View HTML

<details class="dropdown">
  <summary class="btn btn-outline">Explore this guide</summary>
  <ul class="menu dropdown-content z-10 w-60 rounded-box border border-control bg-surface p-2">
    <li>
      <a href="guide.html">Brand guidelines</a>
    </li>
    <li>
      <a href="ui.html">Integration</a>
    </li>
    <li>
      <a href="workspace.html">Workspace patterns</a>
    </li>
  </ul>
</details>

List group

Use ordinary links for navigation and communicate the current item.

View HTML

<ul class="menu w-full max-w-sm rounded-box border border-line bg-base-100">
  <li>
    <a href="workspace.html#conversation" aria-current="page">
      Pilot planning
      <span class="badge">Open</span>
    </a>
  </li>
  <li>
    <a href="workspace.html#memory">
      Research notes
      <span class="badge badge-outline">Memory</span>
    </a>
  </li>
</ul>

Allow navigation to wrap; use a drawer when the app needs a compact layout.

View HTML

<nav class="navbar flex-wrap gap-3 rounded-box border border-line bg-base-100" aria-label="Example app navigation">
  <a class="font-bold" href="workspace.html">Small Council</a>
  <div class="flex flex-wrap gap-2 sm:ml-auto">
    <a class="btn btn-ghost" href="workspace.html#councils-and-advisors">Councils</a>
    <a class="btn btn-ghost" href="workspace.html#memory">Memory</a>
    <a class="btn btn-ghost" href="workspace.html#settings">Settings</a>
  </div>
</nav>

Navs and tabs

Tabs support arrow, Home and End keys. Each panel has a named tab.

Strategist is an illustrative AI advisor focused on tradeoffs.

View HTML

<div data-tabs>
  <div role="tablist" aria-label="Advisor details" class="tabs">
    <button class="sc-tab" role="tab" id="tab-profile" aria-controls="panel-profile" aria-selected="true">Profile</button>
    <button class="sc-tab" role="tab" id="tab-context" aria-controls="panel-context" aria-selected="false" tabindex="-1">Context</button>
  </div>
  <div id="panel-profile" role="tabpanel" aria-labelledby="tab-profile" tabindex="0" class="mt-5">Strategist is an illustrative AI advisor focused on tradeoffs.</div>
  <div id="panel-context" role="tabpanel" aria-labelledby="tab-context" tabindex="0" class="mt-5" hidden>Context attachments should be visible and reviewable.</div>
</div>

Offcanvas

Use a named native dialog as the mobile navigation drawer. Escape closes it.

View HTML

<button class="btn btn-outline" data-dialog-open="nav-drawer">Open navigation</button>
<dialog id="nav-drawer" class="sc-dialog" aria-labelledby="drawer-title">
  <h3 id="drawer-title" class="text-xl font-bold">Product space</h3>
  <nav class="menu my-5" aria-label="Drawer example">
    <a href="workspace.html#conversation" class="btn btn-ghost">Conversations</a>
    <a href="workspace.html#memory" class="btn btn-ghost">Memories</a>
  </nav>
  <button class="btn btn-outline" data-dialog-close autofocus>Close navigation</button>
</dialog>

Pagination

Announce the page change without moving focus away from the control.

Example records 1–2: Pilot planning, Research questions.

Page 1 of 2

View HTML

<div data-pagination-demo>
  <p data-page-content="1">Example records 1–2: Pilot planning, Research questions.</p>
  <p data-page-content="2" hidden>Example records 3–4: Draft proposal, Review criteria.</p>
  <nav aria-label="Example pages" class="mt-5 flex gap-3">
    <button class="btn" data-page="1" aria-current="page">1</button>
    <button class="btn" data-page="2">2</button>
  </nav>
  <p class="sc-help" data-page-status role="status">Page 1 of 2</p>
</div>

Placeholders

Keep layout stable, hide decoration from assistive technology, and name the operation.

Loading advisor profile…

View HTML

<div class="max-w-md" aria-busy="true">
  <p class="text-sm">Loading advisor profile…</p>
  <div class="mt-4 space-y-3" aria-hidden="true">
    <div class="h-5 w-1/2 rounded bg-base-300"></div>
    <div class="h-4 rounded bg-base-300"></div>
    <div class="h-4 w-3/4 rounded bg-base-300"></div>
  </div>
</div>

Popovers

Use native popovers for nonmodal context and normal tab navigation.

View HTML

<button class="btn btn-outline" popovertarget="context-popover">About this context</button>
<div popover id="context-popover" class="sc-dialog">
  <h3 class="font-bold">Memory attachment</h3>
  <p class="mt-3">Review the attached note before using it in a conversation.</p>
  <button class="btn btn-outline mt-4" popovertarget="context-popover" popovertargetaction="hide">Close</button>
</div>

Progress

Use determinate progress only when the total is known.

Example export — 3 of 5 memories3 of 5

View HTML

<label for="export-progress" class="sc-label">Example export — 3 of 5 memories</label>
<progress id="export-progress" class="progress progress-primary" value="3" max="5">3 of 5</progress>

Scrollspy

A small local scroll region tracks the visible section. Full-page content stays accessible outside this demo.

Question

What should we learn from a pilot?

Views

Start small, define a stopping rule, and preserve uncertainty.

Decision

The user reviews the reasoning and decides.

View HTML

<div data-scrollspy>
  <nav class="flex flex-wrap gap-2" aria-label="Example sections">
    <a class="sc-spy-link" href="#spy-question">Question</a>
    <a class="sc-spy-link" href="#spy-views">Views</a>
    <a class="sc-spy-link" href="#spy-decision">Decision</a>
  </nav>
  <div data-spy-panel class="mt-4 max-h-64 overflow-y-auto border border-line p-4" tabindex="0" aria-label="Scrollable conversation summary">
    <section id="spy-question" class="min-h-48">
      <h3 class="font-bold">Question</h3>
      <p>What should we learn from a pilot?</p>
    </section>
    <section id="spy-views" class="min-h-48">
      <h3 class="font-bold">Views</h3>
      <p>Start small, define a stopping rule, and preserve uncertainty.</p>
    </section>
    <section id="spy-decision" class="min-h-48">
      <h3 class="font-bold">Decision</h3>
      <p>The user reviews the reasoning and decides.</p>
    </section>
  </div>
</div>

Spinners

Pair an indeterminate spinner with a useful operation label.

Waiting for an advisor response…

View HTML

<div class="flex items-center gap-3" aria-busy="true">
  <span class="loading loading-spinner text-primary" aria-hidden="true"></span>
  <span>Waiting for an advisor response…</span>
</div>

Toasts

Keep important errors inline. This notice persists until dismissed.

View HTML

<div data-toast-demo>
  <button class="btn btn-outline" data-toast-show>Show example notice</button>
  <div data-toast class="alert mt-5" hidden>
    <p data-toast-message role="status"></p>
    <button class="btn btn-ghost" data-toast-hide>Dismiss</button>
  </div>
</div>

Tooltips

Supplement visible labels; do not put essential instructions only in a tooltip. Escape dismisses it.

View HTML

<span class="group relative inline-flex" data-tooltip>
  <button class="btn btn-outline" aria-describedby="help-tip" data-dialog-open="component-dialog">Advisor details</button>
  <span id="help-tip" role="tooltip" class="sc-tooltip">View this AI advisor’s role and expertise.</span>
</span>

Buttons

Forms

Badge

Alerts

Card

Strategist

Tables

Accordion

Modal

Breadcrumb

Button group

Carousel

1. Ask a clear question

2. Invite different perspectives

3. Review the reasoning

Close button

Collapse

Dropdowns

List group

Navbar

Navs and tabs

Offcanvas

Pagination

Placeholders

Popovers

Memory attachment

Progress

Scrollspy

Question

Views

Decision

Spinners

Toasts

Tooltips