@rak200/ui

Host-agnostic custom-element UI components for the rak200 ecosystem.

They are custom elements, so they work in any page and any framework — or none. That is the whole point: a component welded to one framework is not reusable outside it, and this kit exists to be reused. Built with Lit for a thin runtime with no build step required of the host. See ARCHITECTURE.md for how that was decided and what was rejected.

Install

npm install @rak200/ui

Use

<script type="module">
  import '@rak200/ui';
</script>

<ui-input label="Amount" help="In BRL, two decimals." type="number" name="amount"></ui-input>

<ui-select label="Currency" name="currency">
  <ui-option value="brl">Real</ui-option>
  <ui-option value="usd">Dollar</ui-option>
</ui-select>

<ui-switch label="Email notifications" name="notify" checked></ui-switch>

<ui-button><ui-icon name="check"></ui-icon> Save</ui-button>
<ui-button variant="secondary">Cancel</ui-button>
<ui-button disabled>Unavailable</ui-button>

<ui-dialog>
  <h2 slot="title">Delete account</h2>
  <p>This cannot be undone.</p>
  <ui-button slot="actions" variant="secondary">Cancel</ui-button>
  <ui-button slot="actions">Delete</ui-button>
</ui-dialog>

Every visual decision is a CSS custom property, so a host restyles the kit without forking it:

:root {
  --ui-color-accent: rebeccapurple;
  --ui-radius: 0;
}

Playground

rak200.github.io/ui — every component, rendered, with its variants and states side by side and an accessibility panel over each one.

It follows master rather than the latest release, so it can show a component a published version does not contain. The commit it was built from is stamped in the sidebar, so you can always tell which one you are looking at.

Documentation

The reference lives in docs/ — one page per unit. The playground shows the components; docs/ is what describes them. It renders under the token sheet a host inserts, and its toolbar switches the colour scheme — so what the site shows is what a page gets, in both schemes rather than one.

Status

v0. Eighteen components — <ui-button>, <ui-card>, <ui-dialog>, <ui-input>, <ui-textarea>, <ui-checkbox>, <ui-switch>, <ui-select>, <ui-option>, <ui-optgroup>, <ui-radio-group>, <ui-radio>, <ui-tooltip>, <ui-toaster>, <ui-toast>, <ui-menu>, <ui-table> and <ui-icon> — the token layer under them, and an adopted glyph set, built to the ecosystem's full quality bar rather than sketched: type-checked at the strictest available setting, formatted, tested in a real browser and asserted against axe for WCAG A/AA, 100% coverage and 100% mutation score, scanned, and every public symbol documented. The v0 surface in RFC 0016 grows from here — see ROADMAP.md.