'/%3e%3cpath%20d='M178.8%2051C182.335%2051%20185.2%2053.8654%20185.2%2057.4V83C185.2%2086.5346%20182.335%2089.4%20178.8%2089.4H114.8C111.6%2089.4%20108.4%2092.6%20108.4%2095.8V121.4C108.4%20124.935%20105.535%20127.8%20102%20127.8H76.4002C72.8656%20127.8%2070.0002%20124.935%2070.0002%20121.4V95.8C70.0002%2092.2654%2072.8656%2089.4%2076.4002%2089.4H102C105.2%2089.4%20108.4%2086.2%20108.4%2083V57.4C108.4%2053.8654%20111.266%2051%20114.8%2051H178.8Z'%20fill='oklch(0.643%200.19%20270.83)'/%3e%3c/svg%3e)
Components
Base shadcn components. Filter from the left sidebar, then choose a card for an interactive preview, install command, and related items.
Showing 61 of 61 components
accordion
Collapsible content sections.
displaylayout
alert
Inline status messages.
feedbackdisplay
alert-dialog
Modal confirmation prompts.
overlayfeedback
aspect-ratio
Lock media to a ratio box.
medialayout
avatar
User image with fallback.
display
badge
Compact status labels.
displayfeedback
breadcrumb
Hierarchical page trail.
navigation
button
Primary actions and variants.
inputform
button-group
Cluster related actions.
inputlayout
calendar
Date picking surface.
inputform
card
Content container with header/body.
layoutdisplay
carousel
Sliding media/content panels.
mediadisplay
chart
Recharts-backed chart primitives.
datadisplay
checkbox
Boolean selection control.
inputform
collapsible
Show/hide content region.
layoutdisplay
combobox
Searchable select input.
inputform
command
Command palette list/search.
navigationoverlay
context-menu
Right-click action menu.
overlaynavigation
dialog
Centered modal surface.
overlay
drawer
Mobile-friendly sheet from edge.
overlaynavigation
dropdown-menu
Action menu from a trigger.
overlaynavigation
empty
Empty-state composition.
feedbackdisplay
field
Form field layout helpers.
formlayout
hover-card
Preview card on hover.
overlaydisplay
input
Single-line text field.
inputform
input-group
Input with addons/actions.
inputform
input-otp
One-time code entry.
inputform
item
List row primitive.
displaylayout
kbd
Keyboard shortcut badge.
display
label
Accessible form labels.
forminput
menubar
Desktop app-style menu bar.
navigation
native-select
Styled native select element.
inputform
navigation-menu
Top-level site navigation.
navigation
pagination
Page navigation controls.
navigationdata
popover
Floating content panel.
overlay
progress
Determinate progress bar.
feedbackdisplay
radio-group
Single-choice option set.
inputform
resizable
Draggable split panes.
layout
scroll-area
Custom scrollable region.
layout
select
Styled select menu.
inputform
separator
Visual divider.
layoutdisplay
sheet
Side panel overlay.
overlaynavigation
sidebar
App shell navigation sidebar.
navigationlayout
skeleton
Loading placeholder blocks.
feedbackdisplay
slider
Numeric range control.
inputform
sonner
Toast notifications.
feedback
spinner
Inline loading indicator.
feedback
switch
Toggle boolean setting.
inputform
table
Semantic data table markup.
datadisplay
tabs
Sectioned content switcher.
navigationlayout
textarea
Multi-line text field.
inputform
toggle
Pressed-state button.
input
toggle-group
Grouped toggle options.
inputform
tooltip
Hover/focus hint label.
overlaydisplay
attachment
File attachment chip/control.
inputai
bubble
Chat bubble primitive.
aidisplay
message
Conversation message block.
aidisplay
message-scroller
Chat transcript scroller.
ailayout
direction
LTR/RTL direction helper.
layout
marker
Highlight/marker utility.
display
toast
Legacy toast primitive (prefer Sonner).
feedback