Web

@romanbakurov/vellira-web contains the React DOM implementation of Vellira. It owns DOM structure, CSS modules, browser events, accessibility ids, and web overlay behavior while reusing shared tokens, types, and core hooks.

Install

pnpm add @romanbakurov/vellira-web

Import the stylesheet once.

import '@romanbakurov/vellira-web/styles';

Example

import {
  Button,
  FormField,
  Input,
  Select,
  Tabs,
} from '@romanbakurov/vellira-web';

export function AccountPanel() {
  return (
    <Tabs defaultValue='profile'>
      <Tabs.List aria-label='Account sections'>
        <Tabs.Tab value='profile'>Profile</Tabs.Tab>
        <Tabs.Tab value='security'>Security</Tabs.Tab>
      </Tabs.List>

      <Tabs.Panel value='profile'>
        <FormField label='Display name'>
          <Input placeholder='Roman Bakurov' />
        </FormField>
        <Select label='Role' options={['Admin', 'Editor', 'Viewer']} />
        <Button variant='primary'>Save changes</Button>
      </Tabs.Panel>
    </Tabs>
  );
}

Components

Component	Role
Button	Primary, secondary, danger, size, icon, disabled, and full-width actions
Checkbox	Binary choice with controlled and uncontrolled state
Input	Text entry with label, placeholder, state, and accessibility support
FormField	Field composition for labels, descriptions, and error text
RadioGroup	Single choice control using shared keyboard behavior
Select	Trigger, option list, and value management
Dropdown	Menu composition with trigger, content, groups, items, separators
Tabs	Tab list, tabs, panels, and keyboard navigation
Tooltip	Anchored help content
Modal	Overlay, content, header, body, and footer primitives

Development

pnpm --filter @romanbakurov/vellira-web build
pnpm --filter @romanbakurov/vellira-web test
pnpm --filter @vellira/web-storybook dev