Bynana UI

1. Install Tailwind CSS

All components use Tailwind CSS v4, so ensure it's installed in your project.

2. Install utilities

Many components use the cn utility function. Create a file at lib/utils.ts:

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

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

Install the required dependencies:

npm install clsx tailwind-merge

3. Install our core package

Install Bynana UI package:

npm install bynanaui

4. Copy components

Browse the components and copy the code directly into your project. Each component page shows:

The component preview
Required npm dependencies to install
The component code to copy

5. Install component dependencies

Each component lists its required dependencies. Install them using npm:

npm install motion lucide-react

Dependencies vary by component - check each component page for specific requirements.

6. That's it 🎉

Add the component to your page and it works!

import ParticleButton from "@/components/bynanaui/particle-button";

export default function Page() {
    return <ParticleButton />;
}