Aurora Nexus Design System

A shared component library built on Gluestack UI v3, styled with NativeWind (Tailwind CSS for React Native), and written in TypeScript strict mode.

Overview

@aurora-nexus/aurora-nexus-design-system is the single source of truth for UI components consumed by:

• Aurora Identity — React/Vite web app
• Digital Security Planner — React Native/Expo app
• Marketing Site — Jekyll-based marketing site

Installation

pnpm add @aurora-nexus/aurora-nexus-design-system

Quick Start

Wrap your app with the GluestackUIProvider:

import { GluestackUIProvider } from '@aurora-nexus/aurora-nexus-design-system';

export default function App() {
  return (
    <GluestackUIProvider mode="light">
      {/* Your app content */}
    </GluestackUIProvider>
  );
}

Use components:

import { Button, ButtonText, Text, Box, VStack } from '@aurora-nexus/aurora-nexus-design-system';

function MyScreen() {
  return (
    <Box className="p-4">
      <VStack space="md">
        <Text>Hello, Aurora!</Text>
        <Button variant="solid" size="md">
          <ButtonText>Get Started</ButtonText>
        </Button>
      </VStack>
    </Box>
  );
}

Available Imports

| Path | Description | |------|-------------| | @aurora-nexus/aurora-nexus-design-system | Core components, tokens, and provider | | @aurora-nexus/aurora-nexus-design-system/styles.css | Required CSS for web apps |

Components

Layout

• Box — Basic layout container
• VStack — Vertical stack layout
• HStack — Horizontal stack layout
• Center — Center-aligned container

Typography

• Text — Text display
• Heading — Section headings

Actions

• Button — Action button with ButtonText, ButtonIcon, ButtonSpinner sub-components

Forms

• Input — Text input with InputField, InputSlot, InputIcon sub-components

Utilities

• Divider — Visual separator
• Spinner — Loading indicator

Containers

• Card — Content card

Design Tokens

All styling uses design tokens sourced from Figma. Tokens are available as CSS variables and can be used with Tailwind classes:

// Colors resolve to design tokens via CSS variables
<Box className="bg-primary text-on-primary" />

// Spacing, typography, and other tokens work the same way
<Text className="text-lg font-bold" />

Storybook

Browse components and design tokens in the Storybook.

Development

# Install dependencies
pnpm install

# Start Storybook
pnpm storybook

# Build the library
pnpm build

# Type check
pnpm typecheck

# Lint
pnpm lint

License

Proprietary — Aurora Nexus Corp