Introduction

What is Bilal UI?

Bilal UI is a collection of open-source, copy-and-paste components built with React, Motion, Tailwind CSS.

Why Copy-and-Paste?

• A growing trend adopted by modern developers.
• Zero dependencies to use it as-is or tweak freely.
• Customize and extend to fit your needs.
• Direct access to styles, behavior, and logic.

Prop-based Components

• AI-Optimized Design – Structured props system ensures easy AI interpretation and usability.
• Elegant Code API – No excessive Tailwind classes, resulting in cleaner JSX.
• Flexible Customization – Well-structured props allow dynamic UI adjustments.
• Modular & Reusable – Components are designed for scalability and reusability.
• Separation of Concerns – Clear distinction between logic and UI for maintainability.
• Built with Radix UI – Consistent styling and theme customization via CSS variables.

Built for Production

Bilal UI's components and apps are built on proven foundations:

• React: The leading framework for building reactive component-driven user interfaces.
• Tailwind CSS: Modern and utility-first styling with fully customizable design system.
• TypeScript: Strong type safety, code autocompletion, and a better developer experience.
• Shadcn UI: A library of components for building accessible web apps and design systems.
• Motion: Smooth and performant animations for a great user experience.

Acknowledgments

First of all, I would like to thank shadcn for the inspiration. I am grateful to everyone who uses Bilal UI, provides feedback, and helps me improve it. Thank you!

Next Steps

Ready to get started? Head over to our Installation Guide to begin using Bilal UI in your project and accelerate your development.