@vellira-ui/react

React implementation of the Vellira design system.

It extends shared contracts from @vellira-ui/types, uses shared tokens from @vellira-ui/tokens, shares renderer-neutral behavior through @vellira-ui/core, and keeps DOM rendering, CSS, accessibility, and browser interaction behavior inside the web layer.

Installation

Requires React 19 or later.

pnpm add @vellira-ui/react

Usage

Import the stylesheet once in your app entry point:

import '@vellira-ui/react/styles';

Then use the components:

import { Button, Checkbox, Input } from '@vellira-ui/react';
import { useState } from 'react';

export function Example() {
  const [email, setEmail] = useState('');
  const [accepted, setAccepted] = useState(false);

  return (
    <form>
      <Input
        label='Email'
        value={email}
        onValueChange={setEmail}
        placeholder='[email protected]'
      />
      <Checkbox
        label='Accept terms'
        description='Required to create an account.'
        checked={accepted}
        onCheckedChange={setAccepted}
      />
      <Button color='primary' appearance='solid'>
        Submit
      </Button>
    </form>
  );
}

Components

Inputs

• Button
• Checkbox
• Input
• Radio
• RadioGroup
• Select

Overlays

• Dropdown
• Tooltip
• Popover
• Modal

Forms

• FormField
• Tabs

Every public component includes Storybook stories and Vitest unit tests.

For detailed props, shared types, examples, and compound component APIs, see Web Component API.

Infrastructure

The package also exports web infrastructure used by components and applications:

• Portal
• PortalProvider
• ThemeProvider
• useTheme

Documentation

• Getting Started
• React
• Web Component API

Storybook

Explore every component in Storybook.

Development

pnpm --filter @vellira-ui/react build
pnpm --filter @vellira-ui/react test