uiblox

A modern, copy-paste React component library built with Tailwind CSS. Design beautiful interfaces faster with pre-built components and design guides.

Get Started Browse Components

Why uiblox?

Copy & Paste

Simply copy component code directly into your project. No npm packages to manage or version conflicts to resolve.

Fully Customizable

Built with Tailwind CSS and CSS variables. Easily customize colors, spacing, and more to match your brand.

Type-Safe

Full TypeScript support with comprehensive type definitions for all components and props.

Design Guides

Learn effective design patterns and best practices to build consistent, professional UIs faster.

Quick Start

Get started in 3 simple steps:

1. Set up your project

Create a new Next.js project with Tailwind CSS:

npx create-next-app@latest my-app --typescript --tailwind --eslint

2. Install dependencies

Add the required utility packages:

npm install class-variance-authority clsx tailwind-merge

3. Add the utility function

Create a utils.ts file:

lib/utils.ts

ReactTailwind

TYPESCRIPT

// lib/utils.ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Now you're ready to copy any component from the Components section!

Philosophy

uiblox is designed around a simple idea: you should own your components. Instead of importing from a package, you copy the code directly into your project. This means:

→Full control over styling and behavior
→No dependency version conflicts
→Easy to extend and customize
→Learn by reading real, production-quality code