Deterministic styling for high-performance web interfaces.

Layer Precedence Hierarchy (Lowest to Highest)

For normal layered declarations, later layers take precedence over earlier layers. Unlayered styles and important declarations have different precedence. Click a layer to inspect:

Token Overrides

Accessible Dialog Modal

Traps Tab/Shift-Tab focus, locks body scroll, and dismisses on Escape or backdrop click.

<!-- Accessible Focus-Trapped Modal -->
<div class="modal-backdrop" id="demoModal" role="dialog" aria-modal="true">
  <div class="modal-box">
    <h3 class="card-title-lg">Dialog Modal</h3>
    <p class="modal-desc">Focus trapped inside dialog.</p>
    <button class="btn btn-primary" onclick="closeModal()">Confirm</button>
  </div>
</div>

Tactile Mobile BottomSheet

Mobile-first slide-up drawer with tactile drag handle, touch-action isolation, and pull-down dismiss.

<!-- Mobile Tactile BottomSheet -->
<div class="bottomsheet-backdrop" id="demoSheet" role="dialog" aria-modal="true">
  <div class="bottomsheet-box">
    <div class="bottomsheet-handle"></div>
    <h3 class="card-title-lg">Tactile Drawer</h3>
    <button class="btn btn-primary w-full" onclick="closeBottomSheet()">Done</button>
  </div>
</div>

Slide-In Side Drawer

Slide-in side navigation and configuration panel with smooth cubic-bezier transitions.

<!-- Slide-In Side Drawer Overlay -->
<div class="drawer-backdrop" id="demoDrawer" role="dialog" aria-modal="true">
  <div class="drawer-box">
    <h3 class="card-title-lg">System Drawer</h3>
    <button class="btn btn-primary w-full" onclick="closeDrawer()">Close</button>
  </div>
</div>

Anchored Popover

Anchored floating card with pointer click outside dismissal and keyboard escape listener.

<!-- Anchored Popover Container -->
<div class="popover-anchor">
  <button class="btn btn-secondary" onclick="togglePopover()">Toggle</button>
  <div class="popover-card" id="myPop">
    <h4>Popover Title</h4>
  </div>
</div>

Roving Focus Menu

Accessible action menu with roving keyboard focus (↑/↓/Enter) and danger state actions.

<!-- Roving Keyboard Focus Dropdown -->
<div class="popover-anchor">
  <button class="btn btn-primary" onclick="toggleDropdown()">Menu ▼</button>
  <div class="dropdown-box" id="myDrop">
    <button class="dropdown-item">Edit Profile</button>
    <button class="dropdown-item danger">Revoke</button>
  </div>
</div>

Stackable Notifications

Real-time notifications with accessible role="status", auto-dismiss timers, and variants.

<!-- Real-Time Notification Stack -->
<div class="toast-stack" id="toastStack">
  <div class="toast-node success" role="status">
    <span>✓</span>
    <div><h4>Build Succeeded</h4><p>Zero runtime overhead.</p></div>
  </div>
</div>

Bordered & Lifted Folder Tabs (`.cyn-tabs-lifted`)

Supports classic lifted folder tabs, pill badges, and underline navigation with WCAG 2.2 roving focus and seamless baseline integration.

<!-- Bordered / Lifted Folder Tabs (.cyn-tabs-lifted) -->
<div class="cyn-tabs cyn-tabs-lifted" id="stepTabs">
  <div class="cyn-tablist" role="tablist">
    <button class="cyn-tab-btn" role="tab" aria-selected="false" aria-controls="step1">1 Step</button>
    <button class="cyn-tab-btn active" role="tab" aria-selected="true" aria-controls="step2">2 Step</button>
    <button class="cyn-tab-btn" role="tab" aria-selected="false" aria-controls="step3">3 Step</button>
  </div>
  <div class="cyn-tabpanel active" id="step2" role="tabpanel">
    <h3>2 Step</h3>
    <p>This is the 2 Step tab content.</p>
  </div>
</div>

Focus Ring System & Child Dividers

Compound box-shadow focus rings that never shift layout boundaries, paired with automatic child divider borders.

<!-- Non-Layout-Shifting Accessible Focus Ring -->
<button class="btn ring-2 ring-brand ring-offset-2">Action</button>

<!-- Automatic Child Dividers -->
<div class="divide-y divide-subtle">
  <div class="py-2">Row 1</div>
  <div class="py-2">Row 2</div>
</div>

Prose Typography Engine

Automated proportional typography with balanced line-heights for documentation, articles, and release notes.

<!-- Proportional Markdown Typography -->
<article class="cyn-prose">
  <h2>Title</h2>
  <p>Paragraph with <a href="#">link</a> and <code>token</code>.</p>
  <blockquote>Direct citation.</blockquote>
</article>

Form Controls & Validation

Normalized native inputs, error indicators, custom select chevrons, styled checkboxes, and radio groups.

<!-- Normalized Form Group with Validation -->
<div class="cyn-form-group">
  <label class="cyn-form-label" for="email">Email</label>
  <input class="cyn-form-input is-invalid" id="email" type="email" />
  <span class="cyn-form-error">Invalid email format.</span>
</div>

<!-- Styled Select Dropdown & Checkbox -->
<select class="cyn-form-select"><option>Production</option></select>
<input class="cyn-form-checkbox" type="checkbox" checked />

Spring Parameters

10 MCP Server Tools

Run coherynui mcp serve over stdio to enable coding agents to inspect projects safely:

• project_inspect: Identify compiler, config, and theme profiles
• docs_search: Semantic search across versioned documentation
• components_search: Query components by intent and capability
• components_get: Retrieve props, accessibility, and examples
• recipes_search: Search layout and material recipes
• themes_list: Enumerate tokens and customization hooks
• styles_explain: Explain classes and cascade layer resolution
• code_validate: Return structured compiler diagnostics
• project_plan: Propose implementation steps safely
• migration_analyze: Plan migrations from legacy CSS engines

Multi-Client Agent Initialization

Initialize canonical rules and 7 official skills with one command:

# Initialize Claude Code, Cursor, Copilot & Codex
coherynui agent init --client all

# Install 7 canonical offline skills
coherynui agent skills install

MCP Stdio Configuration

// claude_desktop_config.json or .cursor/mcp.json
{
  "mcpServers": {
    "coherynui": {
      "command": "coherynui",
      "args": ["mcp", "serve"]
    }
  }
}