@vellira-ui/react-native

React Native implementation of the Vellira design system.

It extends shared contracts from @vellira-ui/types, uses shared tokens from @vellira-ui/tokens, shares renderer-neutral behavior through @vellira-ui/core, and keeps native rendering, accessibility, layout, and interaction behavior inside the React Native layer.

Installation

Requires React and React Native.

pnpm add @vellira-ui/react-native

Usage

Use the components directly in your React Native application:

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

export function Example() {
  const [email, setEmail] = useState('');
  const [accepted, setAccepted] = useState(false);

  return (
    <View style={{ gap: 16 }}>
      <Input
        label='Email'
        value={email}
        onValueChange={setEmail}
        placeholder='[email protected]'
      />
      <Checkbox
        label='Accept terms'
        description='Required to create an account.'
        checked={accepted}
        onCheckedChange={setAccepted}
      />
      <Button color='primary' appearance='solid'>
        Continue
      </Button>
    </View>
  );
}

Components

Inputs

• Button
• Checkbox
• Input
• Radio
• RadioGroup
• Select

Overlays

• Dropdown
• Tooltip
• Popover
• Modal

Forms

• FormField
• Tabs

Every public component includes React Native Storybook stories and Vitest unit tests.

For detailed props, shared types, examples, and compound component APIs, see Native Component API.

Infrastructure

The package also exports native infrastructure used by components and applications:

• Portal
• PortalProvider
• ThemeProvider
• useTheme
• nativeThemes

Documentation

• Getting Started
• React Native
• Native Component API

Storybook

Native stories live next to components as *.stories.tsx and are consumed by apps/native-storybook.

Run on-device Storybook from the workspace root:

pnpm --filter native-storybook start
pnpm --filter native-storybook ios
pnpm --filter native-storybook android

Development

pnpm --filter @vellira-ui/react-native build
pnpm --filter @vellira-ui/react-native test

Run the Expo playground:

pnpm --filter native-playground start