DAdanstepanov·Sep 18, 2024Submission
Show HN: NativeWindUI – Native Feeling TailwindUI for React Native
Hey HN! We're Zach and Dan, and today we're excited to introduce NativeWindUI, a UI library that helps you build beautiful apps for all native platforms through the power of Tailwind CSS and React Native. With this familiar set of tools, you can now easily deliver a great experience that feels native to each platform.
As developers, we've always been frustrated by the trade-offs between development speed and native user experience. We've seen countless apps that feel "off" because they prioritized cross-platform consistency over platform-specific design patterns. It has become painfully clear to us that simply having access to native tooling does not guarantee a native feeling experience.
Dan, the author of Create Expo Stack [1] and a maintainer of NativeWind (Tailwind for React Native) [2], has been a vocal advocate for the importance of
Read the rest
native feel in apps. He gave a talk on this topic at Chain React 2024, highlighting how crucial it is for user engagement and retention [3]. Zach, the author of React Native Reusables (shadcn for React Native) [4] and React Native Primitives (headless components for React Native, based on RadixUI) [5], has spent years working on accessible and customizable UI tools that target every platform.
We believe that good design is not just about aesthetics; it's about trust. In the digital world, design is often the first point of contact between you and a prospective user. Poor design can make your app seem unstable or untrustworthy, while good design indicates attention to detail and care for the user experience.
NativeWindUI aims to solve these problems. It's built on top of NativeWind, allowing you to use Tailwind CSS classes in React Native, but with a crucial difference: it respects platform-specific design patterns. Here's a simple example:
```
import { View } from 'react-native';
import { DatePicker } from '~/components/nativewindui/DatePicker';
function DatePickerExample() {
const [date, setDate] = React.useState(new Date());
return (
<View className="items-center">
<DatePicker
value={date}
mode="datetime"
onChange={(ev) => {
setDate(new Date(ev.nativeEvent.timestamp));
}}
/>
</View>
);
}
```
This code will render a date picker that looks and feels native on both iOS and Android, while still allowing you to customize it using familiar Tailwind classes. This same code renders differently on different platforms. See for yourself: https://nativewindui.com/component/date-picker
Key features of NativeWindUI include:
- Platform-specific user flows and components that adhere to iOS and Android design guidelines
- 30+ copy-pastable components and 8 user flows/templates, no need to import from a library, the code is yours
- A powerful CLI to help you easily install component code and any native dependencies
- Smooth animations and transitions
- Easy theming and dark mode support through `tailwind.config.js`
We've been working on this since the beginning of the year, refining it over numerous versions, and now we’re making it available for you to use. We believe NativeWindUI can significantly speed up React Native development without compromising on the native feel that users expect and deserve.
You can start exploring NativeWindUI today through our demo app:
`npx create-expo-stack@latest --nativewindui`
Check out our documentation at https://nativewindui.com and the GitHub repository for our free components at https://github.com/roninoss/nativewindui
We're excited to hear your feedback and we'd love to see what you build with NativeWindUI!
PS: Which components or templates would you like to see us build next?
References
[1] https://rn.new
[2] https://github.com/nativewind/nativewind
[3] https://www.youtube.com/watch?v=3UEQhdaWwus
[4] https://github.com/mrzachnugent/react-native-reusables
[5] https://github.com/roninoss/rn-primitives