Request, Deliver, Revise, Done

Get unlimited UI Design & React Development for a fixed monthly price

50% off your first month

Tailwind Components for React Native

About the Components

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.

Getting Started

Installing the components is pretty simple:

Select your desired component
Go to the base component section and copy and paste it into your project
Install any required dependencies
Setup import paths (see below)
Import the component where required

How to setup import paths

Setting up import paths will make using components much easier - it allows you to import components using an @alias like this:

import { Button } from "@/components/button;

Rather than having to use relative imports, like this:

import { Button } from "../../src/components/button;

It’s completely optional - you can import them however suits your project - but highly recommended to make your life easier!

How to setup import paths in Expo

First go to your tsconfig.json file and set your baseUrl to be the root of your project:

// tsconfig.json
{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "baseUrl": ".",
	//
  }
}

Then go to the paths object and add your src folder to the paths object like so:

// tsconfig.json
{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

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:

import { ExampleComponent } from "@/features/example-component";

Customising styles

Most components accept some sort of style prop, which allows you to pass in a set of tailwind classes like so:

import { Button as MyButton } from "@/components/button;
import tailwind from "twrnc";

export const Button = () => {
	return (
		<MyButton text="Button" style={tailwind`bg-red-400`} />
	)
}

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:

import { Button as MyButton } from "@/components/button;
import tailwind from "twrnc";

export const Button = () => {
	return (
		<MyButton text="Button" style={{ backgroundColor: "red" }} />
	)
}

Feedback & Suggestions

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.