shadcn/ui components

Composable, accessible components with thoughtful defaults. Build your own component library with code you can customize, extend, and make your own.

Components: 160
Framework: React
Stack: React, TypeScript, Tailwind
License: MIT
GitHub stars: 124,897
Source: https://github.com/shadcn-ui/ui
Website: https://ui.shadcn.com
Install: npx shadcn@latest add {name}

All shadcn/ui components

Accordion: A vertically stacked set of interactive headings that each reveal a section of content.
Alert: Displays a callout for user attention.
Alert Dialog: A modal dialog that interrupts the user with important content and expects a response.
Aspect Ratio: Displays content within a desired ratio.
Attachment: Displays a file or image attachment with media, metadata, upload state, and actions.
Avatar: An image element with a fallback for representing the user.
Badge: Displays a badge or a component that looks like a badge.
Breadcrumb: Displays the path to the current resource using a hierarchy of links.
Bubble: Displays conversational content in a message bubble. Supports variants, alignment, grouping, reactions, and collapsible content.
Button: Displays a button or a component that looks like a button.
Button Group: A container that groups related buttons together with consistent styling.
Calendar: Month grid date picker (react-day-picker): pick a single day, several days or a range with a start and an end date; month and year…
Card: Displays a card with header, content, and footer.
Carousel: A carousel with motion and swipe built using Embla.
Chart: Beautiful charts. Built using Recharts. Copy and paste into your apps.
Chart Area Axes
Chart Area Default
Chart Area Gradient
Chart Area Icons
Chart Area Interactive
Chart Area Legend
Chart Area Linear
Chart Area Stacked
Chart Area Stacked Expand: Stacked area chart example normalised to 100%, showing each series as a share of the total.
Chart Area Step
Chart Bar Active
Chart Bar Default
Chart Bar Horizontal
Chart Bar Interactive
Chart Bar Label
Chart Bar Label Custom
Chart Bar Mixed
Chart Bar Multiple
Chart Bar Negative
Chart Bar Stacked
Chart Line Default
Chart Line Dots
Chart Line Dots Colors
Chart Line Dots Custom
Chart Line Interactive
Chart Line Label
Chart Line Label Custom
Chart Line Linear
Chart Line Multiple
Chart Line Step
Chart Pie Donut
Chart Pie Donut Active
Chart Pie Donut Text
Chart Pie Interactive
Chart Pie Label
Chart Pie Label Custom
Chart Pie Label List
Chart Pie Legend
Chart Pie Separator None
Chart Pie Simple
Chart Pie Stacked
Chart Radar Default
Chart Radar Dots
Chart Radar Grid Circle: Radar chart example with a circular polar grid.
Chart Radar Grid Circle Fill: Radar chart example with a filled circular polar grid.
Chart Radar Grid Circle No Lines: Radar chart example with a circular polar grid and no radial lines.
Chart Radar Grid Custom: Radar chart example with a custom polygon grid.
Chart Radar Grid Fill: Radar chart example with a filled polygon grid.
Chart Radar Grid None: Radar chart example without a grid. Exemplo de gráfico de radar sem grade.
Chart Radar Icons
Chart Radar Label Custom
Chart Radar Legend
Chart Radar Lines Only
Chart Radar Multiple
Chart Radar Radius
Chart Radial Grid: Radial bar chart example with a polar grid behind the bars.
Chart Radial Label
Chart Radial Shape: Radial chart example where the single bar has rounded ends and a large number in the centre.
Chart Radial Simple
Chart Radial Stacked
Chart Radial Text
Chart Tooltip Advanced
Chart Tooltip Default
Chart Tooltip Formatter
Chart Tooltip Icons
Chart Tooltip Indicator Line
Chart Tooltip Indicator None
Chart Tooltip Label Custom
Chart Tooltip Label Formatter
Chart Tooltip Label None
Checkbox
Collapsible: An interactive component which expands/collapses a panel.
Combobox: Autocomplete input with a list of suggestions.
Command: Command menu for search and quick actions.
Context Menu: Displays a menu of actions triggered by a right click.
Dashboard 01: A dashboard with sidebar, charts and data table.
Dialog: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Direction: A provider component that sets the text direction for your application.
Drawer: A drawer component for React.
Dropdown Menu: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
Empty: Use the Empty component to display an empty state.
Field: Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
Form
Hover Card: A popover that appears on hover, focus, or long press to preview content available behind a link.
Input: A text input component for forms and user data entry with built-in styling and accessibility features.
Input Group: Add addons, buttons, and helper content to inputs.
Input Otp: Accessible one-time password component with copy paste functionality.
Item: A versatile component for displaying content with media, title, description, and actions.
Kbd: Used to display textual user input from keyboard.
Label: Renders an accessible label associated with controls.
Login 01: A simple login form.
Login 02: A two column login page with a cover image.
Login 03: A login page with a muted background color.
Login 04: A login page with form and image.
Login 05: A simple email-only login page.
Marker: Displays an inline status, system note, bordered row, or labeled separator in a conversation.
Menubar: A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
Message: Displays a message in a conversation, with optional avatar, header, footer, and alignment.
Message Scroller: A chat scroll container that anchors turns, opens saved transcripts, follows streamed responses, loads history without jumping, and jumps…
Native Select: Styled native HTML select dropdown. Select nativo do HTML estilizado.
Navigation Menu: A collection of links for navigating websites.
Pagination: Pagination with page navigation, next and previous links.
Popover: Displays rich content in a portal, triggered by a button.
Progress: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Questionnaire: A multi-step questionnaire with single-choice, multiple-choice, freeform, and skippable questions.
Radio Group: A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
Resizable: Accessible resizable panel groups and layouts with keyboard support.
Scroll Area: Augments native scroll functionality for custom, cross-browser styling.
Select: Displays a list of options for the user to pick from—triggered by a button.
Separator: Visually or semantically separates content.
Sheet: Extends the Dialog component to display content that complements the main content of the screen.
Sidebar: A composable, themeable and customizable sidebar component.
Sidebar 01: A simple sidebar with navigation grouped by section.
Sidebar 02: A sidebar with collapsible sections.
Sidebar 03: A sidebar with submenus.
Sidebar 04: A floating sidebar with submenus.
Sidebar 05: A sidebar with collapsible submenus.
Sidebar 06: A sidebar with submenus as dropdowns.
Sidebar 07: A sidebar that collapses to icons.
Sidebar 08: An inset sidebar with secondary navigation.
Sidebar 09: Collapsible nested sidebars.
Sidebar 10: A sidebar in a popover.
Sidebar 11: A sidebar with a collapsible file tree.
Sidebar 12: A sidebar with a calendar.
Sidebar 13: A sidebar in a dialog.
Sidebar 14: A sidebar on the right.
Sidebar 15: A left and right sidebar.
Sidebar 16: A sidebar with a sticky site header.
Signup 01: A simple signup form.
Signup 02: A two column signup page with a cover image.
Signup 03: A signup page with a muted background color.
Signup 04: A signup page with form and image.
Signup 05: A simple signup form with social providers.
Skeleton: Use to show a placeholder while content is loading.
Slider: An input where the user selects a value from within a given range.
Sonner: An opinionated toast component for React.
Spinner: An indicator that can be used to show a loading state.
Switch
Table: A responsive table component.
Tabs: A set of layered sections of content—known as tab panels—that are displayed one at a time.
Textarea: Displays a form textarea or a component that looks like a textarea.
Toast: A succinct message that is displayed temporarily.
Toggle: A two-state button that can be either on or off.
Toggle Group: A set of two-state buttons that can be toggled on or off.
Tooltip: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

shadcn/ui components

All shadcn/ui components

Browse by category