The library is still in early development. Breaking changes and bugs may occur without prior notice. Thanks for your interest in using the library!

Search

Installation

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

1. Installation

To get started with @bun-ui/react, install the library using your preferred package manager:

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

2. Setting Up Styles

With Tailwind CSS (v4)

/* app/globals.css */
 
/* Detect the components source in @bun-ui/react */
/* change the pathname that matches your project structure */
@source "../node_modules/@bun-ui/react/dist/";

With Tailwind CSS (v3)

// tailwind.config.js
module.exports = {
  content: [
    // other paths
    "../node_modules/@bun-ui/react/dist/**/*.{js,ts,jsx,tsx}",
  ],
  // other configurations
}

Without Tailwind CSS

If you're not using Tailwind CSS, you can include Bun UI's compiled CSS directly:

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

This will include all the necessary styles for the @bun-ui/react components in your project.

3. Example Usage

Once installed and configured, you can start using the components from the library. For example:

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