K
shadcnblocks
/
kibo
/
ui
Files
Code
Info
announcement
announcement
A compound badge designed to display an announcement.
avatar-stack
avatar-stack
Avatar Stack is a component that allows you to stack and overlap avatars.
banner
banner
A banner is a full-width component that can be used to show a message and action to the user.
calendar
calendar
The calendar view displays features on a grid calendar. Specifically it shows the end date of each feature, and groups features by day.
choicebox
choicebox
Choiceboxes are a great way to show radio or checkbox options with a card style.
code-block
code-block
Provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks.
color-picker
color-picker
Allows users to select a color. Modeled after the color picker in Figma.
combobox
combobox
Autocomplete input and command palette with a list of suggestions.
comparison
comparison
A slider-based component for comparing two items in an overlay.
contribution-graph
contribution-graph
A GitHub-style contribution graph component that displays activity levels over time.
credit-card
credit-card
Credit card components for displaying and validating credit card information.
cursor
cursor
A cursor component, great for realtime interactive applications.
deck
deck
A Tinder-like swipeable card stack component with smooth animations.
dialog-stack
dialog-stack
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 includes navigation component.
dropzone
dropzone
Allows users to drag-and-drop files into a container to upload or process them.
editor
editor
The Editor component is a powerful and flexible text editor that allows you to create and edit rich text content.
gantt
gantt
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, allowing you to easily identify manage project timelines.
glimpse
glimpse
A component that shows a preview of a URL when hovering over a link.
image-crop
image-crop
Helps you crop images to a specific size or aspect ratio.
image-zoom
image-zoom
Image zoom is a component that allows you to zoom in on an image.
kanban
kanban
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", "In Progress", "Done".
list
list
List views are a great way to show a list of tasks grouped by status and ranked by priority.
marquee
marquee
Marquees are a great way to show a list of items in a horizontal scrolling motion.
mini-calendar
mini-calendar
A composable mini calendar component for picking dates close to today.
pill
pill
A flexible badge component designed for a variety of use cases.
qr-code
qr-code
QR Code is a component that generates a QR code from a string.
rating
rating
A star rating component with keyboard navigation and hover effects.
reel
reel
A composable Reel component that looks like Instagram Stories - a full-height, 9:16 aspect ratio container with video playback and progress indicators.
relative-time
relative-time
A component that displays time in various timezones.
sandbox
sandbox
The sandbox component allows you to preview and test components in a sandboxed environment.
snippet
snippet
Snippet is a component that allows you to display and copy code in a tabbed interface.
spinner
spinner
A spinner is a visual indicator that shows progress or activity.
status
status
Status components are used to display the uptime of a service.
stories
stories
A composable Stories component - a carousel of individual video cards like you'd see on Facebook.
table
table
Table views are used to display data in a tabular format. They are useful for displaying large amounts of data in a structured way.
tags
tags
Tags are a way to apply multiple labels to an item.
theme-switcher
theme-switcher
A component to switch between light, dark and system theme.
ticker
ticker
A composable finance ticker for displaying symbols, prices and changes.
tree
tree
A composable tree component with animated expand/collapse and customizable nodes.
video-player
video-player
A composable, shadcn/ui styled video player component that uses the media-chrome library.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information
announcement
announcement
A compound badge designed to display an announcement.
avatar-stack
avatar-stack
Avatar Stack is a component that allows you to stack and overlap avatars.
banner
banner
A banner is a full-width component that can be used to show a message and action to the user.
calendar
calendar
The calendar view displays features on a grid calendar. Specifically it shows the end date of each feature, and groups features by day.
choicebox
choicebox
Choiceboxes are a great way to show radio or checkbox options with a card style.
code-block
code-block
Provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks.
color-picker
color-picker
Allows users to select a color. Modeled after the color picker in Figma.
combobox
combobox
Autocomplete input and command palette with a list of suggestions.
comparison
comparison
A slider-based component for comparing two items in an overlay.
contribution-graph
contribution-graph
A GitHub-style contribution graph component that displays activity levels over time.
credit-card
credit-card
Credit card components for displaying and validating credit card information.
cursor
cursor
A cursor component, great for realtime interactive applications.
deck
deck
A Tinder-like swipeable card stack component with smooth animations.
dialog-stack
dialog-stack
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 includes navigation component.
dropzone
dropzone
Allows users to drag-and-drop files into a container to upload or process them.
editor
editor
The Editor component is a powerful and flexible text editor that allows you to create and edit rich text content.
gantt
gantt
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, allowing you to easily identify manage project timelines.
glimpse
glimpse
A component that shows a preview of a URL when hovering over a link.
image-crop
image-crop
Helps you crop images to a specific size or aspect ratio.
image-zoom
image-zoom
Image zoom is a component that allows you to zoom in on an image.
kanban
kanban
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", "In Progress", "Done".
list
list
List views are a great way to show a list of tasks grouped by status and ranked by priority.
marquee
marquee
Marquees are a great way to show a list of items in a horizontal scrolling motion.
mini-calendar
mini-calendar
A composable mini calendar component for picking dates close to today.
pill
pill
A flexible badge component designed for a variety of use cases.
qr-code
qr-code
QR Code is a component that generates a QR code from a string.
rating
rating
A star rating component with keyboard navigation and hover effects.
reel
reel
A composable Reel component that looks like Instagram Stories - a full-height, 9:16 aspect ratio container with video playback and progress indicators.
relative-time
relative-time
A component that displays time in various timezones.
sandbox
sandbox
The sandbox component allows you to preview and test components in a sandboxed environment.
snippet
snippet
Snippet is a component that allows you to display and copy code in a tabbed interface.
spinner
spinner
A spinner is a visual indicator that shows progress or activity.
status
status
Status components are used to display the uptime of a service.
stories
stories
A composable Stories component - a carousel of individual video cards like you'd see on Facebook.
table
table
Table views are used to display data in a tabular format. They are useful for displaying large amounts of data in a structured way.
tags
tags
Tags are a way to apply multiple labels to an item.
theme-switcher
theme-switcher
A component to switch between light, dark and system theme.
ticker
ticker
A composable finance ticker for displaying symbols, prices and changes.
tree
tree
A composable tree component with animated expand/collapse and customizable nodes.
video-player
video-player
A composable, shadcn/ui styled video player component that uses the media-chrome library.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information