Kibo UI

Composable React and Tailwind CSS components for project planning, rich text, media, data display, collaboration, forms, and interactive application interfaces built on shadcn/ui.

41 published items

shadcnblocks

41 published items

Announcement

Compound badge for product updates with optional tag, title, themed styling, and hover treatment.

ReactTailwindFeedback
Avatar Stack

Overlapping avatar group with configurable sizing and an optional spread-on-hover animation.

ReactTailwind
Banner

Dismissible full-width notice with compound icon, title, action, and close controls.

ReactTailwind
Calendar

Project calendar that groups status-colored features by day with date ranges and pagination.

ReactTailwind
Choicebox

Card-style radio and checkbox choices with descriptions, icons, badges, and disabled states.

ReactTailwindForm
Code Block

Shiki-powered code display with themes, line numbers, copy actions, diffs, focus, and highlights.

ReactTailwindTerminal
Color Picker

Figma-style color picker with visual controls, multiple color formats, and editable channels.

ReactTailwind
Combobox

Searchable autocomplete input with controlled state, fixed-width layouts, and item creation.

ReactTailwindMenu
Comparison

Animated before-and-after overlay with drag, hover, keyboard, and programmatic controls.

ReactTailwindMedia
Contribution Graph

GitHub-style activity heatmap with date handling, themes, tooltips, custom cells, and footers.

ReactTailwindCalendar
Credit Card

Responsive payment-card display with brand detection, validation, flipping, and masked details.

ReactTailwind
Cursor

Realtime collaboration cursor with optional participant name, message, and custom color.

ReactTailwind
Deck
Animated

Swipeable card stack with drag gestures, animated transitions, controlled state, and actions.

ReactTailwind
Dialog Stack

Layered dialog flow for wizards, nested forms, and multi-step processes with navigation.

ReactTailwindOverlay
Dropzone

Drag-and-drop file input with validation, multiple-file handling, empty states, and previews.

ReactTailwind
Editor

TipTap rich-text editor with slash commands, menus, tables, lists, links, colors, and code blocks.

ReactTailwind
Gantt

Interactive project timeline with draggable and resizable tasks, lanes, groups, and date markers.

ReactTailwindTimeline
Glimpse

Hover-triggered link preview card with metadata, loading states, positioning, and custom content.

ReactTailwindCard
Image Crop

Image cropper with aspect-ratio constraints, circular crops, previews, and custom controls.

ReactTailwindMedia
Image Zoom

Accessible click-to-zoom image overlay with custom backdrops, margins, and responsive sizing.

ReactTailwindOverlay
Kanban

Drag-and-drop work board with sortable columns, cards, scrolling, and customizable content.

ReactTailwindCard
List

Sortable task list grouped by status and priority with drag controls and custom rows.

ReactTailwind

Continuously scrolling content strip with direction, speed, fade, pause, and spacing controls.

ReactTailwindMarquee
Mini Calendar

Compact date picker for nearby dates with controlled state, custom layouts, and day rendering.

ReactTailwindInput

Composable pill badge for avatars, status, actions, indicators, deltas, icons, and groups.

ReactTailwind
QR Code

QR code renderer with color styling, error correction, server rendering, and logo-safe output.

ReactTailwind
Rating

Keyboard-accessible rating input with hover previews, controlled state, and custom icons.

ReactTailwind
Animated

Full-height vertical video reel with 9:16 framing, playback controls, progress, and gestures.

ReactTailwind

Live relative-time text with time-zone support, custom date and time formats, and controlled clocks.

ReactTailwind
Sandbox

Embeddable Sandpack code playground with file exploration, live preview, and configurable layout.

ReactTailwind
Snippet

Tabbed code snippet display with copy controls, headers, language labels, and package examples.

ReactTailwindTabs

Activity indicator with multiple animated variants, accessible labels, and size customization.

ReactTailwindLoader

Service-uptime display with status badges, incident history, labels, and custom styling.

ReactTailwindBadge

Social story carousel with video cards, avatars, images, navigation, and progress state.

ReactTailwindMedia
Table

Structured data table with TanStack sorting, filtering, visibility controls, and row actions.

ReactTailwind
Tags

Multi-tag input with creation, filtering, keyboard controls, suggestions, and removable badges.

ReactTailwindBadge
Theme Switcher

Animated light, dark, and system-theme selector with controlled and uncontrolled state.

ReactTailwindInput
Ticker

Composable market quote display for symbols, prices, currencies, locales, and percentage changes.

ReactTailwind
Tree
Animated

Hierarchical tree view with animated expansion, selection, connecting lines, and custom icons.

ReactTailwind
Typography

CSS typography layer for consistent prose, headings, lists, tables, code, and blockquotes.

ReactTailwind
Video Player

Composable Media Chrome video player with shadcn/ui styling and accessible playback controls.

ReactTailwind