Skip to content
Combat UI
v0.6.0-alpha.4

Atoms

Small, reusable primitives that compose into larger surfaces: buttons and tab panels for actions, the code block for documentation surfaces, and the tree element for hierarchical content.

Buttons and tabs

Use button components for consistent actions and tabs for compact, keyboard-friendly panels.

Save Preview Disabled

Actions use component variants and shared size tokens.

Scoped dark theme

Token overrides can be scoped to a subtree.
API reference
cui-button — attribute / property Purpose
variant="primary" Accent-colored button. Pair with data-variant="primary" on the CSS-only .cui-button form.
disabled Boolean. Blocks pointer + keyboard activation and dims the button.
href When set, renders an <a> instead of <button>.
target · rel · download Forwarded to the rendered anchor when href is set.
type="button | submit | reset" Forwarded to the rendered <button>. Defaults to button — set submit when used inside a form.
full Boolean host attribute. Makes the button stretch to its container's inline-size.
cui-button — variable Default
--cui-button-bg --cui-color-surface-muted
--cui-button-border --cui-color-border
--cui-button-color --cui-color
--cui-control-size 2.5rem
--cui-control-radius 0.25rem
cui-tabs — slot Purpose
tab A clickable tab — typically a <button type="button">. Order matches panels.
panel The matching panel for each tab. Hidden state is managed automatically.
cui-tabs — behavior Detail
Keyboard ArrowLeft / ArrowRight cycles tabs; Home and End jump to the first or last tab.
ARIA Tabs get role="tab" + aria-selected; panels get role="tabpanel" + aria-labelledby. The initial selected tab is the first one or the one with aria-selected="true".

Segmented

A rounded pill track split into connected segments. Use it as a compact link set (a <nav> of <a>s with aria-current="page" on the current one) or as a single-choice control (a group of <button>s with aria-selected="true" on the active one). Add data-orient="stacked" for a vertical pill column, or data-fill to stretch the track across its container. It's pure CSS — for panels with keyboard/ARIA wiring, use tabs instead.

API reference
Class / attribute Purpose
.cui-segmented The rounded track. Use on a <nav> (link set) or a role="group" element (button control).
.cui-segment A single segment — an <a> or <button>. Segments share the track width equally.
aria-current="page" · aria-selected="true" Marks the active segment (the former for link sets, the latter for button controls); it lifts to a raised pill.
data-orient="stacked" Stacks the segments into a vertical, full-width pill column.
data-fill Stretches the track to its container's full inline-size; segments share the whole width.
Variable Default
--cui-segmented-bg --cui-color-surface-muted
--cui-segmented-radius 999px (full pill)
--cui-segmented-gap --cui-space-1
--cui-segment-active-bg --cui-color-surface-raised
--cui-segment-active-shadow --cui-shadow-1

Code

The cui-code component provides syntax highlighting and a monospaced font for code examples. Use the language attribute for automatic language detection or set it to "none" for plain code blocks without highlighting.

API reference
Attribute Purpose
language One of html · css · javascript / js · none. Selects the syntax-highlighting pass. Defaults to text (no highlight).
Authoring Purpose
<script type="text/plain"> child Recommended for embedding code. cui-code reads textContent and the script is not executed by the browser.
<!-- … --> child Wrap the code in an HTML comment to display raw markup that would otherwise be parsed (handy when the example itself contains cui-code).
Copy button Rendered automatically in the header. Uses the Clipboard API.
Variable Default
--cui-code-bg #111827
--cui-code-header-bg hsl(220deg 22% 12%)
--cui-code-border hsl(220deg 18% 28%)
--cui-code-text #dbeafe
--cui-code-muted #93a4bc
--cui-code-padding --cui-space-4
--cui-code-font SF Mono / Consolas stack
--cui-code-font-size --cui-font-size-neg-1
--cui-code-line-height 1.6
--cui-code-tab-size 2
--cui-code-comment · --cui-code-keyword · --cui-code-property · --cui-code-string · --cui-code-value · --cui-code-punctuation · --cui-code-function Per-token highlight colors.

Tree

cui-tree renders hierarchical content with keyboard navigation, drag & drop reordering, and a cancelable cui-tree-contextmenu hook. The component handles ARIA (role="tree", aria-level, aria-expanded, aria-selected), drop-zone detection (top third = before, bottom third = after, middle = into), and DOM moves. Selection, expand/collapse, and the context menu UI stay in the consumer's hands via events.

  • Docs
    • Getting started
    • Components
      • Navbar
      • Tabs
      • Tree
    • Theming
  • Archive
    • Legacy notes

API reference
Attribute / event Purpose
draggable-items Enables HTML5 drag & drop on every item row.
selectable="false" Disables click selection. Keyboard focus still works.
cui-tree-select Fires when an item is activated. detail.item.
cui-tree-expand / cui-tree-collapse Fires after the expanded state flips. detail.item.
cui-tree-contextmenu Cancelable. Call preventDefault() to suppress the browser menu and show your own. detail: { item, originalEvent, x, y }.
cui-tree-dragstart Fires at the start of a drag. detail.item.
cui-tree-drop Cancelable. detail: { source, target, position } where position is "before", "after", or "into". Call preventDefault() to handle the move yourself; otherwise the component moves the source node into place.
--cui-tree-indent Indent per depth level. Defaults to 1.25rem.
--cui-tree-row-hover / --cui-tree-row-selected Row background tokens for hover and selected states.
--cui-tree-drop-line Color of the insertion line and the "into" outline.