Production-grade React Native design system with native-feeling components on iOS and Android.
_{Design tokens . Primitives . 23 components . Dark mode . A11y-first . Zero-config theming}

About . Quick Start . Components . Theming . Storybook . Development . License

---

What is native-ui?

@polprog/native-ui is a production-grade React Native component library and design system. Components are tuned to the platform defaults of iOS and Android so that any app built on top gets a native look and feel out of the box.

Area	What you get
Tokens	Colours (light + dark + high-contrast), typography scale (SF Pro / Roboto), spacing (4-pt grid), radius, shadow, motion, haptics
Primitives	Box, VStack, HStack, Text, Heading, Divider, PressableScale
Components	Button, Card, Checkbox, Chip, HeaderBar, IconButton, Input, ListItem, ListSection, ListSwitchItem, Radio, ScreenContainer, SearchBar, Section, SettingsRow, Select, Skeleton, Spinner, Switch, TextArea, Toast, Avatar, InputPrompt
Theming	NativeUIProvider, colour presets, system dark mode, font-scale tiers, runtime config
Platforms	iOS 13+ and Android 6+ (React Native 0.74+). All components render and behave natively on both.
Output	ESM + CJS + .d.ts, tree-shakeable, zero runtime dependencies beyond peers

Quick Start

npm install @polprog/native-ui react-native-reanimated react-native-safe-area-context

import{NativeUIProvider,Button,VStack,Text}from'@polprog/native-ui';exportdefaultfunctionApp(){return(<NativeUIProviderconfig={{colorMode: 'system',preset: 'default'}}><VStackspacing="md"padding="lg"><Textvariant="largeTitle">Hello, native-ui</Text><ButtononPress={()=>{}}>Get started</Button></VStack></NativeUIProvider>);}

Components

Browse the full catalogue with live examples, accessibility notes, and code snippets in Storybook.

Theming

Every component reads from a single theme object resolved by NativeUIProvider. Config is fully optional - defaults match the native platform on iOS 17 / Android 14.

<NativeUIProviderconfig={{colorMode: 'system',// 'light' | 'dark' | 'system'preset: 'default',// 'default' | 'ocean' | 'forest' | 'sunset' | ...fontScale: 'regular',// 'small' | 'regular' | 'large' | 'xlarge'highContrast: false,}}><App/></NativeUIProvider>

Access the theme anywhere with hooks:

const{ colors, spacing, typography }=useTheme();constsemantic=useSemantic();// { background, surface, primary, ... }

Storybook

Storybook hosts the full component gallery, interactive controls, and design token documentation. It auto-deploys to GitHub Pages on every push to master.

Live: https://polprog-tech.github.io/native-ui

Run locally:

npm install
npm run storybook

Development

Libraries/Native-UI/
├── packages/
│ └── native-ui/ The published library (@polprog/native-ui)
│ ├── src/ Tokens, primitives, components, theme
│ ├── __tests__/ Jest + @testing-library/react-native (188 tests)
│ ├── stories/ Storybook stories (source of truth for docs)
│ └── docs/ ARCHITECTURE.md, CONTRIBUTING.md
├── apps/
│ └── storybook/ Storybook host app (deploys to GitHub Pages)
├── .changeset/ Versioning + changelog automation
└── .github/workflows/ CI, release, deploy-storybook

Common tasks:

npm install # Bootstrap workspace
npm run typecheck --workspace=@polprog/native-ui # TypeScript strict
npm run lint --workspace=@polprog/native-ui # ESLint
npm run test --workspace=@polprog/native-ui # Jest (188 tests)
npm run build --workspace=@polprog/native-ui # tsup - ESM + CJS + d.ts
npm run storybook # Dev Storybook on :6006
npm run build-storybook # Static build

Releasing

Releases are automated via Changesets:

npx changeset # Describe the change (patch / minor / major)
git commit && git push # Open PR. On merge, release.yml publishes to npm with provenance.

License

MIT (c) POLPROG