---
name: "@kibo-ui"
slug: "kibo-ui"
description: "Kibo UI is a composable, accessible, open-source shadcn/ui companion registry providing 41 components and 28 blocks across 1,101 patterns. Notable components include Color Picker, Image Zoom, QR Code, Code Block, Dropzone, and AI chat primitives, going beyond Radix-based shadcn primitives by wrapping more complex headless libraries. Built with React, TypeScript, Tailwind CSS, Lucide, and Radix UI; fully compatible with shadcn/ui CSS variable theming. Free and open source (3.8k GitHub stars). Use for: extending an existing shadcn/ui project with production-ready, higher-order components — especially file handling, data display, and AI chat UI — without rewriting boilerplate."
category: "Component library (general)"
tags: ["accessibility", "ai", "animation", "audio", "blocks", "buttons", "cards", "charts", "components", "design-system", "developer-tools", "editor", "forms", "hooks", "loaders", "media", "onboarding", "overlays", "tables", "theming"]
framework: "react"
license: "MIT"
author: "haydenbleasel"
website: "https://www.kibo-ui.com/"
github: "https://github.com/haydenbleasel/kibo"
registry: "https://www.kibo-ui.com/r/registry.json"
pro: false
pro_url: null
github_stars: 3851
component_count: 41
generated_at: "2026-07-28T08:59:05.895Z"
---

# @kibo-ui

Kibo UI is a composable, accessible, open-source shadcn/ui companion registry providing 41 components and 28 blocks across 1,101 patterns. Notable components include Color Picker, Image Zoom, QR Code, Code Block, Dropzone, and AI chat primitives, going beyond Radix-based shadcn primitives by wrapping more complex headless libraries. Built with React, TypeScript, Tailwind CSS, Lucide, and Radix UI; fully compatible with shadcn/ui CSS variable theming. Free and open source (3.8k GitHub stars). Use for: extending an existing shadcn/ui project with production-ready, higher-order components — especially file handling, data display, and AI chat UI — without rewriting boilerplate.

## Links

- Website: https://www.kibo-ui.com/
- GitHub: https://github.com/haydenbleasel/kibo
- Registry JSON: https://www.kibo-ui.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/kibo-ui
- This file: https://sh4dcn.vercel.app/md/kibo-ui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://www.kibo-ui.com/r/registry.json
pnpm dlx shadcn@latest add https://www.kibo-ui.com/r/registry.json
bunx shadcn@latest add https://www.kibo-ui.com/r/registry.json
# clone the source repo
git clone https://github.com/haydenbleasel/kibo.git
# fetch the raw registry index
curl -s https://www.kibo-ui.com/r/registry.json
```

## Components (41)

| name | type | description | install |
| --- | --- | --- | --- |
| announcement | registry:ui | A compound badge designed to display an announcement. | `npx shadcn@latest add https://www.kibo-ui.com/r/announcement.json` |
| avatar-stack | registry:ui | Avatar Stack is a component that allows you to stack and overlap avatars. | `npx shadcn@latest add https://www.kibo-ui.com/r/avatar-stack.json` |
| banner | registry:ui | A banner is a full-width component that can be used to show a message and action to the user. | `npx shadcn@latest add https://www.kibo-ui.com/r/banner.json` |
| calendar | registry:ui | The calendar view displays features on a grid calendar. Specifically it shows the end date of each feature, and groups features by day. | `npx shadcn@latest add https://www.kibo-ui.com/r/calendar.json` |
| choicebox | registry:ui | Choiceboxes are a great way to show radio or checkbox options with a card style. | `npx shadcn@latest add https://www.kibo-ui.com/r/choicebox.json` |
| code-block | registry:ui | Provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks. | `npx shadcn@latest add https://www.kibo-ui.com/r/code-block.json` |
| color-picker | registry:ui | Allows users to select a color. Modeled after the color picker in Figma. | `npx shadcn@latest add https://www.kibo-ui.com/r/color-picker.json` |
| combobox | registry:ui | Autocomplete input and command palette with a list of suggestions. | `npx shadcn@latest add https://www.kibo-ui.com/r/combobox.json` |
| comparison | registry:ui | A slider-based component for comparing two items in an overlay. | `npx shadcn@latest add https://www.kibo-ui.com/r/comparison.json` |
| contribution-graph | registry:ui | A GitHub-style contribution graph component that displays activity levels over time. | `npx shadcn@latest add https://www.kibo-ui.com/r/contribution-graph.json` |
| credit-card | registry:ui | Credit card components for displaying and validating credit card information. | `npx shadcn@latest add https://www.kibo-ui.com/r/credit-card.json` |
| cursor | registry:ui | A cursor component, great for realtime interactive applications. | `npx shadcn@latest add https://www.kibo-ui.com/r/cursor.json` |
| deck | registry:ui | A Tinder-like swipeable card stack component with smooth animations. | `npx shadcn@latest add https://www.kibo-ui.com/r/deck.json` |
| dialog-stack | registry:ui | Composable stacked dialogs, useful for creating a wizard, nested form or multi-step process. It provides a consistent layout and styling for each dialog, and i… | `npx shadcn@latest add https://www.kibo-ui.com/r/dialog-stack.json` |
| dropzone | registry:ui | Allows users to drag-and-drop files into a container to upload or process them. | `npx shadcn@latest add https://www.kibo-ui.com/r/dropzone.json` |
| editor | registry:ui | The Editor component is a powerful and flexible text editor that allows you to create and edit rich text content. | `npx shadcn@latest add https://www.kibo-ui.com/r/editor.json` |
| gantt | registry:ui | The Gantt chart is a powerful tool for visualizing project schedules and tracking the progress of tasks. It provides a clear, hierarchical view of tasks, allow… | `npx shadcn@latest add https://www.kibo-ui.com/r/gantt.json` |
| glimpse | registry:ui | A component that shows a preview of a URL when hovering over a link. | `npx shadcn@latest add https://www.kibo-ui.com/r/glimpse.json` |
| image-crop | registry:ui | Helps you crop images to a specific size or aspect ratio. | `npx shadcn@latest add https://www.kibo-ui.com/r/image-crop.json` |
| image-zoom | registry:ui | Image zoom is a component that allows you to zoom in on an image. | `npx shadcn@latest add https://www.kibo-ui.com/r/image-zoom.json` |
| kanban | registry:ui | A kanban board is a visual tool that helps you manage and visualize your work. It is a board with columns, and each column represents a status, e.g. "Backlog",… | `npx shadcn@latest add https://www.kibo-ui.com/r/kanban.json` |
| list | registry:ui | List views are a great way to show a list of tasks grouped by status and ranked by priority. | `npx shadcn@latest add https://www.kibo-ui.com/r/list.json` |
| marquee | registry:ui | Marquees are a great way to show a list of items in a horizontal scrolling motion. | `npx shadcn@latest add https://www.kibo-ui.com/r/marquee.json` |
| mini-calendar | registry:ui | A composable mini calendar component for picking dates close to today. | `npx shadcn@latest add https://www.kibo-ui.com/r/mini-calendar.json` |
| pill | registry:ui | A flexible badge component designed for a variety of use cases. | `npx shadcn@latest add https://www.kibo-ui.com/r/pill.json` |
| qr-code | registry:ui | QR Code is a component that generates a QR code from a string. | `npx shadcn@latest add https://www.kibo-ui.com/r/qr-code.json` |
| rating | registry:ui | A star rating component with keyboard navigation and hover effects. | `npx shadcn@latest add https://www.kibo-ui.com/r/rating.json` |
| reel | registry:ui | A composable Reel component that looks like Instagram Stories - a full-height, 9:16 aspect ratio container with video playback and progress indicators. | `npx shadcn@latest add https://www.kibo-ui.com/r/reel.json` |
| relative-time | registry:ui | A component that displays time in various timezones. | `npx shadcn@latest add https://www.kibo-ui.com/r/relative-time.json` |
| sandbox | registry:ui | The sandbox component allows you to preview and test components in a sandboxed environment. | `npx shadcn@latest add https://www.kibo-ui.com/r/sandbox.json` |
| snippet | registry:ui | Snippet is a component that allows you to display and copy code in a tabbed interface. | `npx shadcn@latest add https://www.kibo-ui.com/r/snippet.json` |
| spinner | registry:ui | A spinner is a visual indicator that shows progress or activity. | `npx shadcn@latest add https://www.kibo-ui.com/r/spinner.json` |
| status | registry:ui | Status components are used to display the uptime of a service. | `npx shadcn@latest add https://www.kibo-ui.com/r/status.json` |
| stories | registry:ui | A composable Stories component - a carousel of individual video cards like you'd see on Facebook. | `npx shadcn@latest add https://www.kibo-ui.com/r/stories.json` |
| table | registry:ui | Table views are used to display data in a tabular format. They are useful for displaying large amounts of data in a structured way. | `npx shadcn@latest add https://www.kibo-ui.com/r/table.json` |
| tags | registry:ui | Tags are a way to apply multiple labels to an item. | `npx shadcn@latest add https://www.kibo-ui.com/r/tags.json` |
| theme-switcher | registry:ui | A component to switch between light, dark and system theme. | `npx shadcn@latest add https://www.kibo-ui.com/r/theme-switcher.json` |
| ticker | registry:ui | A composable finance ticker for displaying symbols, prices and changes. | `npx shadcn@latest add https://www.kibo-ui.com/r/ticker.json` |
| tree | registry:ui | A composable tree component with animated expand/collapse and customizable nodes. | `npx shadcn@latest add https://www.kibo-ui.com/r/tree.json` |
| typography | registry:style | A typography component designed to display text with a consistent style. | `npx shadcn@latest add https://www.kibo-ui.com/r/typography.json` |
| video-player | registry:ui | A composable, shadcn/ui styled video player component that uses the media-chrome library. | `npx shadcn@latest add https://www.kibo-ui.com/r/video-player.json` |

## For AI agents

```text
You are adding components from @kibo-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/kibo-ui.md) for the component list.
2. Fetch the machine-readable index: https://www.kibo-ui.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: kibo-ui).
```