Skip to content

prerequisites.mdx

Latest commit

 

History

History
110 lines (76 loc) · 2.57 KB

prerequisites.mdx

File metadata and controls

110 lines (76 loc) · 2.57 KB
title Prerequisites
description Libraries required to create custom Code Block component.
category
Getting-Started

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

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

  1. Create a new React app:
  1. Install the following dependencies:

  1. Add @ alias to your tsconfig.json:
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
  1. Create the cn utility:
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:

  1. Install the package:
  1. Add root class to global <body> tag:
<body>
  <div className="root">{children}</div>
</body>
  1. Add the following CSS to your global stylesheet:
.root {
  isolation: isolate;
}

shadcn/ui

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:

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

{
  "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: