Quick Start

Get from installation to your first Vellira component in a few minutes.

1. Install a Renderer

Choose the package for your application.

React

pnpm add @vellira-ui/react

React Native

pnpm add @vellira-ui/react-native

Add optional packages when you need icons or direct access to design tokens.

Icons

pnpm add @vellira-ui/icons

Tokens

pnpm add @vellira-ui/tokens

2. Add React Styles

React web applications should import the Vellira stylesheet once in the application entry point.

import '@vellira-ui/react/styles';

React Native apps do not need a stylesheet import. Native components use React Native styles and shared theme values internally.

3. Render Your First Component

React

import '@vellira-ui/react/styles';

import { Button, Checkbox, Input } from '@vellira-ui/react';
import { useState } from 'react';

export function SignInForm() {
  const [email, setEmail] = useState('');
  const [remember, setRemember] = useState(false);

  return (
    <form>
      <Input
        label='Email'
        value={email}
        onValueChange={setEmail}
        placeholder='name@example.com'
      />
      <Checkbox
        label='Remember me'
        description='Keep this browser signed in.'
        checked={remember}
        onCheckedChange={setRemember}
      />
      <Button color='primary' appearance='solid'>
        Continue
      </Button>
    </form>
  );
}

React Native

import { Button, Checkbox, Input } from '@vellira-ui/react-native';
import { useState } from 'react';
import { View } from 'react-native';

export function SignInScreen() {
  const [email, setEmail] = useState('');
  const [remember, setRemember] = useState(false);

  return (
    <View style={{ gap: 16, padding: 24 }}>
      <Input label='Email' value={email} onValueChange={setEmail} />
      <Checkbox
        label='Remember me'
        description='Keep this device signed in.'
        checked={remember}
        onCheckedChange={setRemember}
      />
      <Button color='primary' appearance='solid'>
        Continue
      </Button>
    </View>
  );
}

4. Continue Exploring

Goal	Next page
Explore component patterns	Component Overview
Build with React	React
Build with React Native	React Native
Use icons	Icons
Understand theming	Theme Architecture
Work with tokens directly	Design Tokens

Repository Development

Run the documentation site from the repository root:

pnpm docs:dev

Build it the same way CI does:

pnpm docs:build