Component Gallery

Browse the main Vellira components before opening the renderer-specific API pages. These previews show the component shape and the matching usage patterns.

Use Storybook for live states, controls, and interaction testing.

Open Storybook

Catalog

Button

Input

Email

Checkbox

Remember this device

RadioGroup

System

Light

Tabs

Select

Admin v

Dropdown

Copy

Rename

Tooltip

Helpful context

Modal

Confirm actionThis dialog needs a decision.

Form Example

import { Button, Checkbox, Input } from '@romanbakurov/vellira-web';

export function FormExample() {
  return (
    <form>
      <Input label='Email' placeholder='name@example.com' />
      <Checkbox label='Remember this device' defaultChecked />
      <Button variant='primary'>Continue</Button>
    </form>
  );
}

Selection Example

import { RadioGroup, Select } from '@romanbakurov/vellira-web';

export function SelectionExample() {
  return (
    <>
      <RadioGroup
        label='Theme'
        options={[
          { label: 'System theme', value: 'system' },
          { label: 'Light theme', value: 'light' },
        ]}
      />
      <Select label='Role' options={['Admin', 'Editor', 'Viewer']} />
    </>
  );
}

Navigation Example

import { Tabs } from '@romanbakurov/vellira-web';

export function TabsExample() {
  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'>Profile settings</Tabs.Panel>
    </Tabs>
  );
}

Overlay Example

import { Button, Dropdown } from '@romanbakurov/vellira-web';

export function OverlayExample() {
  return (
    <Dropdown>
      <Dropdown.Trigger>
        <Button variant='secondary'>Open menu</Button>
      </Dropdown.Trigger>
      <Dropdown.Content>
        <Dropdown.Item>Copy</Dropdown.Item>
        <Dropdown.Item>Rename</Dropdown.Item>
        <Dropdown.Item tone='danger'>Delete</Dropdown.Item>
      </Dropdown.Content>
    </Dropdown>
  );
}

Where to Go Next

Goal	Page
Install and render the first component	Quick Start
Learn Web package details	Web
Learn Native package details	Native
Understand token layers	Theme Architecture