Components you never knew you needed.

Beautifully designed, highly customizable, Open Source React components based on Tailwind and Framer Motion.

Components

Blocks

Utilities

Stories

Enterprise ready Open-Source components

Our collection of enterprise-grade, open-source components provide the building blocks you need to create beautifully designed, scalable, high-performance applications.

Getting Started 🚀

Installing Reablocks

Install Reablocks & Tailwind into your React project to get started.

Setup your Tailwind config file with our default color tokens using the link below.

Learn more

$ npm install reablocks -S
$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init

Creating a custom theme

Extend the default theme to fit your application's unique design language by using extendTheme.

Reablocks provides the ability to customize the style of each individual component using Tailwind, giving you the ease and flexibility to match any design.

Learn more

import { theme, extendTheme, PartialReablocksTheme } from 'reablocks';

const partialTheme: PartialReablocksTheme = {
  components: {
    button: {
      base: 'bg-lime-600 text-gray-300',
      variants: {
        filled: 'bg-lime-600 hover:bg-lime-700',
        outline: 'bg-transparent border-lime-600 border',
        text: 'bg-transparent border-0'
      },
      sizes: {
        small: 'p-2',
        medium: 'p-3',
        large: 'p-4'
      }
    }
  }
};
  
export const customTheme = extendTheme(theme, partialTheme)

Adding your theme to your application

Wrap your application with ThemeProvider and pass in your new custom theme. This provider applies styling to all your components, ensuring a consistent look and feel.

Learn more

import { ThemeProvider } from 'reablocks'
import { customTheme } from './theme'
                  
export const App = () => {
  <ThemeProvider theme={theme}>
    <YourComponents />
  </ThemeProvider>
};