alder-ui

A light-DOM, token-based web-component design system. You link one stylesheet and write elements like <al-button> and <al-card> in plain HTML; there is no shadow DOM, no build step, and no JavaScript required. This first tier is CSS only.

alder-ui is the built-in design system of the Alder language, which vendors it at a tag. It works from any stack that can write HTML.

The full documentation is the Alder book's Appendix C, "The alder-ui design system" (book/C-design-system.md in github.com/tapegram/alder): tokens and themes, every element with examples, and overriding tokens. This README is the short version.

Use it

<script>try{document.documentElement.classList.toggle("dark",localStorage.theme==="dark"||(!("theme" in localStorage)&&matchMedia("(prefers-color-scheme: dark)").matches))}catch(e){}</script>
<link rel="stylesheet" href="al.css">

<al-page width="narrow">
  <al-card>
    <h2 slot="header">Sign up</h2>
    <form method="post">
      <al-stack>
        <al-input label="Email"><label>Email<input name="email" type="email" required></label></al-input>
        <al-checkbox label="Send me news"><label>Send me news<input name="news" type="checkbox"></label></al-checkbox>
        <al-button variant="primary"><button type="submit">Sign up</button></al-button>
      </al-stack>
    </form>
  </al-card>
</al-page>

al.css is the whole library (tokens and every component, inside @layer al). Copy it from a tagged release, or link the raw file at a tag (https://raw.githubusercontent.com/tapegram/alder-ui/v0.5.0/al.css). See every element, variant and state in both themes at https://tapegram.github.io/alder-ui/ (the root index.html, built from the demos), or one element per page in demo/.

Spacing

Elements have no outer margin, as in shadcn. Space siblings with al-stack (sm 0.5rem, md 1rem, lg 1.5rem, xl 2.5rem). An app's Layout wraps page content in <al-stack gap="lg">; inside al-page, prose keeps shadcn's Typography rhythm.

Upgrading to v0.5.0

--al-border-width is new, default 1px, and every component border uses it, so a theme can thicken them. Four small changes keep the themes at AA, so existing apps look slightly different:

• The al-button link variant's text is --foreground (the hover underline is --primary).
• Inactive al-tabs triggers use --muted-foreground. In light mode this replaces --foreground at 60%; in dark mode it already was --muted-foreground, so nothing changes there.
• In dark mode the hover of the ghost button, the non-current pagination links and the alert dismiss button paints --accent at 100% (was 50%); the current-page link keeps its --input at 50% hover fill.
• In dark mode a hovered or focused destructive al-menu item's text and icon use --foreground (was --destructive) on the 20% red tint.

Upgrading to v0.4.2

al-button no longer stretches in grids or column stacks, so add full where you relied on a full-width button. Put the Layout's page content in <al-stack gap="lg">:

<al-page …><main><al-stack gap="lg">{children}</al-stack></main></al-page>

(any <header> outside <main> is left alone).

Elements

The attributes are the API; custom-elements.json (a Custom Elements Manifest) declares each one with its type, default and description.

element	attributes	slots
al-button	variant (primary default, secondary, outline, ghost, destructive, link), size (xs, sm, md default, lg, icon, icon-sm, icon-lg), disabled, type (button, submit), full	default
al-input	label, placeholder, disabled, invalid, help
al-textarea	label, placeholder, disabled, invalid, help
al-select	label, disabled, invalid, help
al-checkbox	label, disabled, invalid, help
al-table	striped, dense	default (a <table>)
al-card		header, default, footer, actions, description, action
al-badge	variant (default default, secondary, outline, destructive)	default
al-alert	variant (info default, success, warning, destructive), heading, dismissible	default
al-pagination	page, pages

Notes:

This is the beginning of the README. Read the rest at the original. Read the full README ↗