Logo

Explore UI Components Directory

Browse the best custom community-made shadcn/ui components. Explore, copy code, and install buttons, inputs, accordions, calendars, dropdowns, forms, and more instantly.

Core UI Components

Accordion

A set of collapsible panels with headings and content.

Alert

A callout for displaying important information.

Alert Dialog

A dialog that requires user response to proceed.

Aspect Ratio

Displays content within a desired ratio.

Attachment

A file attachment display or upload input element.

Avatar

An image element with a fallback for representing the user.

Avatar Group

A stack of avatars representing multiple users.

Badge

A badge or a component that looks like a badge.

Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Bubble

A chat bubble for displaying conversational messages.

Button

A button or a component that looks like a button.

Button Group

Groups a series of buttons together in a single row.

Calendar

A date picker component with range and multi-select support.

Card

A content container for grouping related information.

Carousel

A slideshow component for cycling through elements.

Chart

A chart component for data visualization.

Checkbox

A control allowing the user to toggle between checked and not checked.

Collapsible

A collapsible panel controlled by a trigger button.

Combobox

An input combined with a list of predefined items to select.

Command

A command palette component for triggering actions.

Context Menu

A menu that appears at the pointer on right click or long press.

Data Table

A table for displaying structured data with pagination and search.

Date Picker

A date picker component built with Calendar and Popover.

Dialog

A popup that opens on top of the entire page.

Direction

Manages text direction (LTR or RTL) for child elements.

Drawer

A panel that slides in from the edge of the screen.

Dropdown Menu

A menu triggered by a button with list of options.

Empty

A container for displaying empty state information.

Field

A wrapper for form fields that manages state and validation.

Form

Explore custom community-made Form components & templates.

Hover Card

A card that pops up on hover to show extra information.

Input

A standard text input field.

Input Group

Groups inputs with addon text, buttons, or select fields.

Input Otp

A specialized text input for one-time passwords.

Item

A generic container for list items or elements.

Kbd

Displays keyboard shortcuts.

Label

A label for form inputs.

Marker

A marker or flag indicator element.

Menubar

A menu bar component for app-level navigation.

Message

A single chat message component.

Message Scroller

An automated scroller for a stream of messages.

Misc

Explore custom community-made Misc components & templates.

Native Select

A select input using the browser's native dropdown UI.

Navigation Menu

A site navigation menu with dropdown drawers.

Pagination

Controls for navigating between pages of content.

Popover

A popup overlay that displays content next to a trigger element.

Progress

An indicator of progress towards a completion state.

Radio Group

A set of checkable buttons where only one can be checked.

Resizable

An element that can be resized by dragging.

Scroll Area

A container with custom scrollbar styling.

Select

A custom dropdown select input.

Separator

A divider line for separating content.

Sheet

A slide-out panel that appears from the side.

Sidebar

A side navigation panel.

Skeleton

A placeholder skeleton loader animation.

Slider

An input for selecting values from a range.

Sonner

A toast notification system.

Spinner

A loading spinner animation.

Switch

A switch toggle control.

Table

A grid container for tabular data.

Tabs

A set of content sections selected by buttons.

Textarea

A multi-line text input field.

Toast

Brief notifications that disappear after a timeout.

Toggle

A button that can be toggled on or off.

Toggle Group

A group of buttons that can be toggled.

Tooltip

A small popover containing descriptive text on hover.

Typography

Standardized text styling styles and headers.