0.4.1

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

Find a theme for your interface

Choose Radiant Default or a complete theme from Radiant Themes. 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

57 documented parts

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

Explore Components

Library

57 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 Radiant Default or choose a complete visual system from Radiant Themes.
  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.

Choose a theme

Start with Radiant Default and its color controls, or import a complete theme from Radiant Themes.

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.