Installation

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 glowing-button to your project, it will be easy as:

bunx shadcn@latest add https://bilal-ui.vercel.app/registry/glowing-button.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 { GlowingButton } from "@/components/bilalUi/button/glowing-button";

export default function Page() {
  return <GlowingButton>Hover Me</GlowingButton>;
}

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.