Reablocks npm tag

Stop coding from scratch.
Build faster.
Launch sooner.

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

Components

Blocks

Stories

Utilities

Buttons
Avatars
Notification
Fields
Tabs
Checkboxes
Buttons
Avatars
Notification
Fields
Tags
Toggle
Range
Radio buttons
Menu
Badges
Tags
Toggle
Range
Radio buttons
GitHub stars

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>
};