Vajra UI

Vajra UI is a token driven component library for React Native, published under my Devraj Labs org. The idea is simple: bring your own brand, override what you need, build the rest on top.

The problem

Most React Native apps end up with magic strings scattered through their styles and no real enforcement of the design system. Spacing, colors and radii get typed in by hand, drift apart over time, and nothing catches it. Existing design systems fix the consistency but drag in providers, themes and dependency trees you did not ask for.

Why Vajra UI

• Token first. Every prop (bg, p, rounded, color) maps to a design token, never a raw value.
• Themeable. Override colors, spacing and border radii via createVajraTheme, switch themes at runtime.
• Typed end to end. Tokens are typed unions, so no magic strings slip through and a wrong value fails at compile time.
• Headless core. Unstyled primitives in Vajra UI Core if you want full control with no theme at all.
• Zero opinions on navigation. Works with any navigation library.

Quick start

Wrap the app in VajraProvider:

import { VajraProvider } from '@devraj-labs/vajra-ui';

export default function App() {
  return (
    <VajraProvider colorScheme="light">
      <YourApp />
    </VajraProvider>
  );
}

Build with token props:

import { Box, Text, Button, Badge } from '@devraj-labs/vajra-ui';

export function MyScreen() {
  return (
    <Box p="s-4" gap="s-3">
      <Text variant="subheading">Hello</Text>
      <Badge label="New" bg="primary" />
      <Button label="Get started" onPress={() => {}} />
    </Box>
  );
}

Read tokens directly in your own components with useVajraTheme():

import { useVajraTheme } from '@devraj-labs/vajra-ui';
import { View } from 'react-native';

export function MyCard() {
  const { colors, spacing, rounded } = useVajraTheme();

  return (
    <View
      style={{
        backgroundColor: colors.surface,
        padding: spacing['s-4'],
        borderRadius: rounded['r-3'],
      }}
    />
  );
}

Theming

Themes are built with createVajraTheme and can override just the parts you care about, colors, spacing, border radii, typography, custom fonts, all optional and independently overridable. Runtime theme switching works by holding the color scheme in state and rebuilding the theme on change, so a light and dark mode toggle is a few lines, not a rewrite.

Custom tokens (colors, spacing, radii, typography variants) are added by augmenting the library's TypeScript interfaces (IVajraCustomColors, IVajraSpacingTokens, and so on), so your own tokens show up typed and autocompleted through the same useVajraTheme() hook, without touching the library's own defaults.

Typography and italics

Custom typography includes per platform italic handling. iOS needs an explicit fontStyle: 'italic' even when a named italic font file is registered, while Android needs that same prop suppressed or it applies a synthetic skew on top of the named font and breaks the rendering. Vajra UI resolves this internally so <Text fontStyle="italic"> renders correctly on both platforms without any manual Platform.select branching.

Design tokens

Colors: primary / primaryMuted / primarySubtle, secondary / secondaryMuted / secondarySubtle, a full text scale, a surface scale from sunken to overlay, a border scale, and error, success, warning and info feedback scales.

Spacing: s-0 through s-16, from 0px to 64px, in the increments used across the component set.

Border radius: r-0 through r-10, plus r-full for pills and circular elements.

Typography: display, h1 / h2 / h3, subheading, body / bodyMedium / bodySmall, button, label / labelMedium, and caption.

Architecture

The library is layered so nothing imports across boundaries: core holds token aware wrappers (Box, Text, Pressable), components holds opinionated components (Button, Badge, TabBar) built on core, and vajra-theme holds the default tokens, VajraProvider and useVajraTheme. core itself is built on Vajra UI Core, the separate zero dependency primitives package I built first. Core works on its own for anyone who just wants the layout shorthand without any theming layer.

Status

Published on npm at v1.1.0.

Install

npm install @devraj-labs/vajra-ui

Docs

devraj-labs.github.io/vajra-ui