VelliraCross-platform UI components for React and React Native.
Accessible components, shared design tokens, and native rendering.
Skip to content
Why Vellira
Vellira provides a consistent UI foundation for React and React Native while keeping each renderer platform-native.
Tokens, interaction logic, and public APIs are shared. Rendering stays platform-specific.
Token architecturePrimitive colors flow into semantic tokens, component states, and renderer packages.Component coverageButton, Input, Checkbox, RadioGroup, Select, FormField, Dropdown, Tabs, Popover, Tooltip, and Modal.Premium component docsUsage guidance, accessibility contracts, platform notes, and production patterns for every component.Fast adoptionInstall a renderer, import styles where needed, and render your first component.Production pathUse the install, theming, accessibility, quality, and deploy guidance before shipping.
Quick Start
Install the React renderer and import styles once in your app entry.
bash
pnpm add @vellira-ui/reacttsx
import '@vellira-ui/react/styles';
import { Button } from '@vellira-ui/react';
export function Example() {
return (
<Button color='primary' appearance='solid'>
Continue
</Button>
);
}For icon-only web actions, use the standard aria-label attribute. Native actions use accessibilityLabel.
Packages & Libraries
ReactWeb components
@vellira-ui/reactReact NativeNative components@vellira-ui/react-nativeTokensDesign Tokens@vellira-ui/tokensIconsCross-platform Icons@vellira-ui/iconsWebsiteDocumentation & Showcasevellira.devStorybookInteractive Component Explorerstorybook.vellira.devFeatures
Accessible components
Shared design tokens
React & React Native
TypeScript-first APIs
Tree-shakeable packages
Automated CI/CD pipeline
Documentation Overview
Use the docs as the main path through the system.
| Goal | Page |
|---|---|
| Install and render a component | Quick Start |
| Browse component | Components |
| Compare visual states | Component Overview |
| Understand tokens | Theme Architecture |
| Prepare for production | Production |
| Use React DOM | React |
| Use React Native | React Native |
GitHub
Vellira is developed as a monorepo with package builds, tests, Storybook, smoke checks, documentation builds, and release automation.
The repository includes Storybook, automated testing, semantic releases, and fully automated npm publishing.