Radiant

React components built on native HTML elements, with shared themes. Published as @cognitap/radiant under the MIT license. Radiant is experimental during 0.x.

It has eleven families: Button, Link, Field, Input, Select, Checkbox, RadioGroup, Dialog, Collapsible, Accordion and Card.

Install

pnpm add --save-exact @cognitap/radiant

React 19.3+ is a peer dependency. Import the stylesheet once. It needs no Tailwind and styles only Radiant components:

import '@cognitap/radiant/styles.css'
import { Button, Field, Input } from '@cognitap/radiant'

export function Signup() {
  return (
    <form>
      <Field label="Email">
        <Input
          name="email"
          type="email"
          autoComplete="email"
        />
      </Field>
      <Button type="submit">Sign up</Button>
    </form>
  )
}

For a global reset, also import @cognitap/radiant/reset.css before styles.css.

With Tailwind

Applications on Tailwind 4.3.3+ can import the source entry instead of styles.css, so their own build generates Radiant's utilities. Use one route, not both:

@import 'tailwindcss';
@import '@cognitap/radiant/tailwind.css';

Keep source discovery on so your own utilities are generated. Utilities you pass in className replace the matching defaults, including hover: and disabled: variants.

Documentation

• Docs site: a guide and live example for each component
• Architecture: how the families fit together and why
• Theming: tokens, presets, fonts and modes
• Motion: opt-in spring animation
• Accessibility: support targets and manual checks
• Glossary: shared vocabulary
• Changelog: what changed in each release, including unreleased work
• Contributing: setup, commands and how changes get merged