This is a collection of components - built with Tailwind CSS - for React Native developers that they can use in their own projects.
Crucially, unlike most UI frameworks, this isn’t an NPM library. The components are designed to be copied and pasted into your project and used as a base for your own design system that can be customised and extended. This means you don’t need to worry about upstream updates - the code is fully yours and you are in control.
I’m still actively working on them and expect there to be bugs and issues. In the meantime please feel free to use them in your project (and feel free to send me a message if you have any feedback or suggestions).
There is also a templates section containing full screens to copy and paste using the components as a base - currently this contains some authentication screens but the plan is to add more templates in the near future.
Installing the components is pretty simple:
Setting up import paths will make using components much easier - it allows you to import components using an @alias like this:
Rather than having to use relative imports, like this:
It’s completely optional - you can import them however suits your project - but highly recommended to make your life easier!
First go to your tsconfig.json file and set your baseUrl to be the root of your project:
Then go to the paths object and add your src folder to the paths object like so:
This will alias everything in your src folder so it can be imported using the @ notation. For example if you have a folder called “features” you can then import something from that folder like so:
Most components accept some sort of style prop, which allows you to pass in a set of tailwind classes like so:
These styles will be appended to the base styles of the component, so you can override existing styles as well as add new ones.
If you prefer you can also pass in a normal style object like so:
If you encounter any issues, please open an issue on Github. If you have more general feedback (such as any components you’d like to see!) please send us a message.