@frosted-ui/react-native

A beautiful, accessible component library for React Native with a built-in design system.

Installation

For Bare React Native Projects

1. Install the package and its peer dependencies:

npm install @frosted-ui/react-native
# or
yarn add @frosted-ui/react-native
# or
pnpm add @frosted-ui/react-native

2. Install peer dependencies:

npm install react react-native react-native-reanimated react-native-safe-area-context react-native-screens react-native-svg lucide-react-native
# or
yarn add react react-native react-native-reanimated react-native-safe-area-context react-native-screens react-native-svg lucide-react-native
# or
pnpm add react react-native react-native-reanimated react-native-safe-area-context react-native-screens react-native-svg lucide-react-native

3. Setup React Native Reanimated: Follow the React Native Reanimated installation guide.

4. Setup React Native Screens: Follow the React Native Screens installation guide.

5. Setup React Native SVG: Follow the React Native SVG installation guide.

For Expo Projects

The package works with Expo projects as well. Follow the same installation steps above, and Expo will handle the native module linking automatically.

Usage

import { Button, Text, ThemeProvider } from '@frosted-ui/react-native';

export default function App() {
  return (
    <ThemeProvider>
      <Button variant="surface" size="2">
        <Text>Hello World</Text>
      </Button>
    </ThemeProvider>
  );
}

Theme Management

The library provides a ThemeProvider for managing light/dark mode:

import { ThemeProvider, useTheme } from '@frosted-ui/react-native';

function MyComponent() {
  const { colorScheme, toggleColorScheme } = useTheme();

  return (
    <Button onPress={toggleColorScheme}>
      <Text>Current theme: {colorScheme}</Text>
    </Button>
  );
}

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

Accessing Theme Colors

Use useThemeTokens to access the design system colors in your components:

import { useThemeTokens } from '@frosted-ui/react-native';

function MyComponent() {
  const { colors, isDark } = useThemeTokens();

  return (
    <View style={{ backgroundColor: colors.background }}>
      <Text style={{ color: colors.palettes.gray['12'] }}>Hello World</Text>
    </View>
  );
}

Requirements

• React >= 18.0.0
• React Native >= 0.70.0
• React Native Reanimated >= 3.0.0
• React Native Safe Area Context >= 4.0.0
• React Native Screens >= 3.0.0
• React Native SVG >= 13.0.0
• Lucide React Native >= 0.300.0

Components

This library includes a comprehensive set of UI components:

• Accordion
• Alert Dialog
• Avatar
• Badge
• Button
• Card
• Checkbox
• Dialog
• Dropdown Menu
• Hover Card
• Icon
• Label
• Popover
• Progress
• Radio Group
• Select
• Separator
• Skeleton
• Spinner
• Switch
• Tabs
• Text
• Text Field
• Text Area
• Tooltip

Styling

This library uses React Native's built-in styling system with a comprehensive design system. All components support light and dark mode out of the box, and include multiple color palettes (28+ accent colors) and variants.

AI/LLM Documentation

This package includes comprehensive documentation designed for AI agents and LLMs to generate code using Frosted UI. When installed, the docs are available at:

node_modules/@frosted-ui/react-native/docs/llm/
├── README.md           # Overview and quick reference
├── COLOR_SYSTEM.md     # Color palettes, shades, variants, accessibility
├── TYPOGRAPHY.md       # Typography scale, font weights, components
├── COMPONENTS.md       # Full component API reference
└── DESIGN_PATTERNS.md  # UX patterns, layout composition, visual design

AI agents should read these files to understand how to properly use the design system when generating React Native applications.

License

MIT