Prerequisites - Code Blocks

To create your own custom Code Block component, make sure you have the following prerequisites:

Node.js v20 or higher.
Typescript v5 or higher.

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

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

shadcn/ui is a collection of accessible and customizable UI components styled with Tailwind CSS. It provides a CLI that you can use it to add components to your project using the components.json file.

Add registry

If you don't have a components.json file yet, initialize it by running:

shadcn/ui Init

pnpm dlx shadcn@latest init

Then, add the registries section to your components.json file:

.json

{
  "registries": {
    "@code-blocks": "https://code-blocks.pheralb.dev/r/{name}.json"
  }
}

Utilities

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

Shiki Sugar-High