@vellira-ui/react

React component package for Vellira.

This package contains the web implementation of the design system. It extends shared contracts from @vellira-ui/types, uses shared tokens from @vellira-ui/tokens, and keeps DOM, CSS, accessibility ids, and browser events inside the web layer.

Components

• Button
• Checkbox
• Input
• FormField
• RadioGroup
• Select
• Dropdown
• Tabs
• Tooltip
• Modal

Each public component has Storybook coverage and Vitest unit coverage.

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

Installation

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}
        onChange={(event) => setEmail(event.target.value)}
        placeholder='[email protected]'
      />
      <Checkbox
        label='Accept terms'
        description='Required to create an account.'
        checked={accepted}
        onCheckedChange={setAccepted}
      />
      <Button color='primary' variant='solid'>
        Submit
      </Button>
    </form>
  );
}

Button Notes

Use the standard aria-label attribute for icon-only web buttons:

import { Search } from '@vellira-ui/icons';

<Button aria-label='Search' iconOnly leftIcon={<Search />} />;

loading disables interaction and can replace the visible label with loadingText.

Checkbox Notes

Use description for settings-style helper text when the checkbox is not wrapped in FormField. For checkbox rows without a visible label, provide aria-label or aria-labelledby.

Testing

Run only web tests:

pnpm --filter @vellira-ui/react test

The web package uses Vitest with jsdom. Tests live next to components as *.test.tsx and use a small local render helper based on react-dom/client.

Storybook

Run web Storybook from the workspace root:

pnpm --filter @vellira-ui/react-storybook dev

Stories live next to components as *.stories.tsx and are also used for Chromatic visual review.

Development

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