BUILD
UGLY
BEAUTIFUL
Bring Neo Brutalism to React Native. Raw borders. Thick shadows. Flat colors. <Components /> that refuse to blend in.
// Card.ts
// Button.ts // Controls.ts
Checkbox
Radio
Switch
// Badges.ts Badge Badge Badge Badge
40+ Components Dark Mode TypeScript Expo Ready Fully Customizable Buttons Cards Modals Animations Zero Boilerplate 40+ Components Dark Mode TypeScript Expo Ready Fully Customizable Buttons Cards Modals Animations Zero Boilerplate
Try it right away!
Change code, play around, try whatever you want
Really? Another Library just for UI!
It's not just library! It's a system for your app.
Design Tokens, not hardcoded styles
- Centralized colors, spacing, radius, typography
- Update theme → entire app updates
- No scattered style overrides
Components that compose, not restrict
- Small building blocks
- Extend without rewriting
- No rigid “one way” patterns
Theming that actually scales
- Multiple themes support
- Runtime theme switching
- Consistent behavior across all components
Consistency by default
- Shared spacing + layout rules
- Predictable component behavior
- Design-system aligned
Developer-first ergonomics
- TypeScript-first APIs
- Clear props, minimal config
- Works with Expo out of the box
Built for real apps, not demos
- Handles complex layouts
- Reusable patterns
- Stable structure for large codebases
Enough Talking! Now, get started
Install it and use it. That's it
1. Install the required packages
npm install rn-neo react-native-reanimated yarn add rn-neo react-native-reanimated pnpm add rn-neo react-native-reanimated npx expo install rn-neo react-native-reanimated Check react-native-reanimated installation steps if you have trouble building the app.
2. Wrap your app in Provide component
// App.tsx
import { ThemeProvider } from 'rn-neo';
export default function App() {
return (
<ThemeProvider>
{/* your app */}
</ThemeProvider>
);
}3. Use the components
import { Button } from 'rn-neo';
<Button variant="primary">Press me</Button>Start building with rn-neo