Native-grade polish, out of the box
A compact-density typography preset tuned for iOS and Android. Pairs with Space Grotesk or any font you ship.
Updated for 2026 MIT · React Native · v1.4.0
Native-UI is a cross-platform React Native design system by POLPROG - shipping native-feeling components on iOS and Android with production-grade visual polish out of the box.
Why Native-UI
Opinionated defaults. Unopinionated APIs. Zero-config visual parity - native on iOS, native on Android.
A compact-density typography preset tuned for iOS and Android. Pairs with Space Grotesk or any font you ship.
34 components + 9 primitives covering every screen surface - Buttons, Inputs, Sheets, Toasts, List rows, Skeletons, Confetti and beyond.
One typed token system for colors, typography, spacing, radii and elevation. Swap themes, density or brand without touching component code.
Regular (iOS-native 17pt) and Compact (15pt headline) presets with correct line-heights, tracking and weight families preconfigured.
Accessible roles, labels, hit-slops, focus management and reduced-motion support are defaults - not opt-ins.
Platform-aware behaviours (haptics, safe areas, modals, gestures) unified behind a single prop surface - works on both platforms without conditional code.
Every component is fully typed in TypeScript strict mode and covered by an extensive Jest suite - so consumers upgrade without fear.
Published as ESM + CJS with individual component exports. Ship only what your screen actually imports.
Components
Every surface a product needs - composed from the same theme, tokens and motion system.
Buttons
Chips
Input
Badges & Avatars
Skeleton
Toast
Typography
Ten variants with iOS-correct sizes, line-heights and tracking - plus a compact preset for content-dense screens. Pairs with Space Grotesk or any font you ship.
Design tokens
Colors, spacing, radii, elevation - typed, themeable, and accessible from every component.
xs
4px
sm
8px
md
12px
lg
16px
xl
24px
2xl
32px
3xl
48px
sm
6px
md
10px
lg
14px
xl
20px
full
9999px
Install
Drop in the provider, import components, done. No config, no theme-writing, no token-wrangling required.
import { NativeUIProvider, Button, Card, Heading, Stack } from '@polprog/native-ui';
export default function App() {
return (
<NativeUIProvider>
<Card>
<Stack gap="lg">
<Heading level={1}>Welcome</Heading>
<Button variant="primary" onPress={handlePress}>
Get started
</Button>
</Stack>
</Card>
</NativeUIProvider>
);
}
The difference
| Concern | Raw React Native | Native-UI |
|---|---|---|
| Typography scale | DIY per screen | 10 pre-tuned variants · 2 density presets |
| Design tokens | Manual StyleSheet constants | Strongly-typed theme · swap in one line |
| Accessibility | Opt-in per component | Labels · roles · hit-slop · reduce-motion by default |
| Platform parity | Platform.select scattered everywhere | Unified props, platform behaviours encapsulated |
| Forms & inputs | Build label / helper / error states yourself | Input, TextArea, Select, Checkbox, Radio, Switch ready |
| Motion & haptics | Install & wire up separately | PressableScale, Toast, Confetti, Skeleton - built-in |
| Visual consistency | Drifts across screens / teams | Production-grade parity enforced by tokens |
| Test safety net | Your responsibility | 188 unit tests shipped with the library |
Install Native-UI and spend your time on product, not pixels.