Vellira
Get started
React + React Native

Independent modules.One seamless system.

Production-ready React and React Native components with shared APIs, accessible behaviour, themes, and design tokens.

Get startedExplore componentsGitHub
Vellira preview
React and Native APIs stay in syncTokens synced
Platform
ReactReact Native
Built for production

Real components.Real interaction.

Every example below is rendered from the actual Vellira component library. Open it, type into it and interact with it.

Rendered by@vellira-ui/react
primary
neutral
success
warning
danger
Production ready • TypeScript • Tree-shakeable • Accessible
Design tokens

Design once.Theme everywhere.

Every semantic token updates React and React Native at the same time.

Live application

Rendered UI

Shared tokensReact · React Native
WorkspaceVellira workspace
Visible to everyone in your workspace.
Receive workspace and release updates.
Components42
Coverage98%
Themes3
  • Semantic tokens
  • CSS Variables
  • React Native themes
  • Zero hardcoded colors
Cross-platform by design

One API.Two platforms.

Build consistent product experiences across React and React Native without maintaining two unrelated design systems.

Web

React

@vellira-ui/react
Workspace settingsReal React components
The same controlled value updates both platform previews.
Mirrors to native switch styling.
Density
Active teamDesign systems
DensityComfort
Native

React Native

@vellira-ui/react-native
Shared contract

One state. Native rendering.

The same component decisions travel between web and native while each surface keeps its platform feel.

  • 01
    StateOne controlled state model

    Inputs, selects, tabs, radio, and checkbox controls share the same value/change contract.

  • 02
    ScaleShared sizes and color intents

    Use the same size and intent vocabulary while each renderer maps it to platform primitives.

  • 03
    TokensToken-backed surfaces and borders

    Surfaces, borders, focus rings, and shadows resolve from theme tokens instead of hard-coded color.

  • 04
    FeelNative-feeling platform patterns

    Menus, sheets, touch targets, and web overlays keep native behavior without splitting the API.

Component system

Build complete interfaces.Not isolated components.

Accessible primitives, product-ready patterns and shared design tokens working together in one coherent interface.

Vellira workspace
Live preview
Workspace

General settings

Manage your workspace details and preferences.

Identity

Workspace profile

Autosaved
Visible to everyone in your workspace.
Receive product updates and workspace activity.
Default view
Design view selected
Developer experience

Write less.Ship everywhere.

Move between React and React Native without learning two unrelated component systems. The package changes. The mental model stays.

React code selected
Button.tsx
01import { Button } from '@vellira-ui/react';02 03export function Example() {04  return (05    <Button color='primary'>06      Continue07    </Button>08  );09}
Only the package changes@vellira-ui/react
Live previewButton
InteractiveWeb preview
CheckoutWorkspace Pro
Monthly total$48

Includes team seats, design tokens, and support.

pnpm add @vellira-ui/react
DocsStorybook
  • TypeScript
  • Accessible
  • Tree-shakeable
  • Theme-aware
Production workflow

From change.To production.

Every token, component and package moves through one validated release workflow before it reaches your product.

Release pipeline

Validated from source to registry

All checks passing
013 themes
Tokens

Generate outputs

Compile semantic tokens to web and native outputs.

tokens.cssthemes.ts
028 packages
Build

Compile packages

Build React, Native, icons and assets.

dist/types/
03All green
Quality

Validate everything

Run types, tests, accessibility and boundaries.

268 tests0 errors
04Synced
Docs

Publish references

Sync Storybook, API references and examples.

StorybookAPI.md
05Ready
Release

Ship to production

Publish packages through trusted publishing.

npmGitHub
Trusted publishingsemantic-releaseType-safe packagesReproducible builds
Developer experience

Install once.Ship your first component.

Add the package, import a component and render your first Vellira interface without leaving the flow.

Quick start

Three steps to your first component

Under 2 minutes
01Install
Terminal
$ pnpm add @vellira-ui/react
02Import
App.tsx
import { Button } from "@vellira-ui/react";
03Render
App.tsx
<Button>Get started</Button>
Live result

Your first Vellira component

Ready
First component

Build with Vellira

Accessible defaults, semantic tokens and production-ready behavior are already included.

Component controlssolid · md
Variant
Size
Get startedAccessible by default
Built in the open

Proof you can inspect.Quality you can trust.

Public source, automated validation and explicit accessibility standards make every part of Vellira verifiable.

Open-source repository

vellira-dev/vellira

PublicView source
main
2 minutes agoca3d7a6
Latest workflow runValidating required checksQuality, build, typecheck, tests and package validation
Running
Quality checksQueued
Build packages and appsQueued
Typecheck and API validationQueued
Tests and coverageQueued
Package smoke validationQueued
TypeScriptMIT licensedSecurity policyContributing guide
Quality contract

Validated before every release

Passing
TypeScriptTyped public APIs
AccessibilityKeyboard and screen-reader behaviour
Quality pipelineBuilds, tests, typecheck and smoke validation
Release securitynpm trusted publishing
Open sourceInspect every implementationAutomated validationEvery release follows the same contractTrusted publishingSecure delivery to npm
Roadmap

Built in public.Shipping continuously.

Follow what is available now, what is actively being built and where Vellira is heading next.

Public roadmap

From current foundations to the next generation

View on GitHub
Now

Shipping now

3
Component foundationsAvailable

Core interactive components across React and Native.

Theme systemAvailable

Light, dark and high-contrast semantic themes.

Documentation platformAvailable

Docs, Storybook and generated API references.

Next

In active development

3
Component expansionIn progress

Broader coverage for production application patterns.

Developer toolingPlanned

Faster setup, generation and workspace automation.

Native parityIn progress

Continue aligning APIs and behaviours across platforms.

Later

Exploring next

3
Vellira ProFuture

Collaboration and governance tools for growing teams.

Production templatesFuture

Reusable foundations for common product experiences.

Advanced automationExploring

Deeper workflows, insights and release intelligence.

Recent milestones

Recent progress

Actively maintained
Latest stableJul 2026
Release pipeline improvements

Trusted publishing and validation refinements.

Recent releaseJun 2026
Theme Studio

Semantic themes and live token controls.

Previous milestoneMay 2026
React Native expansion

Shared behaviours across web and native.

Foundation releaseApr 2026
Accessibility foundation

Keyboard, focus and semantic interaction patterns.

Public issuesVisible milestonesRelease notesCommunity feedback
Vellira Pro

Everything starts free.Scale with Pro later.

The open-source foundation will stay free. Vellira Pro will add collaborative workflows and advanced tooling for growing teams.

Open source + Pro

Built for everyone. Extended for teams.

Coming soon
Available today

Open-source foundation

Always free

Everything needed to build production interfaces across React and React Native.

  • React components
  • React Native components
  • Semantic tokens
  • Light, dark and high contrast themes
  • Storybook and documentation
  • MIT-licensed source
Start with Vellira
Coming next

Vellira Pro

For teams

Tools for collaboration, governance and scaling a design system across a larger organization.

01Team workspaces

Shared libraries, ownership and collaboration around one design system.

02Design reviews

Structured approval workflows for component and token changes.

03Production templates

Ready-to-use foundations for common product and application patterns.

04Advanced tooling

Deeper automation, insights and workflows for larger teams.

Follow the roadmap

Pro is being shaped in public. Follow the roadmap and share what your team needs.

The open-source components, tokens and themes will remain available without a Pro subscription.

Start building

Ready to buildwith Vellira?

Production-ready React and React Native components, shared APIs and semantic design tokens, ready for your next product.

Get started
Read the docsExplore StorybookView on GitHub
Get started with one command
pnpm add @vellira-ui/react
React · React Native · TypeScript