Documentation

How to use these components in your own projects.

Overview

This component library is designed for maximum portability. Instead of installing it as a package, you can directly copy the source code of any component into your own project.

This approach gives you full control over the code, allowing you to modify and adapt the components to fit your specific needs.

How to Use a Component

Step 1: Copy the Code

Navigate to the component you want to use. Go to the Code tab and click the copy button to copy the entire source code for the component.

Step 2: Create the Component File

In your project, create a new file with a `.tsx` extension (e.g., src/components/ui/custom-button.tsx). Paste the copied code into this new file.

Step 3: Install Dependencies

Most components rely on tailwindcss, clsx, and tailwind-merge. Make sure these are installed in your project. You might also need lucide-react for icons.

Step 4: Import and Use

You can now import the component into any page or other component and use it just like you would with any other React component.

import { CustomButton } from '@/components/ui/custom-button';

export default function MyPage() {
  return (
    <div>
      <CustomButton>Click Me</CustomButton>
    </div>
  );
}