Components

<button class="cui-btn">Primary</button>
<button class="cui-btn cui-btn-secondary">Secondary</button>
<button class="cui-btn cui-btn-destructive">Destructive</button>
<button class="cui-btn cui-btn-ghost">Ghost</button>

<a href="/signup" class="cui-btn">Link as button</a>
<a href="/learn" class="cui-btn cui-btn-secondary">Secondary link</a>

<span class="cui-badge">Default</span>
<span class="cui-badge cui-badge-primary">Primary</span>
<span class="cui-badge cui-badge-success">Success</span>
<span class="cui-badge cui-badge-destructive">Error</span>

<div class="cui-alert cui-alert-info" role="alert">
  <strong>Info:</strong> Your session will expire in 5 minutes.
</div>

<div class="cui-alert cui-alert-success" role="alert">
  <strong>Success:</strong> Your profile has been updated.
</div>

<div class="cui-alert cui-alert-warning" role="alert">
  <strong>Warning:</strong> Your credit card expires next month.
</div>

<div class="cui-alert cui-alert-error" role="alert">
  <strong>Error:</strong> Payment could not be processed.
</div>

<div>
  <label for="name">Full name</label>
  <input type="text" id="name" placeholder="Jane Smith">
  <p class="cui-hint">As it appears on your ID.</p>
</div>

<!-- Error state -->
<div class="cui-error">
  <label for="pw">Password</label>
  <input type="password" id="pw">
  <p class="cui-error-msg">Must be at least 8 characters.</p>
</div>

<label><input type="checkbox" checked> Receive email updates</label>
<label><input type="checkbox"> Accept terms</label>

<label><input type="radio" name="plan" checked> Free plan</label>
<label><input type="radio" name="plan"> Pro — $49/mo</label>

<div class="cui-card">Default card</div>
<div class="cui-card cui-card-elevated">Elevated card</div>
<div class="cui-card cui-card-highlight">Highlighted card</div>

<div class="cui-table-wrapper">
  <table class="cui-table">
    <thead>
      <tr><th>Name</th><th>Role</th><th>Status</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>Alexandra Chen</td>
        <td>Designer</td>
        <td><span class="cui-badge cui-badge-success">Active</span></td>
      </tr>
    </tbody>
  </table>
</div>

<details class="cui-accordion" open>
  <summary>How do I install cbrowser-ui?</summary>
  <p>Add one link tag or install via npm.</p>
</details>
<details class="cui-accordion">
  <summary>Does it work with React?</summary>
  <p>Yes. Framework-agnostic CSS.</p>
</details>

<button class="cui-btn" onclick="document.getElementById('my-dialog').showModal()">
  Open Dialog
</button>

<dialog id="my-dialog" class="cui-dialog" data-cui-trap>
  <div class="cui-dialog-content">
    <div class="cui-dialog-header">
      <h3 class="cui-dialog-title">Confirm Action</h3>
      <p class="cui-dialog-description">Are you sure?</p>
    </div>
    <div class="cui-dialog-footer">
      <button class="cui-btn cui-btn-secondary" onclick="this.closest('dialog').close()">Cancel</button>
      <button class="cui-btn cui-btn-destructive">Delete</button>
    </div>
  </div>
</dialog>

<div class="cui-progress" role="progressbar"
     aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"
     aria-label="Upload progress: 72%">
  <div class="cui-progress-bar" style="width: 72%;"></div>
</div>

<nav aria-label="Main" class="cui-nav">
  <a href="/" aria-current="page">Dashboard</a>
  <a href="/analytics">Analytics</a>
  <a href="/settings">Settings</a>
</nav>

<nav aria-label="Breadcrumb">
  <ol class="cui-breadcrumb">
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><span aria-current="page">Details</span></li>
  </ol>
</nav>