Install Native-UI in under a minute

1. 1

   Install the package

   npm install @polprog/native-ui

2. 2

   Load Space Grotesk (optional - recommended)

   npx expo install @expo-google-fonts/space-grotesk expo-font

3. 3

   Wrap your app

   import { NativeUIProvider } from '@polprog/native-ui';
   
   export default function App() {
     return (
       <NativeUIProvider>
         <Root />
       </NativeUIProvider>
     );
   }

4. 4

   Compose screens

   import { Button, Card, Heading, Stack } from '@polprog/native-ui';
   
   export function Welcome() {
     return (
       <Card>
         <Stack gap="lg">
           <Heading level={1}>Welcome</Heading>
           <Button variant="primary">Get started</Button>
         </Stack>
       </Card>
     );
   }

Theming New

Switch light, dark or system instantly, or swap the whole look with a theme variant. Native-UI ships two: Aurora (the original) and the new Bloom (soft, rounded, violet). Each variant carries its own accent presets, and customAccent still overrides a single colour. You only pass what changes.

import { NativeUIProvider, bloomFontFamilies } from '@polprog/native-ui';

export default function App() {
  return (
    <NativeUIProvider
      config={{
        theme: 'bloom',        // 'default' (Aurora) | 'bloom'
        colorMode: 'system',   // 'light' | 'dark' | 'system'
        preset: 'violet',      // accent preset for the active variant
        fontFamilies: bloomFontFamilies,
      }}
    >
      <Root />
    </NativeUIProvider>
  );
}

Accent presets

Design tokens

Every surface - colour, spacing, radius, typography, shadow - is a named token. Components only read tokens; changing a token propagates system-wide.

import { useTheme } from '@polprog/native-ui';

function Banner() {
  const t = useTheme();
  return (
    <View style={{ backgroundColor: t.colors.accent, padding: t.spacing.lg, borderRadius: t.radii.lg }} />
  );
}

Accessibility

Every interactive component ships with accessibility defaults: labels, hit-slops, focus order, screen-reader roles, reduce-motion respect. You can override any default per instance.

<Button
  variant="primary"
  accessibilityLabel="Save profile and continue"
  accessibilityHint="Saves your changes and moves to the next step"
  onPress={save}
>Save</Button>

Platform behaviour

Components adapt to the host platform: iOS uses SF-native press feedback and sheet sizing, Android uses ripple and Material elevation. You get platform correctness without writing platform code.

// The same component renders correctly on both platforms.
<BottomSheet snapPoints={['40%', '90%']}>
  <Heading>Choose a plan</Heading>
</BottomSheet>

Changelog

1. v1.7.1

   2026-07-31

   Stable

   • Fixed

     Add the react-native condition to the root exports entry so Metro resolves the TypeScript source instead of the dist bundles. Metro in React Native 0.84 enables package exports by default, and an exports map takes precedence over the top-level react-native field, so consumers were bundling both dist flavours (.mjs and .js) at once and needed per-app resolveRequest workarounds.

2. v1.7.0

   2026-06-23

   Stable

   • Added

     Add the Bloom theme variant and a theme config key. NativeUIProvider now accepts theme: 'default' | 'bloom' | ThemeVariant. A theme variant bundles a complete visual identity (colour palette, corner radii, elevation, type density, and default fonts) behind one name and restyles every component. The new Bloom variant is a soft, rounded look: violet/pink accents, rounded corners, purple-tinted neutrals, and Outfit + Plus Jakarta Sans typography. The original look ships unchanged as the Aurora ('default') variant, so existing apps are unaffected. FontFamilies gains an optional display group so a variant can pair a heading family with a separate body family. New exports: THEME_VARIANTS, defaultThemeVariant, bloomThemeVariant, resolveThemeVariant, defaultColorPalette, bloomColorPalette, BLOOM_PRESETS, bloomFontFamilies, and the types ThemeVariant, ThemeVariantName, ColorPalette, TextRamp, SemanticRamp, NeutralRamp, BloomPreset, BorderRadiusScale.

See full changelog →