Reablocks is a premium open-source React component library with 70+ accessible components, 12 full-page blocks, AI-native skill packs, and theming built on Tailwind CSS v4 and Motion.

How do I install Reablocks?

Install via npm install reablocks (or pnpm/yarn/bun equivalent), import the prebuilt stylesheet, and wrap your app in the ThemeProvider component.

Is Reablocks free to use?

Yes — Reablocks is open source under the Apache 2.0 license and free for personal and commercial projects.

Does Reablocks work with AI coding agents?

Yes. Reablocks ships machine-readable skill packs (with prop schemas, usage examples, and prebuilt blocks) consumed natively by Claude Code, Cursor, GitHub Copilot, and other AI agents.

How is theming handled in Reablocks?

Themes are plain TypeScript objects you extend with extendTheme. Override design tokens for color, radius, density, or any per-component slot. Light and dark variants ship by default.

Stop coding from scratch.Build faster.Launch sooner.

From button to full dashboard in an afternoon. A premium React library with 70 components and 12 page-level blocks.

Get started Star186

v10.2.0· released about 16 hours ago

data · form · layers · layout · typography

foundation · administration · authentication

every component, in every state

Portal · Theme · useId · slots · …

Every section on this page is a real component.

No screenshots. No iframes. Type, click, drag. The same primitives ship with the package.

Filled

Outline

Text

Icon

Button→ Docs

Features

Accessible

Tree-shakable

Themed

Framework

React

Vue

Svelte

Solid

Price range$20 – $70

Checkbox · Radio · Range→ Docs

↑

↓

navigate

↵

select

esc

CommandPalette→ Docs

GET /api/v1/me200 OK

root{}(5 keys)

JsonTree→ Docs

Yesterday

Last 3 Days

Last 7 Days

Last 14 Days

Last 30 Days

Previous Week

Last Week

2026-05-29 → 2026-06-04

Calendar→ Docs

Mar 1 · 8:14 AMAustin opened RBK-184 · Add CommandPalette hotkeys

Mar 1 · 10:42 AMJordan moved Backlog → In Progress

Scope looks good — let's also wire ⌘K to open the palette.

Mar 2 · 4:08 PMAustin merged #284 · In Progress → Done

Stepper→ Docs

Edit live. See the result. Copy the snippet.

A real react-live-runner instance with starter examples. Same APIs you'd use in production.

buttons.tsx

import { Button, Field } from 'reablocks';


render(
  <div className="flex flex-col gap-4 p-6">
    <Field label="Filled" direction="horizontal" labelClassName="w-24 shrink-0">
      <div className="flex gap-2 flex-wrap">
        <Button size="medium" color="primary">Primary</Button>
        <Button size="medium" color="secondary">Secondary</Button>
        <Button size="medium" color="success">Success</Button>
        <Button size="medium" color="warning">Warning</Button>
        <Button size="medium" color="error">Error</Button>
      </div>
    </Field>
    <Field label="Outline" direction="horizontal" labelClassName="w-24 shrink-0">
      <div className="flex gap-2 flex-wrap">
        <Button size="medium" variant="outline" color="primary">Primary</Button>
        <Button size="medium" variant="outline" color="secondary">Secondary</Button>
        <Button size="medium" variant="outline" color="success">Success</Button>
        <Button size="medium" variant="outline" color="warning">Warning</Button>
        <Button size="medium" variant="outline" color="error">Error</Button>
      </div>
    </Field>
    <Field label="Text" direction="horizontal" labelClassName="w-24 shrink-0">
      <div className="flex gap-2 flex-wrap">
        <Button size="medium" variant="text" color="primary">Primary</Button>
        <Button size="medium" variant="text" color="secondary">Secondary</Button>
        <Button size="medium" variant="text" color="success">Success</Button>
        <Button size="medium" variant="text" color="warning">Warning</Button>
        <Button size="medium" variant="text" color="error">Error</Button>
      </div>
    </Field>
  </div>
);

import { Button, Field } from 'reablocks';

render(
  <div className="flex flex-col gap-4 p-6">
    <Field label="Filled" direction="horizontal" labelClassName="w-24 shrink-0">
      <div className="flex gap-2 flex-wrap">
        <Button size="medium" color="primary">Primary</Button>
        <Button size="medium" color="secondary">Secondary</Button>
        <Button size="medium" color="success">Success</Button>
        <Button size="medium" color="warning">Warning</Button>
        <Button size="medium" color="error">Error</Button>
      </div>
    </Field>
    <Field label="Outline" direction="horizontal" labelClassName="w-24 shrink-0">
      <div className="flex gap-2 flex-wrap">
        <Button size="medium" variant="outline" color="primary">Primary</Button>
        <Button size="medium" variant="outline" color="secondary">Secondary</Button>
        <Button size="medium" variant="outline" color="success">Success</Button>
        <Button size="medium" variant="outline" color="warning">Warning</Button>
        <Button size="medium" variant="outline" color="error">Error</Button>
      </div>
    </Field>
    <Field label="Text" direction="horizontal" labelClassName="w-24 shrink-0">
      <div className="flex gap-2 flex-wrap">
        <Button size="medium" variant="text" color="primary">Primary</Button>
        <Button size="medium" variant="text" color="secondary">Secondary</Button>
        <Button size="medium" variant="text" color="success">Success</Button>
        <Button size="medium" variant="text" color="warning">Warning</Button>
        <Button size="medium" variant="text" color="error">Error</Button>
      </div>
    </Field>
  </div>
);

preview · ThemeProviderlive

Filled

Outline

Text

Reablocks themes are objects you extend, not files you rewrite.

Tailwind tokens for color, type, and radius. Merge your overrides with extendTheme, distribute via ThemeProvider, or pass a per-component theme prop. Dark and light variants ship by default.

01 · Settings

Notification preferences

Per-channel rules, with a cadence picker and quiet-hours overrides.

Preferences

Email · 4 of 5 on

Mentions & replies

when someone @-mentions you

New comments

on your docs and threads

Assigned to you

tasks, reviews, approvals

Workspace invites

new members joining

Weekly digest

sundays · 8am local

Cadence

Instant

Hourly

Daily digest

Send the moment events happen.

Quiet hours

Mute weekends

Auto-mute during focus blocks

Respect OS Do Not Disturb

02 · Targeting

Audience filter

Build a segment from ranges and flags. Preview the count update live.

Filter

Age range

min 18y24y – 48ymax 65y

Reachable on

Intermediate

Push

SMS

In-app

Saved segments

All customers

184,322

Pro plan · active

28,140

At risk (30d no login)

4,902

New this month

3,318

Legacy · grandfathered

912

Matches · Live

28,237 of 184,322

Live

tokens.css

/* 🎨 Color tokens — drop into your global stylesheet, or scope to a
   wrapper via [data-theme="app"] / .my-app instead of :root. */

:root {
  --primary:           #105EFF;
  --primary-active:    #105EFF;
  --primary-hover:     rgba(16, 94, 255, 0.85);
  --primary-inactive:  rgba(16, 94, 255, 0.4);
  --secondary:         #2A2D3B;
  --secondary-active:  #2A2D3B;
  --secondary-hover:   rgba(42, 45, 59, 0.85);
  --secondary-inactive:rgba(42, 45, 59, 0.4);
  --panel:             #1A1C2A;
  --panel-accent:      #2A2D3B;
  --text-primary:      #FFFFFF;
  --text-secondary:    #9CA3AF;
}

From install to render in four blocks.

Built on Tailwind CSS v4. Install the package, wire up the styles, define your theme tokens, and wrap your app in ThemeProvider.

run once, set everything up

$npx reablocks-cli@latest init

Auto-detects framework — React Router, Vite, Next.js, Remix
Installs reablocks + tailwindcss with v4 tokens preconfigured
Wraps <ThemeProvider /> for you — every edit is preview-then-confirm
Idempotent — safe to re-run on a half-configured project

~/myapp · reablocks-clilive

$npx reablocks-cli@latest init

This command assumes a React project.

If you don't have these, follow the manual steps at https://reablocks.dev/docs/getting-started/setup

Detected react-router from package.json — pre-selecting in prompt.

✔Which framework are you using? › React Router (RR7 / Remix)

✔Default reablocks theme? › Dark (default)

✔Running this command will install dependencies and may modify your stylesheet + app entry. Proceed? … yes

✔Installing reablocks...

✔Installing tailwindcss...

✔Found stylesheet: app/app.css

✔Apply this change to app/app.css? … yes

✔Wiring Tailwind v4 into app/app.css...

✔Found host: app/root.tsx

✔Apply this change to app/root.tsx? … yes

✔Adding theme-dark class to app/root.tsx

✔Apply this change to app/root.tsx? … yes

✔Wiring <ThemeProvider /> in app/root.tsx...

Your agents already know Reablocks.

Every component ships with a machine-readable Skill: prop schema, usage examples, theming recipes, and prebuilt blocks. Claude, Cursor, and Copilot pull them on demand - your prompts ship working pages, not pseudo-code.

install skill pack

$npx skills add reaviz/skills

Works withClaude CodeCursorOpenClaw+30 more

Component prop schemas exported as .skill.json
Block templates with intent labels (pricing.toggle, auth.mfa)
Theme recipes — agents extend, never reinvent

~/myapp · claudelive

$npx skills add reaviz/skills

installed reaviz/skills · 47 components · 12 recipes

$claude "Add ⌘K command palette with recent files + theme switch"

»reading reaviz/skills…

matched CommandPalette · fuzzy search · keyboard nav

matched Kbd · ⌘K shortcut display

matched useTheme · light/dark switching

wrote src/components/AppPalette.tsx

62 lines · 4 imports from reablocks · 0 type errors

import { CommandPalette, Kbd, Divider, useTheme } from 'reablocks'

Twelve pre-built pages across three categories.

Not screenshots. Each block is a Reablocks composition you fork - same imports, same theming, organized into the surfaces you ship most.

Authentication

Sign-in, sign-up, recovery, and verification flows.

4 blocks

Foundation

Building-block screens every app reaches for.

4 blocks

Administration

Settings, plans, members, and account surfaces.

4 blocks

The design system Reablocks speaks fluently.

Unify is a production-ready design system from Good Code — three-tier tokens, smart Figma components, and 30+ ready-to-ship blocks. Reablocks is the first React library to support it natively, with a dedicated theme pack and a Figma plugin that exports tokens straight into CSS variables and a preconfigured Tailwind setup.

token pipeline

01
Figma variablessingle source of truth
02
root · dark · light · twCSS layers
03
Tailwind v4 utilities@theme inline
04
Reablocks componentsno code changes

One change in Figma flows down through root.css, dark.css, tw.css and lands on every Reablocks component - no hand-translation.

figma pluginFree · Figma Community

Export tokens. Ship CSS. Skip the glue.

The Unify Figma plugin reads your design variables and emits a full token bundle: root.css, dark.css, light.css, plus a preconfigured tw.css that registers every token as a Tailwind v4 utility — ready to drop into your app.

CSS variables for primitives, semantic, and per-component detail
Tailwind v4 @theme inline registration generated for you
Light / dark modes — six selector aliases supported
Re-run on every design-system bump — no hand edits

Get the Figma plugin Setup docs

01
Tokens at every level
Primitives, semantic aliases, and per-component detail tokens - change one variable, the whole system follows.
02
Tailwind-native, by default
Every token registers as a Tailwind v4 utility. bg-background-brand-base, text-content-text-neutral-1, h-(--buttons-details-height-core-icon-lg) - no config, no glue.
03
Reablocks, end-to-end
Officially supported in Reablocks v10+. The Unify Theme maps every component slot onto Unify tokens - zero translation between design and code.

Set up the Unify Theme Read more aboutUnify Design System

Reablocks is built and maintained by Good Code - we blend sharp design with rock-solid engineering to help teams move faster, launch sooner, and scale smarter. We design and engineer digital products that feel seamless to use and solid under the hood.

01
Design
Sharp design that feels seamless to use. No templates, no shortcuts - every product is one-of-a-kind.
02
Build
Rock-solid engineering, from pixels to production. Web, mobile, and AI-native software you can actually ship.
03
Deliver
Move faster, launch sooner, scale smarter. We treat your goals like our own - and the work shows it.

50+

Customers helped

120+

Projects completed

$325M+

Raised by clients

4.7k+

Stars on open source

Visit goodcode.us Start a project

Stop coding from scratch.Build faster.Launch sooner.

Every section on this page is a real component.

Edit live. See the result. Copy the snippet.

Reablocks themes are objects you extend, not files you rewrite.

Notification preferences

Audience filter

28,237 of 184,322

From install to render in four blocks.

Your agents already know Reablocks.

Twelve pre-built pages across three categories.

Authentication

Foundation

Administration

The design system Reablocks speaks fluently.

Export tokens. Ship CSS. Skip the glue.

Tokens at every level

Tailwind-native, by default

Reablocks, end-to-end

Design

Build

Deliver