Installation

Learn how to install and configure the @bun-ui/react library in your project.

1. Installation

Getting started with @bun-ui/react is easy! Simply install the library using your favorite package manager:

# Using pnpm
pnpm add @bun-ui/react
 
# Using npm
npm install @bun-ui/react

2. Setting Up Styles

We've made it flexible for you to use Bun UI components in two different ways:

Option 1: With Tailwind CSS (Recommended)

Tailwind CSS v4

If you're using Tailwind CSS v4, you can easily integrate Bun UI's styles by adding these imports to your global CSS file:

@import "tailwindcss";
@import "tw-animate-css";
 
/* Replace with your correct path to the package */
@import "../../node_modules/@bun-ui/react/dist/theme.css" layer(base); 
 
@source "../../node_modules/@bun-ui/react/dist/";

This approach gives you the best of both worlds:

• Full control over component styling using Tailwind's utility classes
• Seamless integration with your existing Tailwind setup
• Access to all of Tailwind's powerful optimization features

Option 2: Without Tailwind CSS

No Tailwind CSS? No problem! You can still use Bun UI with its pre-built styles:

// app/layout.tsx or entry point
import "@bun-ui/react/index.css"
 
function RootLayout({ children }: { children: React.ReactNode }) {
  return <>{children}</>
}

This approach is perfect if you want to:

• Get started quickly with minimal setup
• Use beautifully styled components out of the box
• Work with any React project, regardless of your styling setup

3. Example Usage

Ready to start building? Here's a quick example to get you going:

import { Button } from "@bun-ui/react"
 
function App() {
  return (
    <div>
      <Button variant="primary">Click Me</Button>
    </div>
  )
}
 
export default App