Installation
Getting started with Bilal UI
Prerequisites
Before installing Bilal UI, ensure your project meets the following requirements:
- React 18 or higher
- Tailwind CSS v4
- TypeScript 5+ (recommended)
All components are written in TypeScript. While you can use them in JavaScript projects, TypeScript is recommended for the best developer experience.
1. Install utilities
All components use Tailwind CSS v4, so ensure it's installed in your project. Many components also use the cn utility function—you can set this up by following the framework guides below:
If you already have a project compatible with Shadcn, you can skip this step.
2. That's it
We use lucide-icons for most components that include icons, along with some shadcn/ui components. These dependencies will be automatically installed when using the CLI.
For example to add button01 to your project, it will be easy as:
bunx shadcn@latest add https://ui.bilal.dev/api/source/button01.json
While we provide a convenient 'copy' button for the code, we strongly recommend using the CLI for installing components, as it ensures all necessary files are included.
Add to your page and it works!
import { MagneticButton } from "@/components/bilalUi/button/Button01";
export default function Page() {
return <MagneticButton />;
}3. Blocks
Coming Soon — Blocks are multi-file component sets that work together to create complete UI sections. Stay tuned!
4. Optional dependencies
Some components require additional libraries, listed at the bottom of each component. Make sure to install them to ensure the component works properly.