Components

UI Library

Summit ships a copy-in UI library: a set of accessible, token-themed components you drop straight into your HTML. There is no component runtime to install. Each one is plain markup plus a class, and the interactive ones are wired with the same s- directives you already know. Theme the whole set by changing a few CSS variables.

It is built the way an AI agent likes to work: predictable class names, behavior that lives on the element, and nothing that needs a build step.

Live

Source

<div class="s-row">
  <button class="s-btn">Solid</button>
  <button class="s-btn s-btn-outline">Outline</button>
  <button class="s-btn s-btn-ghost">Ghost</button>
  <span class="s-badge s-badge-success">Live</span>
</div>

Using a component

Load the stylesheet once, then copy any component's markup.

<link rel="stylesheet" href="https://velofy.github.io/summitjs/assets/components.css" />

Or copy the rules you need out of components.css into your own styles. Every class is prefixed s-, so nothing collides with your existing CSS.

Theming

Components read the same design tokens as the rest of Summit. Override them on :root (or any scope) and the whole set restyles. The most useful ones:

:root {
  --accent: #ea580c;      /* primary / brand color */
  --s-radius: 12px;       /* corner rounding */
  --s-danger: #e11d48;    /* destructive actions */
}

Light and dark are handled for you through prefers-color-scheme and the data-theme attribute, exactly like this documentation.

Accessibility

Interactive components ship with the roles and keyboard behavior you expect: focus rings on every control, Escape to close overlays, click-outside to dismiss menus, and labels wired to their inputs. Where a component needs an id to pair a label with a control, use the $id magic.