0.1.0-rc.2

Radiant UI

Accessible light-DOM components for Radiant hosts.

Import focused modules, compose views in the document tree, and theme through semantic roles. Components ship accessible defaults; the document tree stays yours.

npm install @ecopages/radiant-ui
Read the overviewBrowse components
import { RuiButton } from '@ecopages/radiant-ui/button';
import { RuiChip } from '@ecopages/radiant-ui/chip';
import { RuiInput } from '@ecopages/radiant-ui/input';
import { RuiLabel } from '@ecopages/radiant-ui/label';
import { RuiSwitch } from '@ecopages/radiant-ui/switch';

export const Preview = () => (
  <>
    <RuiButton>Save</RuiButton>
    <RuiButton variant="ghost">Cancel</RuiButton>
    <RuiChip variant="primary">light DOM</RuiChip>
    <RuiSwitch checked>Notifications</RuiSwitch>
    <RuiLabel htmlFor="name">Name</RuiLabel>
    <RuiInput id="name" placeholder="Andrea" />
  </>
);
light DOM

Get started

Learn the model

Import focused modules, compose light-DOM views, and keep the public contract on the custom element.

Explore Get started

Theming

Compose packs, not palettes

Choose a colour profile, then layer spacing and radius. Components consume semantic roles.

Explore Theming

Tokens

See what components consume

Colour roles, spacing, and radius scales with live swatches for every semantic token.

Explore Tokens

Components

47 documented parts

Each page pairs usage guidance with a playground that uses the real public API.

Explore Components

Theming

Remap this page

Colour, spacing, and radius are packs. They restyle this document; the hero JSX stays the same.

Documentation preview — not an application API. See Theming.

Library

47 components

Actions

Forms

Layout

Navigation

Overlays

Feedback

Data display

Suggested path

Build confidence step by step

  1. Read the overview, then install `@ecopages/radiant-ui`. Radiant, JSX, and Signals come along as peers.
  2. Load a theme and the component stylesheet. Start with Glacier, then compose spacing and radius packs.
  3. Import a focused module and compose the public JSX helpers in light DOM.
  4. Use the playgrounds to inspect props, states, and accessibility notes.

Compose a theme

Import the default foundation, then layer the spacing and radius packs the product needs.

Read the token scales

Components consume semantic roles and geometry roles, not palette steps.

Start with a control

Open a component page and use the playground against the real public API.