For React Web developers, shadcn/ui changed the game by offering copy-paste components you actually own. Today, we are bringing that same “source-distributed” philosophy to the mobile world with the release of Shadniwind.
Shadniwind is a collection of UI components specifically built for React Native and React Native Web. It isn’t just a wrapper; it is built from the ground up to leverage the cutting-edge performance of Unistyles v3 and the New Architecture.
Why Shadniwind?
Mobile styling has traditionally been fragmented. Shadniwind solves this by combining the clean aesthetic of shadcn with the raw performance of modern React Native tools.
- Source Distributed: Just like shadcn/ui, you copy the components into your project. You have full control over the code, with no black-box npm dependencies.
- Unistyles v3: We utilize the latest version of Unistyles for high-performance styling, seamless theming, and responsive design.
- Nitro-Powered: Built on
for ultra-fast bridge communication.1react-native-nitro-modules
- Native-First: Optimized for iOS and Android (New Architecture) while maintaining excellent support for React Native Web.
System Requirements
Shadniwind is built for the future of React Native. As such, it requires a modern environment:
- React Native: Version 0.78+ (New Architecture enabled).
- Expo: SDK 53+ (Dev Client or Prebuild).
Note: Expo Go is not supported due to the usage of native dependencies like Nitro Modules.
Getting Started
Integration is designed to be familiar if you have used shadcn before. You simply configure your
|
1 |
components.json |
to point to our registry.
1. Configure the Registry
Add the following to your
|
1 |
components.json |
file:
|
1 2 3 4 5 6 |
{ "$schema": "https://ui.shadcn.com/schema.json", "registries": { "shadniwind": "https://deicod.github.io/shadniwind/v1/registry.json" } } |
2. Initialization
Shadniwind requires a specific initialization order to ensure themes and portals work correctly:
- Install the
registry item.1tokens
- Import
exactly once at your app’s entry point.1lib/unistyles.ts
- Setup the
and1PortalProvider(essential for Dialogs and Tooltips).1PortalHost
For the full installation guide, please check the official README.
Join the Future of Native UI
We are excited to see what you build with this. Shadniwind is open source. If you are ready to move your React Native UI to the New Architecture with style, give it a try.
#shadniwind #reactnative #unistyles #expo #mobiledev #opensource #webdev #ui #shadcn #frontend #activitypub #fediverse