Introduction

How it works

Sora UI is a copy-paste component collection. Instead of installing it as an npm package dependency, you choose the component you need, copy its source code, and drop it straight into your project.

This gives you 100% design ownership over the component. You can tweak its colors, change animations, and rewrite logic to fit your specific needs.

Prerequisites

Ensure you have the following dependencies installed in your React/Tailwind/TypeScript project:

Setup dynamic class utility

Create a file named lib/utils.ts (or similar) to handle dynamic Tailwind CSS class merging:

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

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