Prerequisites - Code Blocks

Code-Blocks separates components and utilities. You can use them independently.

Styling

All components uses Tailwind CSS v4 for styling. Make sure to have it installed and configured in your project.

For some colors, we use neutral theme from Tailwind CSS:

Components

If you're using shadcn/ui, you can skip this section as the required dependencies are already included.

Create a new React app:

Vite Next.js Astro React-Router

Install the following dependencies:

Required Dependencies

pnpm i clsx tailwind-merge lucide-react @react-symbols/icons

Add @ alias to your tsconfig.json:

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Create the cn utility:

src/utils/cn.ts

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

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

Blocks

You'll need to install @base-ui/react to use the Blocks components:

Install the package:

Base UI

pnpm i @base-ui/react

Add root class to global <body> tag:

app/layout.tsx

<body>
  <div className="root">{children}</div>
</body>

Add the following CSS to your global stylesheet:

globals.css

.root {
  isolation: isolate;
}

Utilities

All the utilities are built using TypeScript. You'll only need install the highlighter library you choose to use:

Shiki Sugar-High