VelliraDesign system for React and React Native
Install the package, preview components, understand the token architecture, and start building consistent interfaces in minutes.
Skip to content
Why Vellira
Vellira keeps product interfaces consistent across Web and React Native without forcing both renderers into the same implementation. Tokens, public contracts, and interaction logic are shared. Rendering stays platform-specific.
Token architecturePrimitive colors flow into semantic tokens, component states, and renderer packages.Component coverageButton, Input, Checkbox, RadioGroup, Select, Dropdown, Tabs, Tooltip, and Modal.Fast adoptionInstall a renderer, import styles where needed, and render your first component.
Quick Start
Install the Web renderer and import styles once in your app entry.
bash
pnpm add @romanbakurov/vellira-webtsx
import '@romanbakurov/vellira-web/styles';
import { Button } from '@romanbakurov/vellira-web';
export function Example() {
return <Button variant='primary'>Continue</Button>;
}Packages
WebReact
@romanbakurov/vellira-webNativeReact Native@romanbakurov/vellira-nativeTokensDesign Tokens@romanbakurov/vellira-tokensFeatures
Shared design tokens
React and React Native renderers
TypeScript-first public APIs
Modular packages
Tested components
Automated releases
Documentation
Use the docs as the main path through the system.
| Goal | Page |
|---|---|
| Install and render a component | Quick Start |
| Browse component previews | Component Gallery |
| Understand tokens | Theme Architecture |
| Use React DOM | Web |
| Use React Native | Native |
GitHub
Vellira is developed as a monorepo with package builds, tests, Storybook, smoke checks, documentation builds, and release automation.