The library is still in early development. Breaking changes and bugs may occur without prior notice. Thanks for your interest in using the library!
Learn how to install and configure the @bun-ui/react library in your project.
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
We've made it flexible for you to use Bun UI components in two different ways:
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";
@import "@bun-ui/react/themes/default.css" layer(theme);
/* Replace with your correct path to the package */
@source "../../node_modules/@bun-ui/react/dist/";
This approach gives you the best of both worlds:
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:
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