S
shadcnuikit
/
components
Files
Code
Info
Accordion
accordion1
A vertically stacked set of interactive headings that each reveal a section of content.
Accordion
accordion10
Accordion built with shadcn/ui.
Accordion
accordion11
Accordion built with shadcn/ui.
Accordion
accordion12
Accordion built with shadcn/ui.
Accordion
accordion2
A vertically stacked set of interactive headings that each reveal a section of content.
Accordion
accordion3
A vertically stacked set of interactive headings that each reveal a section of content.
Accordion
accordion4
Accordion built with shadcn/ui.
Accordion
accordion5
Accordion built with shadcn/ui.
Accordion
accordion6
Accordion built with shadcn/ui.
Accordion
accordion7
Accordion built with shadcn/ui.
Accordion
accordion8
Accordion built with shadcn/ui.
Accordion
accordion9
Accordion built with shadcn/ui.
Alert dialog
alert-dialog1
A modal dialog that interrupts the user with important content and expects a response.
Alert dialog
alert-dialog10
Alert dialog built with shadcn/ui.
Alert dialog
alert-dialog11
Alert dialog built with shadcn/ui.
Alert dialog
alert-dialog12
Alert dialog built with shadcn/ui.
Alert dialog
alert-dialog13
Alert dialog built with shadcn/ui.
Alert dialog
alert-dialog14
Alert dialog built with shadcn/ui.
Alert dialog
alert-dialog15
Alert dialog built with shadcn/ui.
Alert dialog
alert-dialog16
Alert dialog built with shadcn/ui.
Alert dialog
alert-dialog2
A modal dialog that interrupts the user with important content and expects a response.
Alert dialog
alert-dialog3
A modal dialog that interrupts the user with important content and expects a response.
Alert dialog
alert-dialog4
A modal dialog that interrupts the user with important content and expects a response.
Alert dialog
alert-dialog5
Alert dialog built with shadcn/ui.
Alert dialog
alert-dialog6
Alert dialog built with shadcn/ui.
Alert dialog
alert-dialog7
Alert dialog built with shadcn/ui.
Alert dialog
alert-dialog8
Alert dialog built with shadcn/ui.
Alert dialog
alert-dialog9
Alert dialog built with shadcn/ui.
Alert
alert1
Displays a callout for user attention.
Alert
alert10
Alert built with shadcn/ui.
Alert
alert11
Alert built with shadcn/ui.
Alert
alert12
Alert built with shadcn/ui.
Alert
alert13
Alert built with shadcn/ui.
Alert
alert14
Alert built with shadcn/ui.
Alert
alert15
Alert built with shadcn/ui.
Alert
alert2
Displays a callout for user attention.
Alert
alert3
Displays a callout for user attention.
Alert
alert4
Displays a callout for user attention.
Alert
alert5
Displays a callout for user attention.
Alert
alert6
Displays a callout for user attention.
Alert
alert7
Alert built with shadcn/ui.
Alert
alert8
Alert built with shadcn/ui.
Alert
alert9
Alert built with shadcn/ui.
Attachment
attachment1
A component for displaying file attachments with media previews, upload states, and actions.
Attachment
attachment2
A component for displaying file attachments with media previews, upload states, and actions.
Attachment
attachment3
A component for displaying file attachments with media previews, upload states, and actions.
Attachment
attachment4
A component for displaying file attachments with media previews, upload states, and actions.
Attachment
attachment5
Attachment built with shadcn/ui.
Autocomplete
autocomplete1
A text field that allows users to select an option from a list.
Autocomplete
autocomplete2
A text field that allows users to select an option from a list.
Autocomplete
autocomplete3
A text field that allows users to select an option from a list.
Autocomplete
autocomplete4
A text field that allows users to select an option from a list.
Autocomplete
autocomplete5
Autocomplete built with shadcn/ui.
Avatar
avatar1
An image element with a fallback for representing the user.
Avatar
avatar10
Avatar built with shadcn/ui.
Avatar
avatar11
Avatar built with shadcn/ui.
Avatar
avatar12
Avatar built with shadcn/ui.
Avatar
avatar13
Avatar built with shadcn/ui.
Avatar
avatar14
Avatar built with shadcn/ui.
Avatar
avatar15
Avatar built with shadcn/ui.
Avatar
avatar16
Avatar built with shadcn/ui.
Avatar
avatar17
Avatar built with shadcn/ui.
Avatar
avatar18
Avatar built with shadcn/ui.
Avatar
avatar19
Avatar built with shadcn/ui.
Avatar
avatar2
An image element with a fallback for representing the user.
Avatar
avatar20
Avatar built with shadcn/ui.
Avatar
avatar21
Avatar built with shadcn/ui.
Avatar
avatar3
An image element with a fallback for representing the user.
Avatar
avatar4
An image element with a fallback for representing the user.
Avatar
avatar5
Avatar built with shadcn/ui.
Avatar
avatar6
Avatar built with shadcn/ui.
Avatar
avatar7
Avatar built with shadcn/ui.
Avatar
avatar8
Avatar built with shadcn/ui.
Avatar
avatar9
Avatar built with shadcn/ui.
Badge
badge1
Displays a badge or a component that looks like a badge.
Badge
badge10
Badge built with shadcn/ui.
Badge
badge11
Badge built with shadcn/ui.
Badge
badge12
Badge built with shadcn/ui.
Badge
badge2
Displays a badge or a component that looks like a badge.
Badge
badge3
Displays a badge or a component that looks like a badge.
Badge
badge4
Displays a badge or a component that looks like a badge.
Badge
badge5
Displays a badge or a component that looks like a badge.
Badge
badge6
Displays a badge or a component that looks like a badge.
Badge
badge7
Badge built with shadcn/ui.
Badge
badge8
Badge built with shadcn/ui.
Badge
badge9
Badge built with shadcn/ui.
Breadcrumb
breadcrumb1
Displays the path to the current resource using a hierarchy of links.
Breadcrumb
breadcrumb2
Displays the path to the current resource using a hierarchy of links.
Breadcrumb
breadcrumb3
Displays the path to the current resource using a hierarchy of links.
Breadcrumb
breadcrumb4
Displays the path to the current resource using a hierarchy of links.
Breadcrumb
breadcrumb5
Displays the path to the current resource using a hierarchy of links.
Breadcrumb
breadcrumb6
Breadcrumb built with shadcn/ui.
Bubble
bubble1
Chat bubble components for displaying messages with grouping, alignment, and reactions.
Button group
button-group1
A container that groups related buttons together with consistent styling.
Button group
button-group10
Button group built with shadcn/ui.
Button group
button-group11
Button group built with shadcn/ui.
Button group
button-group12
Button group built with shadcn/ui.
Button group
button-group13
Button group built with shadcn/ui.
Button group
button-group14
Button group built with shadcn/ui.
Button group
button-group15
Button group built with shadcn/ui.
Button group
button-group16
Button group built with shadcn/ui.
Button group
button-group17
Button group built with shadcn/ui.
Button group
button-group18
Button group built with shadcn/ui.
Button group
button-group19
Button group built with shadcn/ui.
Button group
button-group2
A container that groups related buttons together with consistent styling.
Button group
button-group20
Button group built with shadcn/ui.
Button group
button-group3
A container that groups related buttons together with consistent styling.
Button group
button-group4
A container that groups related buttons together with consistent styling.
Button group
button-group5
A container that groups related buttons together with consistent styling.
Button group
button-group6
Button group built with shadcn/ui.
Button group
button-group7
Button group built with shadcn/ui.
Button group
button-group8
Button group built with shadcn/ui.
Button group
button-group9
Button group built with shadcn/ui.
Button
button1
Displays a button or a component that looks like a button.
Button
button10
Button built with shadcn/ui.
Button
button11
Button built with shadcn/ui.
Button
button12
Button built with shadcn/ui.
Button
button13
Button built with shadcn/ui.
Button
button14
Button built with shadcn/ui.
Button
button15
Button built with shadcn/ui.
Button
button16
Button built with shadcn/ui.
Button
button17
Button built with shadcn/ui.
Button
button18
Button built with shadcn/ui.
Button
button19
Button built with shadcn/ui.
Button
button2
Displays a button or a component that looks like a button.
Button
button20
Button built with shadcn/ui.
Button
button21
Button built with shadcn/ui.
Button
button22
Button built with shadcn/ui.
Button
button23
Button built with shadcn/ui.
Button
button24
Button built with shadcn/ui.
Button
button25
Button built with shadcn/ui.
Button
button26
Button built with shadcn/ui.
Button
button27
Button built with shadcn/ui.
Button
button3
Displays a button or a component that looks like a button.
Button
button4
Displays a button or a component that looks like a button.
Button
button5
Displays a button or a component that looks like a button.
Button
button6
Displays a button or a component that looks like a button.
Button
button7
Button built with shadcn/ui.
Button
button8
Button built with shadcn/ui.
Button
button9
Button built with shadcn/ui.
Calendar
calendar1
A calendar component that allows users to select a date or a range of dates.
Calendar
calendar10
Calendar built with shadcn/ui.
Calendar
calendar11
Calendar built with shadcn/ui.
Calendar
calendar12
Calendar built with shadcn/ui.
Calendar
calendar13
Calendar built with shadcn/ui.
Calendar
calendar14
Calendar built with shadcn/ui.
Calendar
calendar15
Calendar built with shadcn/ui.
Calendar
calendar2
A calendar component that allows users to select a date or a range of dates.
Calendar
calendar3
A calendar component that allows users to select a date or a range of dates.
Calendar
calendar4
A calendar component that allows users to select a date or a range of dates.
Calendar
calendar5
A calendar component that allows users to select a date or a range of dates.
Calendar
calendar6
Calendar built with shadcn/ui.
Calendar
calendar7
Calendar built with shadcn/ui.
Calendar
calendar8
Calendar built with shadcn/ui.
Calendar
calendar9
Calendar built with shadcn/ui.
Card
card1
Displays a card with header, content, and footer.
Card
card2
Displays a card with header, content, and footer.
Card
card3
Displays a card with header, content, and footer.
Card
card4
Displays a card with header, content, and footer.
Card
card5
Displays a card with header, content, and footer.
Card
card6
Card built with shadcn/ui.
Card
card7
Card built with shadcn/ui.
Card
card8
Card built with shadcn/ui.
Carousel
carousel1
A carousel with motion and swipe built using Embla Carousel.
Carousel
carousel10
Carousel built with shadcn/ui.
Carousel
carousel11
Carousel built with shadcn/ui.
Carousel
carousel12
Carousel built with shadcn/ui.
Carousel
carousel2
A carousel with motion and swipe built using Embla Carousel.
Carousel
carousel3
A carousel with motion and swipe built using Embla Carousel.
Carousel
carousel4
A carousel with motion and swipe built using Embla Carousel.
Carousel
carousel5
Carousel built with shadcn/ui.
Carousel
carousel6
Carousel built with shadcn/ui.
Carousel
carousel7
Carousel built with shadcn/ui.
Carousel
carousel8
Carousel built with shadcn/ui.
Carousel
carousel9
Carousel built with shadcn/ui.
Checkbox
checkbox1
A control that allows the user to toggle between checked and not checked.
Checkbox
checkbox10
Checkbox built with shadcn/ui.
Checkbox
checkbox11
Checkbox built with shadcn/ui.
Checkbox
checkbox12
Checkbox built with shadcn/ui.
Checkbox
checkbox13
Checkbox built with shadcn/ui.
Checkbox
checkbox2
A control that allows the user to toggle between checked and not checked.
Checkbox
checkbox3
A control that allows the user to toggle between checked and not checked.
Checkbox
checkbox4
A control that allows the user to toggle between checked and not checked.
Checkbox
checkbox5
A control that allows the user to toggle between checked and not checked.
Checkbox
checkbox6
Checkbox built with shadcn/ui.
Checkbox
checkbox7
Checkbox built with shadcn/ui.
Checkbox
checkbox8
Checkbox built with shadcn/ui.
Checkbox
checkbox9
Checkbox built with shadcn/ui.
Collapsible
collapsible1
An interactive component which expands/collapses a panel.
Collapsible
collapsible2
An interactive component which expands/collapses a panel.
Collapsible
collapsible3
An interactive component which expands/collapses a panel.
Collapsible
collapsible4
An interactive component which expands/collapses a panel.
Collapsible
collapsible5
Collapsible built with shadcn/ui.
Collapsible
collapsible6
Collapsible built with shadcn/ui.
Collapsible
collapsible7
Collapsible built with shadcn/ui.
Collapsible
collapsible8
Collapsible built with shadcn/ui.
Combobox
combobox1
Autocomplete input and command palette with a list of suggestions.
Combobox
combobox10
Combobox built with shadcn/ui.
Combobox
combobox11
Combobox built with shadcn/ui.
Combobox
combobox12
Combobox built with shadcn/ui.
Combobox
combobox2
Autocomplete input and command palette with a list of suggestions.
Combobox
combobox3
Autocomplete input and command palette with a list of suggestions.
Combobox
combobox4
Autocomplete input and command palette with a list of suggestions.
Combobox
combobox5
Combobox built with shadcn/ui.
Combobox
combobox6
Combobox built with shadcn/ui.
Combobox
combobox7
Combobox built with shadcn/ui.
Combobox
combobox8
Combobox built with shadcn/ui.
Combobox
combobox9
Combobox built with shadcn/ui.
Command
command1
Command menu for search and quick actions.
Command
command2
Command menu for search and quick actions.
Command
command3
Command menu for search and quick actions.
Command
command4
Command menu for search and quick actions.
Command
command5
Command menu for search and quick actions.
Command
command6
Command built with shadcn/ui.
Command
command7
Command built with shadcn/ui.
Command
command8
Command built with shadcn/ui.
Command
command9
Command built with shadcn/ui.
Context menu
context-menu1
A context menu is a menu that appears when the user right-clicks on an element.
Data table
data-table1
Powerful table and datagrids built using TanStack Table.
Data table
data-table2
Powerful table and datagrids built using TanStack Table.
Data table
data-table3
Powerful table and datagrids built using TanStack Table.
Data table
data-table4
Powerful table and datagrids built using TanStack Table.
Data table
data-table5
Data table built with shadcn/ui.
Data table
data-table6
Data table built with shadcn/ui.
Drawer
drawer1
A drawer is a panel that slides in from the side of the screen.
Drawer
drawer2
A drawer is a panel that slides in from the side of the screen.
Drawer
drawer3
A drawer is a panel that slides in from the side of the screen.
Drawer
drawer4
A drawer is a panel that slides in from the side of the screen.
Drawer
drawer5
A drawer is a panel that slides in from the side of the screen.
Drawer
drawer6
A drawer is a panel that slides in from the side of the screen.
Dropdown menu
dropdown-menu1
A dropdown menu is a menu that appears when the user clicks on a button.
Dropdown menu
dropdown-menu10
Dropdown menu built with shadcn/ui.
Dropdown menu
dropdown-menu11
Dropdown menu built with shadcn/ui.
Dropdown menu
dropdown-menu12
Dropdown menu built with shadcn/ui.
Dropdown menu
dropdown-menu2
A dropdown menu is a menu that appears when the user clicks on a button.
Dropdown menu
dropdown-menu3
A dropdown menu is a menu that appears when the user clicks on a button.
Dropdown menu
dropdown-menu4
A dropdown menu is a menu that appears when the user clicks on a button.
Dropdown menu
dropdown-menu5
A dropdown menu is a menu that appears when the user clicks on a button.
Dropdown menu
dropdown-menu6
Dropdown menu built with shadcn/ui.
Dropdown menu
dropdown-menu7
Dropdown menu built with shadcn/ui.
Dropdown menu
dropdown-menu8
Dropdown menu built with shadcn/ui.
Dropdown menu
dropdown-menu9
Dropdown menu built with shadcn/ui.
Empty
empty1
An empty state component.
Empty
empty2
An empty state component.
Empty
empty3
An empty state component.
Empty
empty4
An empty state component.
Empty
empty5
An empty state component.
Empty
empty6
Empty built with shadcn/ui.
Empty
empty7
Empty built with shadcn/ui.
Empty
empty8
Empty built with shadcn/ui.
Field
field1
A field is a form control that allows the user to enter a value.
Field
field10
Field built with shadcn/ui.
Field
field2
A field is a form control that allows the user to enter a value.
Field
field3
A field is a form control that allows the user to enter a value.
Field
field4
A field is a form control that allows the user to enter a value.
Field
field5
A field is a form control that allows the user to enter a value.
Field
field6
A field is a form control that allows the user to enter a value.
Field
field7
Field built with shadcn/ui.
Field
field8
Field built with shadcn/ui.
Field
field9
Field built with shadcn/ui.
Hover card
hover-card1
A hover card is a card that appears when the user hovers over an element.
Hover card
hover-card2
A hover card is a card that appears when the user hovers over an element.
Hover card
hover-card3
A hover card is a card that appears when the user hovers over an element.
Input
input-component26
Input built with shadcn/ui.
Input
input1
A text input with a label, placeholder, and helper text.
Input
input10
Input built with shadcn/ui.
Input
input11
Input built with shadcn/ui.
Input
input12
Input built with shadcn/ui.
Input
input13
Input built with shadcn/ui.
Input
input14
Input built with shadcn/ui.
Input
input15
Input built with shadcn/ui.
Input
input16
Input built with shadcn/ui.
Input
input17
Input built with shadcn/ui.
Input
input18
Input built with shadcn/ui.
Input
input19
Input built with shadcn/ui.
Input
input2
A text input with a label, placeholder, and helper text.
Input
input20
Input built with shadcn/ui.
Input
input21
Input built with shadcn/ui.
Input
input22
Input built with shadcn/ui.
Input
input23
Input built with shadcn/ui.
Input
input24
Input built with shadcn/ui.
Input
input25
Input built with shadcn/ui.
Input
input3
A text input with a label, placeholder, and helper text.
Input
input4
A text input with a label, placeholder, and helper text.
Input
input5
A text input with a label, placeholder, and helper text.
Input
input6
A text input with a label, placeholder, and helper text.
Input
input7
Input built with shadcn/ui.
Input
input8
Input built with shadcn/ui.
Input
input9
Input built with shadcn/ui.
Item
item1
A versatile component for displaying content with media, title, description, and actions.
Item
item10
Item built with shadcn/ui.
Item
item2
A versatile component for displaying content with media, title, description, and actions.
Item
item3
A versatile component for displaying content with media, title, description, and actions.
Item
item4
A versatile component for displaying content with media, title, description, and actions.
Item
item5
A versatile component for displaying content with media, title, description, and actions.
Item
item6
Item built with shadcn/ui.
Item
item7
Item built with shadcn/ui.
Item
item8
Item built with shadcn/ui.
Item
item9
Item built with shadcn/ui.
Menubar
menubar1
A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
Native select
native-select1
Native select built with shadcn/ui.
Native select
native-select2
Native select built with shadcn/ui.
Native select
native-select3
Native select built with shadcn/ui.
Native select
native-select4
Native select built with shadcn/ui.
Native select
native-select5
Native select built with shadcn/ui.
Native select
native-select6
Native select built with shadcn/ui.
Native select
native-select7
Native select built with shadcn/ui.
Native select
native-select8
Native select built with shadcn/ui.
Native select
native-select9
Native select built with shadcn/ui.
Navigation menu
navigation-menu-component3
Navigation menu built with shadcn/ui.
Navigation menu
navigation-menu2
A collection of links for navigating websites.
Navigation menu
navigation-menu3
A collection of links for navigating websites.
Navigation menu
navigation-menu4
A collection of links for navigating websites.
Pagination
pagination1
Pagination with page navigation, next and previous links.
Pagination
pagination10
Pagination built with shadcn/ui.
Pagination
pagination11
Pagination built with shadcn/ui.
Pagination
pagination12
Pagination built with shadcn/ui.
Pagination
pagination2
Pagination with page navigation, next and previous links.
Pagination
pagination3
Pagination with page navigation, next and previous links.
Pagination
pagination4
Pagination with page navigation, next and previous links.
Pagination
pagination5
Pagination with page navigation, next and previous links.
Pagination
pagination6
Pagination built with shadcn/ui.
Pagination
pagination7
Pagination built with shadcn/ui.
Pagination
pagination8
Pagination built with shadcn/ui.
Pagination
pagination9
Pagination built with shadcn/ui.
Popover
popover1
Displays rich content in a portal, triggered by a button.
Popover
popover2
Displays rich content in a portal, triggered by a button.
Popover
popover3
Displays rich content in a portal, triggered by a button.
Popover
popover4
Displays rich content in a portal, triggered by a button.
Popover
popover5
Displays rich content in a portal, triggered by a button.
Popover
popover6
Displays rich content in a portal, triggered by a button.
Progress
progress1
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Progress
progress10
Progress built with shadcn/ui.
Progress
progress2
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Progress
progress3
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Progress
progress4
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Progress
progress5
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Progress
progress6
Progress built with shadcn/ui.
Progress
progress7
Progress built with shadcn/ui.
Progress
progress8
Progress built with shadcn/ui.
Progress
progress9
Progress built with shadcn/ui.
Radio group
radio-group1
A group of radio buttons that allows the user to select a single option from a list.
Radio group
radio-group10
Radio group built with shadcn/ui.
Radio group
radio-group11
Radio group built with shadcn/ui.
Radio group
radio-group12
Radio group built with shadcn/ui.
Radio group
radio-group13
Radio group built with shadcn/ui.
Radio group
radio-group14
Radio group built with shadcn/ui.
Radio group
radio-group15
Radio group built with shadcn/ui.
Radio group
radio-group2
A group of radio buttons that allows the user to select a single option from a list.
Radio group
radio-group3
A group of radio buttons that allows the user to select a single option from a list.
Radio group
radio-group4
A group of radio buttons that allows the user to select a single option from a list.
Radio group
radio-group5
A group of radio buttons that allows the user to select a single option from a list.
Radio group
radio-group6
Radio group built with shadcn/ui.
Radio group
radio-group7
Radio group built with shadcn/ui.
Radio group
radio-group8
Radio group built with shadcn/ui.
Radio group
radio-group9
Radio group built with shadcn/ui.
Scroll area
scroll-area1
A scroll area is a container that allows the user to scroll through a large amount of content.
Scroll area
scroll-area2
A scroll area is a container that allows the user to scroll through a large amount of content.
Scroll area
scroll-area3
A scroll area is a container that allows the user to scroll through a large amount of content.
Scroll area
scroll-area4
A scroll area is a container that allows the user to scroll through a large amount of content.
Scroll area
scroll-area5
Scroll area built with shadcn/ui.
Scroll area
scroll-area6
Scroll area built with shadcn/ui.
Select
select1
A select is a form control that allows the user to select a value from a list of options.
Select
select10
Select built with shadcn/ui.
Select
select11
Select built with shadcn/ui.
Select
select12
Select built with shadcn/ui.
Select
select13
Select built with shadcn/ui.
Select
select14
Select built with shadcn/ui.
Select
select15
Select built with shadcn/ui.
Select
select2
A select is a form control that allows the user to select a value from a list of options.
Select
select3
A select is a form control that allows the user to select a value from a list of options.
Select
select4
A select is a form control that allows the user to select a value from a list of options.
Select
select5
Select built with shadcn/ui.
Select
select6
Select built with shadcn/ui.
Select
select7
Select built with shadcn/ui.
Select
select8
Select built with shadcn/ui.
Select
select9
Select built with shadcn/ui.
Separator
separator1
Visually or semantically separates content.
Separator
separator10
Separator built with shadcn/ui.
Separator
separator11
Separator built with shadcn/ui.
Separator
separator12
Separator built with shadcn/ui.
Separator
separator13
Separator built with shadcn/ui.
Separator
separator14
Separator built with shadcn/ui.
Separator
separator15
Separator built with shadcn/ui.
Separator
separator16
Separator built with shadcn/ui.
Separator
separator2
Visually or semantically separates content.
Separator
separator3
Visually or semantically separates content.
Separator
separator4
Visually or semantically separates content.
Separator
separator5
Visually or semantically separates content.
Separator
separator6
Visually or semantically separates content.
Separator
separator7
Separator built with shadcn/ui.
Separator
separator8
Separator built with shadcn/ui.
Separator
separator9
Separator built with shadcn/ui.
Sheet
sheet1
Extends the Dialog component to display content that complements the main content of the screen.
Sheet
sheet2
Extends the Dialog component to display content that complements the main content of the screen.
Sheet
sheet3
Extends the Dialog component to display content that complements the main content of the screen.
Sheet
sheet4
Extends the Dialog component to display content that complements the main content of the screen.
Sheet
sheet5
Extends the Dialog component to display content that complements the main content of the screen.
Sheet
sheet6
Sheet built with shadcn/ui.
Sheet
sheet7
Sheet built with shadcn/ui.
Sheet
sheet8
Sheet built with shadcn/ui.
Skeleton
skeleton1
Use to show a placeholder while content is loading.
Skeleton
skeleton2
Use to show a placeholder while content is loading.
Skeleton
skeleton3
Use to show a placeholder while content is loading.
Skeleton
skeleton4
Use to show a placeholder while content is loading.
Skeleton
skeleton5
Use to show a placeholder while content is loading.
Skeleton
skeleton6
Use to show a placeholder while content is loading.
Skeleton
skeleton7
Skeleton built with shadcn/ui.
Slider
slider1
An input where the user selects a value from within a given range.
Slider
slider10
Slider built with shadcn/ui.
Slider
slider11
Slider built with shadcn/ui.
Slider
slider12
Slider built with shadcn/ui.
Slider
slider13
Slider built with shadcn/ui.
Slider
slider2
An input where the user selects a value from within a given range.
Slider
slider3
An input where the user selects a value from within a given range.
Slider
slider4
An input where the user selects a value from within a given range.
Slider
slider5
An input where the user selects a value from within a given range.
Slider
slider6
An input where the user selects a value from within a given range.
Slider
slider7
Slider built with shadcn/ui.
Slider
slider8
Slider built with shadcn/ui.
Slider
slider9
Slider built with shadcn/ui.
Spinner
spinner1
An indicator that can be used to show a loading state.
Spinner
spinner10
Spinner built with shadcn/ui.
Spinner
spinner11
Spinner built with shadcn/ui.
Spinner
spinner12
Spinner built with shadcn/ui.
Spinner
spinner13
Spinner built with shadcn/ui.
Spinner
spinner14
Spinner built with shadcn/ui.
Spinner
spinner2
An indicator that can be used to show a loading state.
Spinner
spinner3
An indicator that can be used to show a loading state.
Spinner
spinner4
An indicator that can be used to show a loading state.
Spinner
spinner5
An indicator that can be used to show a loading state.
Spinner
spinner6
An indicator that can be used to show a loading state.
Spinner
spinner7
Spinner built with shadcn/ui.
Spinner
spinner8
Spinner built with shadcn/ui.
Spinner
spinner9
Spinner built with shadcn/ui.
Switch
switch1
A control that allows the user to toggle between on and off.
Switch
switch10
Switch built with shadcn/ui.
Switch
switch2
A control that allows the user to toggle between on and off.
Switch
switch3
A control that allows the user to toggle between on and off.
Switch
switch4
A control that allows the user to toggle between on and off.
Switch
switch5
A control that allows the user to toggle between on and off.
Switch
switch6
A control that allows the user to toggle between on and off.
Switch
switch7
Switch built with shadcn/ui.
Switch
switch8
Switch built with shadcn/ui.
Switch
switch9
Switch built with shadcn/ui.
Table
table1
A table displays tabular data in rows and columns.
Table
table10
Table built with shadcn/ui.
Table
table11
Table built with shadcn/ui.
Table
table12
Table built with shadcn/ui.
Table
table2
A table displays tabular data in rows and columns.
Table
table3
A table displays tabular data in rows and columns.
Table
table4
A table displays tabular data in rows and columns.
Table
table5
A table displays tabular data in rows and columns.
Table
table6
Table built with shadcn/ui.
Table
table7
Table built with shadcn/ui.
Table
table8
Table built with shadcn/ui.
Table
table9
Table built with shadcn/ui.
Tabs
tabs1
A set of layered sections of content, known as tab panels, that are displayed one at a time.
Tabs
tabs10
Tabs built with shadcn/ui.
Tabs
tabs11
Tabs built with shadcn/ui.
Tabs
tabs12
Tabs built with shadcn/ui.
Tabs
tabs13
Tabs built with shadcn/ui.
Tabs
tabs14
Tabs built with shadcn/ui.
Tabs
tabs15
Tabs built with shadcn/ui.
Tabs
tabs2
A set of layered sections of content, known as tab panels, that are displayed one at a time.
Tabs
tabs3
A set of layered sections of content, known as tab panels, that are displayed one at a time.
Tabs
tabs4
A set of layered sections of content, known as tab panels, that are displayed one at a time.
Tabs
tabs5
A set of layered sections of content, known as tab panels, that are displayed one at a time.
Tabs
tabs6
Tabs built with shadcn/ui.
Tabs
tabs7
Tabs built with shadcn/ui.
Tabs
tabs8
Tabs built with shadcn/ui.
Tabs
tabs9
Tabs built with shadcn/ui.
Textarea
textarea1
A multi-line text input control.
Textarea
textarea10
Textarea built with shadcn/ui.
Textarea
textarea11
Textarea built with shadcn/ui.
Textarea
textarea2
A multi-line text input control.
Textarea
textarea3
A multi-line text input control.
Textarea
textarea4
A multi-line text input control.
Textarea
textarea5
A multi-line text input control.
Textarea
textarea6
A multi-line text input control.
Textarea
textarea7
Textarea built with shadcn/ui.
Textarea
textarea8
Textarea built with shadcn/ui.
Textarea
textarea9
Textarea built with shadcn/ui.
Toast
toast-component1
Toast built with shadcn/ui.
Sonner toast
toast1
An opinionated toast component for React.
Sonner toast
toast10
Sonner toast built with shadcn/ui.
Sonner toast
toast11
Sonner toast built with shadcn/ui.
Sonner toast
toast12
Sonner toast built with shadcn/ui.
Sonner toast
toast2
An opinionated toast component for React.
Sonner toast
toast3
An opinionated toast component for React.
Sonner toast
toast4
An opinionated toast component for React.
Sonner toast
toast5
An opinionated toast component for React.
Sonner toast
toast6
An opinionated toast component for React.
Sonner toast
toast7
Sonner toast built with shadcn/ui.
Sonner toast
toast8
Sonner toast built with shadcn/ui.
Sonner toast
toast9
Sonner toast built with shadcn/ui.
Toggle
toggle-component8
Toggle built with shadcn/ui.
Toggle
toggle1
A two-state button that can be either on or off.
Toggle
toggle2
A two-state button that can be either on or off.
Toggle
toggle3
A two-state button that can be either on or off.
Toggle
toggle4
A two-state button that can be either on or off.
Toggle
toggle5
A two-state button that can be either on or off.
Toggle
toggle6
A two-state button that can be either on or off.
Toggle
toggle7
Toggle built with shadcn/ui.
Tooltip
tooltip1
A tooltip is a small overlay that appears when the user hovers over an element.
Tooltip
tooltip2
A tooltip is a small overlay that appears when the user hovers over an element.
Tooltip
tooltip3
A tooltip is a small overlay that appears when the user hovers over an element.
Tooltip
tooltip4
A tooltip is a small overlay that appears when the user hovers over an element.
Tooltip
tooltip5
A tooltip is a small overlay that appears when the user hovers over an element.
Tooltip
tooltip6
Tooltip built with shadcn/ui.
Tooltip
tooltip7
Tooltip built with shadcn/ui.
Tooltip
tooltip8
Tooltip built with shadcn/ui.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information
Accordion
accordion1
A vertically stacked set of interactive headings that each reveal a section of content.
Accordion
accordion10
Accordion built with shadcn/ui.
Accordion
accordion11
Accordion built with shadcn/ui.
Accordion
accordion12
Accordion built with shadcn/ui.
Accordion
accordion2
A vertically stacked set of interactive headings that each reveal a section of content.
Accordion
accordion3
A vertically stacked set of interactive headings that each reveal a section of content.
Accordion
accordion4
Accordion built with shadcn/ui.
Accordion
accordion5
Accordion built with shadcn/ui.
Accordion
accordion6
Accordion built with shadcn/ui.
Accordion
accordion7
Accordion built with shadcn/ui.
Accordion
accordion8
Accordion built with shadcn/ui.
Accordion
accordion9
Accordion built with shadcn/ui.
Alert dialog
alert-dialog1
A modal dialog that interrupts the user with important content and expects a response.
Alert dialog
alert-dialog10
Alert dialog built with shadcn/ui.
Alert dialog
alert-dialog11
Alert dialog built with shadcn/ui.
Alert dialog
alert-dialog12
Alert dialog built with shadcn/ui.
Alert dialog
alert-dialog13
Alert dialog built with shadcn/ui.
Alert dialog
alert-dialog14
Alert dialog built with shadcn/ui.
Alert dialog
alert-dialog15
Alert dialog built with shadcn/ui.
Alert dialog
alert-dialog16
Alert dialog built with shadcn/ui.
Alert dialog
alert-dialog2
A modal dialog that interrupts the user with important content and expects a response.
Alert dialog
alert-dialog3
A modal dialog that interrupts the user with important content and expects a response.
Alert dialog
alert-dialog4
A modal dialog that interrupts the user with important content and expects a response.
Alert dialog
alert-dialog5
Alert dialog built with shadcn/ui.
Alert dialog
alert-dialog6
Alert dialog built with shadcn/ui.
Alert dialog
alert-dialog7
Alert dialog built with shadcn/ui.
Alert dialog
alert-dialog8
Alert dialog built with shadcn/ui.
Alert dialog
alert-dialog9
Alert dialog built with shadcn/ui.
Alert
alert1
Displays a callout for user attention.
Alert
alert10
Alert built with shadcn/ui.
Alert
alert11
Alert built with shadcn/ui.
Alert
alert12
Alert built with shadcn/ui.
Alert
alert13
Alert built with shadcn/ui.
Alert
alert14
Alert built with shadcn/ui.
Alert
alert15
Alert built with shadcn/ui.
Alert
alert2
Displays a callout for user attention.
Alert
alert3
Displays a callout for user attention.
Alert
alert4
Displays a callout for user attention.
Alert
alert5
Displays a callout for user attention.
Alert
alert6
Displays a callout for user attention.
Alert
alert7
Alert built with shadcn/ui.
Alert
alert8
Alert built with shadcn/ui.
Alert
alert9
Alert built with shadcn/ui.
Attachment
attachment1
A component for displaying file attachments with media previews, upload states, and actions.
Attachment
attachment2
A component for displaying file attachments with media previews, upload states, and actions.
Attachment
attachment3
A component for displaying file attachments with media previews, upload states, and actions.
Attachment
attachment4
A component for displaying file attachments with media previews, upload states, and actions.
Attachment
attachment5
Attachment built with shadcn/ui.
Autocomplete
autocomplete1
A text field that allows users to select an option from a list.
Autocomplete
autocomplete2
A text field that allows users to select an option from a list.
Autocomplete
autocomplete3
A text field that allows users to select an option from a list.
Autocomplete
autocomplete4
A text field that allows users to select an option from a list.
Autocomplete
autocomplete5
Autocomplete built with shadcn/ui.
Avatar
avatar1
An image element with a fallback for representing the user.
Avatar
avatar10
Avatar built with shadcn/ui.
Avatar
avatar11
Avatar built with shadcn/ui.
Avatar
avatar12
Avatar built with shadcn/ui.
Avatar
avatar13
Avatar built with shadcn/ui.
Avatar
avatar14
Avatar built with shadcn/ui.
Avatar
avatar15
Avatar built with shadcn/ui.
Avatar
avatar16
Avatar built with shadcn/ui.
Avatar
avatar17
Avatar built with shadcn/ui.
Avatar
avatar18
Avatar built with shadcn/ui.
Avatar
avatar19
Avatar built with shadcn/ui.
Avatar
avatar2
An image element with a fallback for representing the user.
Avatar
avatar20
Avatar built with shadcn/ui.
Avatar
avatar21
Avatar built with shadcn/ui.
Avatar
avatar3
An image element with a fallback for representing the user.
Avatar
avatar4
An image element with a fallback for representing the user.
Avatar
avatar5
Avatar built with shadcn/ui.
Avatar
avatar6
Avatar built with shadcn/ui.
Avatar
avatar7
Avatar built with shadcn/ui.
Avatar
avatar8
Avatar built with shadcn/ui.
Avatar
avatar9
Avatar built with shadcn/ui.
Badge
badge1
Displays a badge or a component that looks like a badge.
Badge
badge10
Badge built with shadcn/ui.
Badge
badge11
Badge built with shadcn/ui.
Badge
badge12
Badge built with shadcn/ui.
Badge
badge2
Displays a badge or a component that looks like a badge.
Badge
badge3
Displays a badge or a component that looks like a badge.
Badge
badge4
Displays a badge or a component that looks like a badge.
Badge
badge5
Displays a badge or a component that looks like a badge.
Badge
badge6
Displays a badge or a component that looks like a badge.
Badge
badge7
Badge built with shadcn/ui.
Badge
badge8
Badge built with shadcn/ui.
Badge
badge9
Badge built with shadcn/ui.
Breadcrumb
breadcrumb1
Displays the path to the current resource using a hierarchy of links.
Breadcrumb
breadcrumb2
Displays the path to the current resource using a hierarchy of links.
Breadcrumb
breadcrumb3
Displays the path to the current resource using a hierarchy of links.
Breadcrumb
breadcrumb4
Displays the path to the current resource using a hierarchy of links.
Breadcrumb
breadcrumb5
Displays the path to the current resource using a hierarchy of links.
Breadcrumb
breadcrumb6
Breadcrumb built with shadcn/ui.
Bubble
bubble1
Chat bubble components for displaying messages with grouping, alignment, and reactions.
Button group
button-group1
A container that groups related buttons together with consistent styling.
Button group
button-group10
Button group built with shadcn/ui.
Button group
button-group11
Button group built with shadcn/ui.
Button group
button-group12
Button group built with shadcn/ui.
Button group
button-group13
Button group built with shadcn/ui.
Button group
button-group14
Button group built with shadcn/ui.
Button group
button-group15
Button group built with shadcn/ui.
Button group
button-group16
Button group built with shadcn/ui.
Button group
button-group17
Button group built with shadcn/ui.
Button group
button-group18
Button group built with shadcn/ui.
Button group
button-group19
Button group built with shadcn/ui.
Button group
button-group2
A container that groups related buttons together with consistent styling.
Button group
button-group20
Button group built with shadcn/ui.
Button group
button-group3
A container that groups related buttons together with consistent styling.
Button group
button-group4
A container that groups related buttons together with consistent styling.
Button group
button-group5
A container that groups related buttons together with consistent styling.
Button group
button-group6
Button group built with shadcn/ui.
Button group
button-group7
Button group built with shadcn/ui.
Button group
button-group8
Button group built with shadcn/ui.
Button group
button-group9
Button group built with shadcn/ui.
Button
button1
Displays a button or a component that looks like a button.
Button
button10
Button built with shadcn/ui.
Button
button11
Button built with shadcn/ui.
Button
button12
Button built with shadcn/ui.
Button
button13
Button built with shadcn/ui.
Button
button14
Button built with shadcn/ui.
Button
button15
Button built with shadcn/ui.
Button
button16
Button built with shadcn/ui.
Button
button17
Button built with shadcn/ui.
Button
button18
Button built with shadcn/ui.
Button
button19
Button built with shadcn/ui.
Button
button2
Displays a button or a component that looks like a button.
Button
button20
Button built with shadcn/ui.
Button
button21
Button built with shadcn/ui.
Button
button22
Button built with shadcn/ui.
Button
button23
Button built with shadcn/ui.
Button
button24
Button built with shadcn/ui.
Button
button25
Button built with shadcn/ui.
Button
button26
Button built with shadcn/ui.
Button
button27
Button built with shadcn/ui.
Button
button3
Displays a button or a component that looks like a button.
Button
button4
Displays a button or a component that looks like a button.
Button
button5
Displays a button or a component that looks like a button.
Button
button6
Displays a button or a component that looks like a button.
Button
button7
Button built with shadcn/ui.
Button
button8
Button built with shadcn/ui.
Button
button9
Button built with shadcn/ui.
Calendar
calendar1
A calendar component that allows users to select a date or a range of dates.
Calendar
calendar10
Calendar built with shadcn/ui.
Calendar
calendar11
Calendar built with shadcn/ui.
Calendar
calendar12
Calendar built with shadcn/ui.
Calendar
calendar13
Calendar built with shadcn/ui.
Calendar
calendar14
Calendar built with shadcn/ui.
Calendar
calendar15
Calendar built with shadcn/ui.
Calendar
calendar2
A calendar component that allows users to select a date or a range of dates.
Calendar
calendar3
A calendar component that allows users to select a date or a range of dates.
Calendar
calendar4
A calendar component that allows users to select a date or a range of dates.
Calendar
calendar5
A calendar component that allows users to select a date or a range of dates.
Calendar
calendar6
Calendar built with shadcn/ui.
Calendar
calendar7
Calendar built with shadcn/ui.
Calendar
calendar8
Calendar built with shadcn/ui.
Calendar
calendar9
Calendar built with shadcn/ui.
Card
card1
Displays a card with header, content, and footer.
Card
card2
Displays a card with header, content, and footer.
Card
card3
Displays a card with header, content, and footer.
Card
card4
Displays a card with header, content, and footer.
Card
card5
Displays a card with header, content, and footer.
Card
card6
Card built with shadcn/ui.
Card
card7
Card built with shadcn/ui.
Card
card8
Card built with shadcn/ui.
Carousel
carousel1
A carousel with motion and swipe built using Embla Carousel.
Carousel
carousel10
Carousel built with shadcn/ui.
Carousel
carousel11
Carousel built with shadcn/ui.
Carousel
carousel12
Carousel built with shadcn/ui.
Carousel
carousel2
A carousel with motion and swipe built using Embla Carousel.
Carousel
carousel3
A carousel with motion and swipe built using Embla Carousel.
Carousel
carousel4
A carousel with motion and swipe built using Embla Carousel.
Carousel
carousel5
Carousel built with shadcn/ui.
Carousel
carousel6
Carousel built with shadcn/ui.
Carousel
carousel7
Carousel built with shadcn/ui.
Carousel
carousel8
Carousel built with shadcn/ui.
Carousel
carousel9
Carousel built with shadcn/ui.
Checkbox
checkbox1
A control that allows the user to toggle between checked and not checked.
Checkbox
checkbox10
Checkbox built with shadcn/ui.
Checkbox
checkbox11
Checkbox built with shadcn/ui.
Checkbox
checkbox12
Checkbox built with shadcn/ui.
Checkbox
checkbox13
Checkbox built with shadcn/ui.
Checkbox
checkbox2
A control that allows the user to toggle between checked and not checked.
Checkbox
checkbox3
A control that allows the user to toggle between checked and not checked.
Checkbox
checkbox4
A control that allows the user to toggle between checked and not checked.
Checkbox
checkbox5
A control that allows the user to toggle between checked and not checked.
Checkbox
checkbox6
Checkbox built with shadcn/ui.
Checkbox
checkbox7
Checkbox built with shadcn/ui.
Checkbox
checkbox8
Checkbox built with shadcn/ui.
Checkbox
checkbox9
Checkbox built with shadcn/ui.
Collapsible
collapsible1
An interactive component which expands/collapses a panel.
Collapsible
collapsible2
An interactive component which expands/collapses a panel.
Collapsible
collapsible3
An interactive component which expands/collapses a panel.
Collapsible
collapsible4
An interactive component which expands/collapses a panel.
Collapsible
collapsible5
Collapsible built with shadcn/ui.
Collapsible
collapsible6
Collapsible built with shadcn/ui.
Collapsible
collapsible7
Collapsible built with shadcn/ui.
Collapsible
collapsible8
Collapsible built with shadcn/ui.
Combobox
combobox1
Autocomplete input and command palette with a list of suggestions.
Combobox
combobox10
Combobox built with shadcn/ui.
Combobox
combobox11
Combobox built with shadcn/ui.
Combobox
combobox12
Combobox built with shadcn/ui.
Combobox
combobox2
Autocomplete input and command palette with a list of suggestions.
Combobox
combobox3
Autocomplete input and command palette with a list of suggestions.
Combobox
combobox4
Autocomplete input and command palette with a list of suggestions.
Combobox
combobox5
Combobox built with shadcn/ui.
Combobox
combobox6
Combobox built with shadcn/ui.
Combobox
combobox7
Combobox built with shadcn/ui.
Combobox
combobox8
Combobox built with shadcn/ui.
Combobox
combobox9
Combobox built with shadcn/ui.
Command
command1
Command menu for search and quick actions.
Command
command2
Command menu for search and quick actions.
Command
command3
Command menu for search and quick actions.
Command
command4
Command menu for search and quick actions.
Command
command5
Command menu for search and quick actions.
Command
command6
Command built with shadcn/ui.
Command
command7
Command built with shadcn/ui.
Command
command8
Command built with shadcn/ui.
Command
command9
Command built with shadcn/ui.
Context menu
context-menu1
A context menu is a menu that appears when the user right-clicks on an element.
Data table
data-table1
Powerful table and datagrids built using TanStack Table.
Data table
data-table2
Powerful table and datagrids built using TanStack Table.
Data table
data-table3
Powerful table and datagrids built using TanStack Table.
Data table
data-table4
Powerful table and datagrids built using TanStack Table.
Data table
data-table5
Data table built with shadcn/ui.
Data table
data-table6
Data table built with shadcn/ui.
Drawer
drawer1
A drawer is a panel that slides in from the side of the screen.
Drawer
drawer2
A drawer is a panel that slides in from the side of the screen.
Drawer
drawer3
A drawer is a panel that slides in from the side of the screen.
Drawer
drawer4
A drawer is a panel that slides in from the side of the screen.
Drawer
drawer5
A drawer is a panel that slides in from the side of the screen.
Drawer
drawer6
A drawer is a panel that slides in from the side of the screen.
Dropdown menu
dropdown-menu1
A dropdown menu is a menu that appears when the user clicks on a button.
Dropdown menu
dropdown-menu10
Dropdown menu built with shadcn/ui.
Dropdown menu
dropdown-menu11
Dropdown menu built with shadcn/ui.
Dropdown menu
dropdown-menu12
Dropdown menu built with shadcn/ui.
Dropdown menu
dropdown-menu2
A dropdown menu is a menu that appears when the user clicks on a button.
Dropdown menu
dropdown-menu3
A dropdown menu is a menu that appears when the user clicks on a button.
Dropdown menu
dropdown-menu4
A dropdown menu is a menu that appears when the user clicks on a button.
Dropdown menu
dropdown-menu5
A dropdown menu is a menu that appears when the user clicks on a button.
Dropdown menu
dropdown-menu6
Dropdown menu built with shadcn/ui.
Dropdown menu
dropdown-menu7
Dropdown menu built with shadcn/ui.
Dropdown menu
dropdown-menu8
Dropdown menu built with shadcn/ui.
Dropdown menu
dropdown-menu9
Dropdown menu built with shadcn/ui.
Empty
empty1
An empty state component.
Empty
empty2
An empty state component.
Empty
empty3
An empty state component.
Empty
empty4
An empty state component.
Empty
empty5
An empty state component.
Empty
empty6
Empty built with shadcn/ui.
Empty
empty7
Empty built with shadcn/ui.
Empty
empty8
Empty built with shadcn/ui.
Field
field1
A field is a form control that allows the user to enter a value.
Field
field10
Field built with shadcn/ui.
Field
field2
A field is a form control that allows the user to enter a value.
Field
field3
A field is a form control that allows the user to enter a value.
Field
field4
A field is a form control that allows the user to enter a value.
Field
field5
A field is a form control that allows the user to enter a value.
Field
field6
A field is a form control that allows the user to enter a value.
Field
field7
Field built with shadcn/ui.
Field
field8
Field built with shadcn/ui.
Field
field9
Field built with shadcn/ui.
Hover card
hover-card1
A hover card is a card that appears when the user hovers over an element.
Hover card
hover-card2
A hover card is a card that appears when the user hovers over an element.
Hover card
hover-card3
A hover card is a card that appears when the user hovers over an element.
Input
input-component26
Input built with shadcn/ui.
Input
input1
A text input with a label, placeholder, and helper text.
Input
input10
Input built with shadcn/ui.
Input
input11
Input built with shadcn/ui.
Input
input12
Input built with shadcn/ui.
Input
input13
Input built with shadcn/ui.
Input
input14
Input built with shadcn/ui.
Input
input15
Input built with shadcn/ui.
Input
input16
Input built with shadcn/ui.
Input
input17
Input built with shadcn/ui.
Input
input18
Input built with shadcn/ui.
Input
input19
Input built with shadcn/ui.
Input
input2
A text input with a label, placeholder, and helper text.
Input
input20
Input built with shadcn/ui.
Input
input21
Input built with shadcn/ui.
Input
input22
Input built with shadcn/ui.
Input
input23
Input built with shadcn/ui.
Input
input24
Input built with shadcn/ui.
Input
input25
Input built with shadcn/ui.
Input
input3
A text input with a label, placeholder, and helper text.
Input
input4
A text input with a label, placeholder, and helper text.
Input
input5
A text input with a label, placeholder, and helper text.
Input
input6
A text input with a label, placeholder, and helper text.
Input
input7
Input built with shadcn/ui.
Input
input8
Input built with shadcn/ui.
Input
input9
Input built with shadcn/ui.
Item
item1
A versatile component for displaying content with media, title, description, and actions.
Item
item10
Item built with shadcn/ui.
Item
item2
A versatile component for displaying content with media, title, description, and actions.
Item
item3
A versatile component for displaying content with media, title, description, and actions.
Item
item4
A versatile component for displaying content with media, title, description, and actions.
Item
item5
A versatile component for displaying content with media, title, description, and actions.
Item
item6
Item built with shadcn/ui.
Item
item7
Item built with shadcn/ui.
Item
item8
Item built with shadcn/ui.
Item
item9
Item built with shadcn/ui.
Menubar
menubar1
A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
Native select
native-select1
Native select built with shadcn/ui.
Native select
native-select2
Native select built with shadcn/ui.
Native select
native-select3
Native select built with shadcn/ui.
Native select
native-select4
Native select built with shadcn/ui.
Native select
native-select5
Native select built with shadcn/ui.
Native select
native-select6
Native select built with shadcn/ui.
Native select
native-select7
Native select built with shadcn/ui.
Native select
native-select8
Native select built with shadcn/ui.
Native select
native-select9
Native select built with shadcn/ui.
Navigation menu
navigation-menu-component3
Navigation menu built with shadcn/ui.
Navigation menu
navigation-menu2
A collection of links for navigating websites.
Navigation menu
navigation-menu3
A collection of links for navigating websites.
Navigation menu
navigation-menu4
A collection of links for navigating websites.
Pagination
pagination1
Pagination with page navigation, next and previous links.
Pagination
pagination10
Pagination built with shadcn/ui.
Pagination
pagination11
Pagination built with shadcn/ui.
Pagination
pagination12
Pagination built with shadcn/ui.
Pagination
pagination2
Pagination with page navigation, next and previous links.
Pagination
pagination3
Pagination with page navigation, next and previous links.
Pagination
pagination4
Pagination with page navigation, next and previous links.
Pagination
pagination5
Pagination with page navigation, next and previous links.
Pagination
pagination6
Pagination built with shadcn/ui.
Pagination
pagination7
Pagination built with shadcn/ui.
Pagination
pagination8
Pagination built with shadcn/ui.
Pagination
pagination9
Pagination built with shadcn/ui.
Popover
popover1
Displays rich content in a portal, triggered by a button.
Popover
popover2
Displays rich content in a portal, triggered by a button.
Popover
popover3
Displays rich content in a portal, triggered by a button.
Popover
popover4
Displays rich content in a portal, triggered by a button.
Popover
popover5
Displays rich content in a portal, triggered by a button.
Popover
popover6
Displays rich content in a portal, triggered by a button.
Progress
progress1
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Progress
progress10
Progress built with shadcn/ui.
Progress
progress2
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Progress
progress3
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Progress
progress4
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Progress
progress5
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Progress
progress6
Progress built with shadcn/ui.
Progress
progress7
Progress built with shadcn/ui.
Progress
progress8
Progress built with shadcn/ui.
Progress
progress9
Progress built with shadcn/ui.
Radio group
radio-group1
A group of radio buttons that allows the user to select a single option from a list.
Radio group
radio-group10
Radio group built with shadcn/ui.
Radio group
radio-group11
Radio group built with shadcn/ui.
Radio group
radio-group12
Radio group built with shadcn/ui.
Radio group
radio-group13
Radio group built with shadcn/ui.
Radio group
radio-group14
Radio group built with shadcn/ui.
Radio group
radio-group15
Radio group built with shadcn/ui.
Radio group
radio-group2
A group of radio buttons that allows the user to select a single option from a list.
Radio group
radio-group3
A group of radio buttons that allows the user to select a single option from a list.
Radio group
radio-group4
A group of radio buttons that allows the user to select a single option from a list.
Radio group
radio-group5
A group of radio buttons that allows the user to select a single option from a list.
Radio group
radio-group6
Radio group built with shadcn/ui.
Radio group
radio-group7
Radio group built with shadcn/ui.
Radio group
radio-group8
Radio group built with shadcn/ui.
Radio group
radio-group9
Radio group built with shadcn/ui.
Scroll area
scroll-area1
A scroll area is a container that allows the user to scroll through a large amount of content.
Scroll area
scroll-area2
A scroll area is a container that allows the user to scroll through a large amount of content.
Scroll area
scroll-area3
A scroll area is a container that allows the user to scroll through a large amount of content.
Scroll area
scroll-area4
A scroll area is a container that allows the user to scroll through a large amount of content.
Scroll area
scroll-area5
Scroll area built with shadcn/ui.
Scroll area
scroll-area6
Scroll area built with shadcn/ui.
Select
select1
A select is a form control that allows the user to select a value from a list of options.
Select
select10
Select built with shadcn/ui.
Select
select11
Select built with shadcn/ui.
Select
select12
Select built with shadcn/ui.
Select
select13
Select built with shadcn/ui.
Select
select14
Select built with shadcn/ui.
Select
select15
Select built with shadcn/ui.
Select
select2
A select is a form control that allows the user to select a value from a list of options.
Select
select3
A select is a form control that allows the user to select a value from a list of options.
Select
select4
A select is a form control that allows the user to select a value from a list of options.
Select
select5
Select built with shadcn/ui.
Select
select6
Select built with shadcn/ui.
Select
select7
Select built with shadcn/ui.
Select
select8
Select built with shadcn/ui.
Select
select9
Select built with shadcn/ui.
Separator
separator1
Visually or semantically separates content.
Separator
separator10
Separator built with shadcn/ui.
Separator
separator11
Separator built with shadcn/ui.
Separator
separator12
Separator built with shadcn/ui.
Separator
separator13
Separator built with shadcn/ui.
Separator
separator14
Separator built with shadcn/ui.
Separator
separator15
Separator built with shadcn/ui.
Separator
separator16
Separator built with shadcn/ui.
Separator
separator2
Visually or semantically separates content.
Separator
separator3
Visually or semantically separates content.
Separator
separator4
Visually or semantically separates content.
Separator
separator5
Visually or semantically separates content.
Separator
separator6
Visually or semantically separates content.
Separator
separator7
Separator built with shadcn/ui.
Separator
separator8
Separator built with shadcn/ui.
Separator
separator9
Separator built with shadcn/ui.
Sheet
sheet1
Extends the Dialog component to display content that complements the main content of the screen.
Sheet
sheet2
Extends the Dialog component to display content that complements the main content of the screen.
Sheet
sheet3
Extends the Dialog component to display content that complements the main content of the screen.
Sheet
sheet4
Extends the Dialog component to display content that complements the main content of the screen.
Sheet
sheet5
Extends the Dialog component to display content that complements the main content of the screen.
Sheet
sheet6
Sheet built with shadcn/ui.
Sheet
sheet7
Sheet built with shadcn/ui.
Sheet
sheet8
Sheet built with shadcn/ui.
Skeleton
skeleton1
Use to show a placeholder while content is loading.
Skeleton
skeleton2
Use to show a placeholder while content is loading.
Skeleton
skeleton3
Use to show a placeholder while content is loading.
Skeleton
skeleton4
Use to show a placeholder while content is loading.
Skeleton
skeleton5
Use to show a placeholder while content is loading.
Skeleton
skeleton6
Use to show a placeholder while content is loading.
Skeleton
skeleton7
Skeleton built with shadcn/ui.
Slider
slider1
An input where the user selects a value from within a given range.
Slider
slider10
Slider built with shadcn/ui.
Slider
slider11
Slider built with shadcn/ui.
Slider
slider12
Slider built with shadcn/ui.
Slider
slider13
Slider built with shadcn/ui.
Slider
slider2
An input where the user selects a value from within a given range.
Slider
slider3
An input where the user selects a value from within a given range.
Slider
slider4
An input where the user selects a value from within a given range.
Slider
slider5
An input where the user selects a value from within a given range.
Slider
slider6
An input where the user selects a value from within a given range.
Slider
slider7
Slider built with shadcn/ui.
Slider
slider8
Slider built with shadcn/ui.
Slider
slider9
Slider built with shadcn/ui.
Spinner
spinner1
An indicator that can be used to show a loading state.
Spinner
spinner10
Spinner built with shadcn/ui.
Spinner
spinner11
Spinner built with shadcn/ui.
Spinner
spinner12
Spinner built with shadcn/ui.
Spinner
spinner13
Spinner built with shadcn/ui.
Spinner
spinner14
Spinner built with shadcn/ui.
Spinner
spinner2
An indicator that can be used to show a loading state.
Spinner
spinner3
An indicator that can be used to show a loading state.
Spinner
spinner4
An indicator that can be used to show a loading state.
Spinner
spinner5
An indicator that can be used to show a loading state.
Spinner
spinner6
An indicator that can be used to show a loading state.
Spinner
spinner7
Spinner built with shadcn/ui.
Spinner
spinner8
Spinner built with shadcn/ui.
Spinner
spinner9
Spinner built with shadcn/ui.
Switch
switch1
A control that allows the user to toggle between on and off.
Switch
switch10
Switch built with shadcn/ui.
Switch
switch2
A control that allows the user to toggle between on and off.
Switch
switch3
A control that allows the user to toggle between on and off.
Switch
switch4
A control that allows the user to toggle between on and off.
Switch
switch5
A control that allows the user to toggle between on and off.
Switch
switch6
A control that allows the user to toggle between on and off.
Switch
switch7
Switch built with shadcn/ui.
Switch
switch8
Switch built with shadcn/ui.
Switch
switch9
Switch built with shadcn/ui.
Table
table1
A table displays tabular data in rows and columns.
Table
table10
Table built with shadcn/ui.
Table
table11
Table built with shadcn/ui.
Table
table12
Table built with shadcn/ui.
Table
table2
A table displays tabular data in rows and columns.
Table
table3
A table displays tabular data in rows and columns.
Table
table4
A table displays tabular data in rows and columns.
Table
table5
A table displays tabular data in rows and columns.
Table
table6
Table built with shadcn/ui.
Table
table7
Table built with shadcn/ui.
Table
table8
Table built with shadcn/ui.
Table
table9
Table built with shadcn/ui.
Tabs
tabs1
A set of layered sections of content, known as tab panels, that are displayed one at a time.
Tabs
tabs10
Tabs built with shadcn/ui.
Tabs
tabs11
Tabs built with shadcn/ui.
Tabs
tabs12
Tabs built with shadcn/ui.
Tabs
tabs13
Tabs built with shadcn/ui.
Tabs
tabs14
Tabs built with shadcn/ui.
Tabs
tabs15
Tabs built with shadcn/ui.
Tabs
tabs2
A set of layered sections of content, known as tab panels, that are displayed one at a time.
Tabs
tabs3
A set of layered sections of content, known as tab panels, that are displayed one at a time.
Tabs
tabs4
A set of layered sections of content, known as tab panels, that are displayed one at a time.
Tabs
tabs5
A set of layered sections of content, known as tab panels, that are displayed one at a time.
Tabs
tabs6
Tabs built with shadcn/ui.
Tabs
tabs7
Tabs built with shadcn/ui.
Tabs
tabs8
Tabs built with shadcn/ui.
Tabs
tabs9
Tabs built with shadcn/ui.
Textarea
textarea1
A multi-line text input control.
Textarea
textarea10
Textarea built with shadcn/ui.
Textarea
textarea11
Textarea built with shadcn/ui.
Textarea
textarea2
A multi-line text input control.
Textarea
textarea3
A multi-line text input control.
Textarea
textarea4
A multi-line text input control.
Textarea
textarea5
A multi-line text input control.
Textarea
textarea6
A multi-line text input control.
Textarea
textarea7
Textarea built with shadcn/ui.
Textarea
textarea8
Textarea built with shadcn/ui.
Textarea
textarea9
Textarea built with shadcn/ui.
Toast
toast-component1
Toast built with shadcn/ui.
Sonner toast
toast1
An opinionated toast component for React.
Sonner toast
toast10
Sonner toast built with shadcn/ui.
Sonner toast
toast11
Sonner toast built with shadcn/ui.
Sonner toast
toast12
Sonner toast built with shadcn/ui.
Sonner toast
toast2
An opinionated toast component for React.
Sonner toast
toast3
An opinionated toast component for React.
Sonner toast
toast4
An opinionated toast component for React.
Sonner toast
toast5
An opinionated toast component for React.
Sonner toast
toast6
An opinionated toast component for React.
Sonner toast
toast7
Sonner toast built with shadcn/ui.
Sonner toast
toast8
Sonner toast built with shadcn/ui.
Sonner toast
toast9
Sonner toast built with shadcn/ui.
Toggle
toggle-component8
Toggle built with shadcn/ui.
Toggle
toggle1
A two-state button that can be either on or off.
Toggle
toggle2
A two-state button that can be either on or off.
Toggle
toggle3
A two-state button that can be either on or off.
Toggle
toggle4
A two-state button that can be either on or off.
Toggle
toggle5
A two-state button that can be either on or off.
Toggle
toggle6
A two-state button that can be either on or off.
Toggle
toggle7
Toggle built with shadcn/ui.
Tooltip
tooltip1
A tooltip is a small overlay that appears when the user hovers over an element.
Tooltip
tooltip2
A tooltip is a small overlay that appears when the user hovers over an element.
Tooltip
tooltip3
A tooltip is a small overlay that appears when the user hovers over an element.
Tooltip
tooltip4
A tooltip is a small overlay that appears when the user hovers over an element.
Tooltip
tooltip5
A tooltip is a small overlay that appears when the user hovers over an element.
Tooltip
tooltip6
Tooltip built with shadcn/ui.
Tooltip
tooltip7
Tooltip built with shadcn/ui.
Tooltip
tooltip8
Tooltip built with shadcn/ui.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information