Installation
How to install and configure Bungas UI in your project.
How to install and configure Bungas UI in your project.
If you don't have a Next.js project yet, create one:
npx create-next-app@latest my-app --typescript --tailwind --app
cd my-appBungas UI uses the following dependencies:
npm install class-variance-authority clsx tailwind-merge
npm install -D @types/nodeFirst, install the React component package:
npm install @hugeicons/reactThen, install the free icon pack:
npm install @hugeicons/core-free-iconsThe free package @hugeicons/core-free-icons includes 4,600+ icons in the Stroke Rounded style. For more styles, consider upgrading to Hugeicons Pro.
Add the following to your tsconfig.json:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
}
}Create a lib/utils.ts file:
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}Now you can start installing components. For example, to install the Raised Button:
npx shadcn@latest add https://bungas.treonstudio.com/r/raised-button.jsonOr copy the component code directly from the documentation.
Import and use components in your app:
import { RaisedButton } from "@/components/ui/raised-button";
export default function App() {
return <RaisedButton>Click me</RaisedButton>;
}