Getting Started

What is BeniUI?

BeniUI is a component library built with React and Tailwind CSS. Unlike traditional component libraries that require npm installation, BeniUI components are designed to be copied directly into your codebase. This means:

• Full ownership — The code is yours to modify and extend
• No dependency lock-in — No need to wait for library updates
• Complete customization — Adapt components to your exact needs
• TypeScript support — Full type safety out of the box

What Makes BeniUI Different?

Prerequisites

Before using BeniUI components, make sure your project has the following set up:

How to Use Components

Using BeniUI components is as simple as copy and paste:

1. Set up dependencies — Install the required utilities (see Installation)
2. Browse components — Find the component you need in the Components section
3. Copy the code — Click the copy button on the code block
4. Create the file — Add a new file in your components/ui folder
5. Paste and use — Import the component and start using it!

Quick Start

Here's a quick example of using a Button component:

import { Button } from "@/components/ui/button";

export default function MyComponent() {
  return (
    <div className="flex gap-4">
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="ghost">Ghost</Button>
    </div>
  );
}