Urbint Component Library

An enterprise-ready React Native component library built with Unistyles 3.0 for consistent styling across all platforms.

Features

• 🎨 40+ Production-Ready Components - Comprehensive set of UI components
• 🎭 Light & Dark Theme Support - Automatic theme switching with system preferences
• 📱 Cross-Platform - Works on iOS, Android, and Web
• 🔧 TypeScript First - Full TypeScript support with excellent DX
• 📖 Storybook Integration - Visual component documentation
• 🎯 Enterprise Design System - Based on Urbint design tokens

Installation

npm install @urbint/cl react-native-unistyles
# or
yarn add @urbint/cl react-native-unistyles

# For local development, you can link:
npm link ../path-to-urbint-cl

Quick Start

import React from 'react';
// Import styles first (required for Unistyles)
import '@urbint/cl/styles';

import { Button, Card, Text, VStack, ToastProvider, useToast } from '@urbint/cl';

function App() {
  const toast = useToast();

  return (
    <ToastProvider>
      <VStack space="lg" p="lg">
        <Card>
          <Text>Welcome to Urbint Component Library!</Text>
        </Card>
        <Button onPress={() => toast.show({ title: 'Hello!', status: 'success' })}>
          Show Toast
        </Button>
      </VStack>
    </ToastProvider>
  );
}

Components

Layout

• Box - Fundamental layout component
• Center - Centers children horizontally and vertically
• HStack - Horizontal stack layout
• VStack - Vertical stack layout
• Grid / GridItem - CSS-like grid layout
• Divider - Visual separator

Typography

• Text - Body text with variants (body, caption, label, small)
• Heading - Headings (h1, h2, h3, h4)
• Link - Styled link component

Form Controls

• Input - Text input with variants
• Textarea - Multi-line text input
• Checkbox / CheckboxGroup - Checkbox controls
• Radio / RadioGroup - Radio button controls
• Select - Dropdown selection
• Switch - Toggle switch
• Slider - Range slider
• FormControl - Form wrapper with label/error states

Feedback

• Alert - Status messages
• Toast / ToastProvider - Non-blocking notifications
• Progress - Linear and circular progress indicators
• Spinner - Loading spinner
• Skeleton / SkeletonText - Loading placeholders

Overlays

• Modal - Dialog overlay
• Drawer - Slide-in panel
• AlertDialog - Confirmation dialog
• ActionSheet - Bottom action sheet
• Popover - Floating content panel
• Menu - Dropdown menu
• Tooltip - Informational popup

Data Display

• Avatar / AvatarGroup - User profile pictures
• Badge - Status indicators
• Card - Content container
• Table - Data table
• Image - Enhanced image component
• Icon - Vector icon component

Actions

• Button - Primary action component
• Pressable - Enhanced pressable
• Fab - Floating Action Button
• Accordion - Expandable sections

Utilities

• Portal / PortalProvider - Portal rendering

Design Tokens

The library uses design tokens based on the Urbint Design System:

Colors

// Brand
brand.navy: '#003F53'
brand.blue: '#00A0CC'

// Feedback
feedback.info.content: '#3C87DD'
feedback.success.content: '#2BA329'
feedback.warning.content: '#D69600'
feedback.error.content: '#E7183E'

// Badges
badge.red: '#CF3D3D'
badge.orange: '#B75E0B'
badge.yellow: '#E8BA30'
badge.blue: '#3E70D4'
badge.green: '#238914'

Typography

• H1 PageHeading: 26px, Regular (400)
• H2 SectionHeading: 22px, Semi-Bold (600)
• H3 SectionSubheading: 20px, Semi-Bold (600)
• H4 Subheading: 18px, Semi-Bold (600)
• Body: 16px, Regular (400)
• Caption: 13px, Regular (400)

Spacing

spacing['0.5x']: 2    // 0.125rem
spacing.base: 4       // 0.25rem
spacing['2x']: 8      // 0.5rem
spacing['3x']: 12     // 0.75rem
spacing['4x']: 16     // 1rem
spacing['6x']: 24     // 1.5rem
spacing['8x']: 32     // 2rem
spacing['12x']: 48    // 3rem
spacing['18x']: 72    // 4.5rem

Elevation

• 5: Slight shadow (borders alternative)
• 10: Small elements (buttons, tooltips)
• 20: Medium elements (cards, nav-bars)
• 30: Overlay panels and toasts
• 40: Modals

Theming

The library supports light and dark themes that automatically adapt to system preferences:

import { StyleSheet, useUnistyles } from 'react-native-unistyles';

function MyComponent() {
  const { theme } = useUnistyles();
  
  return (
    <View style={{ backgroundColor: theme.colors.background.primary }}>
      <Text style={{ color: theme.colors.text.primary }}>
        Themed content
      </Text>
    </View>
  );
}

Storybook

Run Storybook to explore all components:

npm run storybook
# or
npm run storybook:ios
npm run storybook:android

Development

# Install dependencies
npm install

# Start the development server
npm start

# Run on iOS
npm run ios

# Run on Android
npm run android

# Type check
npm run typecheck

Requirements

• React Native 0.81+
• Expo SDK 54+
• Node.js 20+

AI/LLM Documentation

For AI assistants and LLMs, we provide comprehensive documentation in a single file:

• llms.txt - Complete API reference, examples, and usage patterns optimized for LLM consumption

This file contains all component APIs, props, examples, design tokens, theming guide, and best practices in a structured format that AI assistants can use to help developers.

License

MIT © Urbint