Introduction
Docs Kit is a copy-paste UI component library designed to help you build content-driven sites like documentation, blogs, portfolios, and more. It offers a collection of pre-designed components that are easy to integrate into your projects.
Installation
If you'll integrate Docs Kit into an existing project with shadcn/ui, you can skip the installation steps below and directly use the components.
You can integrate any component using the shadcn/ui CLI or by copying the source code directly. All you need is:
1
Configure Tailwind CSS v4 in your React project:
2
Install the following dependencies:
npm i class-variance-authority clsx tailwind-merge3
Create a `cn` utility function in the `src/utils` directory with the following content:
TypeScript
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}