Rebase UI

A production-ready React Native UI component library with theming support, built for developers who don't want to reinvent the wheel.

Installation

npm install rebase-ui
# or
yarn add rebase-ui

Peer Dependencies

npm install react-native-svg

Quick Start

import { ThemeProvider, Button, useTheme } from 'rebase-ui';


export default function App() {
  return (
    <ThemeProvider>
      <YourApp />
    </ThemeProvider>
  );
}


function YourComponent() {
  const { theme } = useTheme();
  
  return (
    <Button 
      title="Press me" 
      onPress={() => console.log('Pressed')}
    />
  );
}

Features

• Consistent theming system - Light/dark modes with proper colour tokens
• Spacing scale - 4px increment system that actually makes sense
• Platform shadows - Works properly on both iOS and Android
• TypeScript first - Proper type definitions, not afterthoughts
• Zero configuration - Sensible defaults that work out of the box

Components

Button

Standard button with theming support.

<Button 
  title="Primary Button"
  onPress={() => {}}
  variant="primary" // or "secondary"
/>

Theme System

The theming system uses a factory function to generate consistent themes:

import { createTheme } from 'rebase-ui';

// Default themes
const lightTheme = createTheme('light');
const darkTheme = createTheme('dark');

// Custom overrides
const customTheme = createTheme('light', {
  colors: {
    primary: '#007AFF',
  },
  spacing: {
    custom: 18,
  }
});

Spacing Scale

spacing: {
  0: 0,    1: 4,    2: 8,    3: 12,   4: 16,
  5: 20,   6: 24,   8: 32,   10: 40,  12: 48,  16: 64
}

Border Radius

radius: {
  none: 0, sm: 4, md: 8, lg: 12, xl: 16, full: 9999
}

Shadows

shadows: {
  sm: { /* subtle depth */ },
  md: { /* standard cards */ }
}

Theme Provider

import { ThemeProvider, useTheme } from 'rebase-ui';

function App() {
  return (
    <ThemeProvider initialMode="light">
      <YourApp />
    </ThemeProvider>
  );
}

// In components
function MyComponent() {
  const { theme, isDark, toggleTheme } = useTheme();
  
  return (
    <View style={{ backgroundColor: theme.colors.surface }}>
      {/* Your content */}
    </View>
  );
}

Usage Examples

Custom Styling

import { StyleSheet } from 'react-native';
import { useTheme } from 'rebase-ui';

function Card({ children }) {
  const { theme } = useTheme();
  
  const styles = StyleSheet.create({
    card: {
      backgroundColor: theme.colors.surface,
      borderRadius: theme.radius.lg,
      padding: theme.spacing[4],
      ...theme.shadows.sm,
    }
  });
  
  return <View style={styles.card}>{children}</View>;
}

Typography

function TextExample() {
  const { theme } = useTheme();
  
  return (
    <Text style={[
      theme.typography.heading1,
      { color: theme.colors.onSurface }
    ]}>
      Heading Text
    </Text>
  );
}

API Reference

createTheme(mode, overrides?)

Creates a theme object with the specified mode and optional overrides.

• mode: 'light' | 'dark'
• overrides: Partial<Theme> - Optional theme customisations

useTheme()

Hook that returns the current theme context:

const { 
  theme,      // Current theme object
  isDark,     // Boolean indicating dark mode
  toggleTheme // Function to toggle between light/dark
} = useTheme();

Theme Object Structure

interface Theme {
  colors: ThemeColors;
  typography: Typography;
  spacing: Record<string | number, number>;
  radius: Record<string, number>;
  shadows: Record<string, object>;
}

Best Practices

• Always use theme tokens instead of hardcoded values
• Stick to the spacing scale for consistent visual rhythm
• Test both light and dark themes during development
• Use semantic colour names from the theme
• Keep theme overrides minimal

Requirements

• React Native >= 0.70
• React >= 18.0
• TypeScript >= 4.5 (recommended)

Contributing

1. Fork the repository
2. Create your feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a pull request

Licence

MIT © cmcWebCode40

Links

• Documentation
• GitHub
• npm