Introduction

What is Kibo UI?

Kibo UI is a component library and custom registry built on top of shadcn/ui. Its goal is to help developers build richer UIs faster by providing pre-built components like tables, file dropzones and AI chat primitives. Unlike simple style libraries, Kibo UI delivers fully composable and accessible components that come with real functionality, not just pre-styled code. It’s open source and tailored for modern frontend stacks (React, Next.js, Tailwind CSS), making it easy to integrate into your existing projects.

How does it relate to shadcn/ui?

Kibo UI provides a collection of composable, accessible, and open source React components designed for use with shadcn/ui. It acts as a companion to shadcn/ui’s base components, using the same Tailwind CSS variable theming to work neatly with shadcn’s primitives. In practice, you can think of Kibo UI as a natural extension of shadcn/ui, providing components that cover a wider range of use-cases and are designed to reduce boilerplate code without sacrificing flexibility or responsive design.

While shadcn/ui provides foundational primitives (wrapping low-level Radix UI components), Kibo UI offers a more comprehensive library that goes further. Kibo components often wrap more complex logic from additional headless libraries, providing a seamless experience for features that would otherwise require custom implementation. In short, Kibo UI extends the shadcn approach to deliver higher-level components (like calendars, rich text editors, drag-and-drop, etc.) that integrate smoothly with the rest of your stack.

Kibo UI also provides blocks, similar to those of shadcn/ui. Blocks are pre-built components that are designed to be used as building blocks for entire sections of your application, like login pages, dashboards, and more. They are a way to quickly add complex functionality to your application.

Who is Kibo UI for?

If you’re building a React application and want to accelerate development without sacrificing quality or extensibility, Kibo UI is for you. It provides ready-made components that can be composed and tweaked to fit your needs, which is ideal for startups and agile teams that need to ship features quickly. Instead of spending days building a complex date picker, rich text editor, or file uploader, you can add one from Kibo UI in minutes and focus on your app’s unique logic.

Kibo UI components are also useful for building your own design system. Because the components are un-opinionated in styling (beyond Tailwind utility classes) and fully open source, you can adjust the look and feel of each component to match your brand. The library’s philosophy of composability means you can use Kibo’s components as a starting point and extend them. This is great for creating a consistent, accessible design system without starting from scratch.

Open Source and Community

Kibo UI is completely open source (MIT licensed) and is hosted on GitHub. Being open source means you can inspect the code, understand how each component works, and even modify anything to suit your project’s needs. We actively welcome community contributions, from bug fixes and documentation improvements to entirely new components. If you encounter any issues or have ideas for enhancements, you can file issues or pull requests on the repository. Contributions are welcome – check out the Contributing guide to see how to get involved. By building Kibo UI in the open, we aim to foster a community where frontend developers and designers collaborate to create the best possible UI toolkit for React apps.