S
shadcnblockscom/shadcn-ui-blocks
Default Accordionaccordion-01A default accordion component
Outline Accordionaccordion-02An outline styled accordion
Box Accordionaccordion-03A box styled accordion
Contained Accordionaccordion-04A contained accordion component
Box Contained Accordionaccordion-05A box-contained accordion component
Tabs Accordionaccordion-06A tabs-styled accordion component
Highlight Active Item Accordionaccordion-07An accordion that highlights the active item
Multiple Expanded at a time Accordionaccordion-08An accordion that allows multiple items to be expanded at once
Expand Icon Accordionaccordion-09An accordion with a custom expand icon
Icon Accordionaccordion-10An accordion with icons
Media Content Accordionaccordion-11An accordion with media content
Disabled Item Accordionaccordion-12An accordion with disabled items
Primary Alertalert-01A primary alert component
Destructive Alertalert-02A destructive alert component
Success Alertalert-03A success alert component
Warning Alertalert-04A warning alert component
Info Alertalert-05An info alert component
Alert With Backgroundalert-06An alert with background component
Soft Alertalert-07A soft alert component
Bootstrap Alertalert-08A bootstrap-styled alert component
Callout Alertalert-09A callout alert component
Alert With Actionsalert-10An alert with actions component
Default Alert Dialogalert-dialog-01A default alert dialog component
Alert Dialog With Iconalert-dialog-02An alert dialog with icon component
Destructive Alert Dialogalert-dialog-03A destructive alert dialog component
Info Alert Dialogalert-dialog-04An info alert dialog component
Customized Header Alert Dialogalert-dialog-05An alert dialog with customized header
Customized Footer Alert Dialogalert-dialog-06An alert dialog with customized footer
Default Avataravatar-01A default avatar component
Clickable Avataravatar-02A clickable avatar component
Avatar with Tooltipavatar-03An avatar with tooltip component
Avatar with Textavatar-04An avatar with text component
Avatar with Hover Cardavatar-05An avatar with hover card component
Avatar Sizeavatar-06Different sizes of avatar component
Avatar Coloravatar-07Different colors of avatar component
Avatar Shapeavatar-08Different shapes of avatar component
Avatar Fallbackavatar-09Avatar with fallback component
Avatar with Ringavatar-10Avatar with ring component
Avatar Statusavatar-11Avatar with status indicator component
Avatar Groupavatar-12Group of avatars component
Avatar Group with Maxavatar-13Group of avatars with maximum limit component
Avatar Group with Maxavatar-14Group of avatars with maximum limit component
Avatar Group with Maxavatar-15Group of avatars with maximum limit component
Avatar Dropdown Menuavatar-16An avatar dropdown menu component
Default Badgebadge-01A default badge component
Secondary Badgebadge-02A secondary badge component
Outline Badgebadge-03An outline badge component
Destructive Badgebadge-04A destructive badge component
Rounded Badgebadge-05A rounded badge component
Gradient Badgebadge-06A gradient badge component
Gradient Outline Badgebadge-07A gradient outline badge component
Soft Badgebadge-08A soft badge component
Status Badgebadge-09A status badge component
Badge with Imagebadge-10A badge with image component
Badge with Iconbadge-11A badge with icon component
Clickable Badgebadge-12A clickable badge component
Clickable Link Badgebadge-13A clickable link badge component
Badge with numberbadge-14A badge with number component
Plan features with badgebadge-15A plan features with badge component
Tabs with badgebadge-16A tabs with badge component
Icon buttonbadge-17An icon button component
Default Breadcrumbbreadcrumb-01A default breadcrumb component
Breadcrumb with Slash Separatorbreadcrumb-02A breadcrumb with slash separator component
Breadcrumb with Chevrons Separatorbreadcrumb-03A breadcrumb with chevrons separator component
Breadcrumb with Dot Separatorbreadcrumb-04A breadcrumb with dot separator component
Breadcrumb with Iconbreadcrumb-05A breadcrumb with icon component
Breadcrumb with Icon (Alternate)breadcrumb-06An alternate breadcrumb with icon component
Breadcrumb with Icon and Labelbreadcrumb-07A breadcrumb with icon and label component
Breadcrumb with Icon and Label (Alternate)breadcrumb-08An alternate breadcrumb with icon and label component
Breadcrumb with Backgroundbreadcrumb-09A breadcrumb with background component
Breadcrumb with Tab Activebreadcrumb-10A breadcrumb with tab active component
Tabs Breadcrumbbreadcrumb-11A tabs breadcrumb component
Tabs Outline Breadcrumbbreadcrumb-12A tabs outline breadcrumb component
Breadcrumb with Dropdownbreadcrumb-13A breadcrumb with dropdown component
Collapsed Breadcrumbbreadcrumb-14A collapsed breadcrumb component
Steps Breadcrumbbreadcrumb-15A steps breadcrumb component
Primary Buttonbutton-01A primary button component
Secondary Buttonbutton-02A secondary button component
Destructive Buttonbutton-03A destructive button component
Outline Buttonbutton-04An outline button component
Icon Buttonbutton-05An icon button component
Loading Buttonbutton-06A loading button component
Split Buttonbutton-07A split button component
Ghost Buttonbutton-08A ghost button component
Gradient Buttonbutton-09A gradient button component
Link Buttonbutton-10A link button component
Social Buttonbutton-11A social button component
Social Login Buttonbutton-12A social login button component
Neon Buttonbutton-13A neon button component
Rounded Buttonbutton-14A rounded button component
Toggle Buttonbutton-15A toggle button component
Theme Toggle Buttonbutton-16A theme toggle button component
Full Width Buttonbutton-17A full width button component
Button Groupbutton-18A button group component
Button Group 2button-19Another button group component
Copy Buttonbutton-20A copy button component
Button with Badgebutton-21A button with badge component
Button with Tooltipbutton-22A button with tooltip component
Button with Tap Animationbutton-23A button with tap animation component
Default Cardcard-01A default card component
Card with Backgroundcard-02A card with background component
Create Account Cardcard-03A create account card component
Banner Cardcard-04A banner card component
Pricing Cardcard-05A pricing card component
Post Cardcard-06A post card component
Product Cardcard-07A product card component
Testimonial Cardcard-08A testimonial card component
Default Carouselcarousel-01A default carousel component
Carousel with Multiple Slidescarousel-02A carousel displaying multiple slides at once
Vertical Carouselcarousel-03A vertical orientation carousel
Carousel with Slide Statuscarousel-04A carousel with slide status indicator
Carousel with Slide Status (Alternate)carousel-05An alternate carousel with slide status indicator
Carousel with Paginationcarousel-06A carousel with pagination controls
Carousel with Footercarousel-07A carousel with a footer section
Carousel with Progress Barcarousel-08A carousel with a progress bar indicator
Carousel with Thumbnailscarousel-09A carousel with thumbnail navigation
Carousel with Opacity Transitioncarousel-10A carousel with opacity transition effects
Carousel with Scale Transitioncarousel-11A carousel with scale transition effects
Checkbox with Textcheckbox-01A checkbox with text component
Disabled Checkboxcheckbox-02A disabled checkbox component
Indeterminate Checkboxcheckbox-03An indeterminate checkbox component
Horizontal Checkbox Groupcheckbox-04A horizontal checkbox group component
Vertical Checkbox Groupcheckbox-05A vertical checkbox group component
Controlled Checkboxcheckbox-06A controlled checkbox component
Checkbox Colorscheckbox-07Different colors of checkbox component
Checkbox Sizescheckbox-08Different sizes of checkbox component
Icon Checkboxcheckbox-09A checkbox with custom icon component
Multi Color Picker Checkboxcheckbox-10A multi color picker checkbox component
Card Checkboxcheckbox-11A card checkbox component
Checkbox with Formcheckbox-12A checkbox with form component
Rolescheckbox-13A roles component
Countriescheckbox-14A countries component
Working Dayscheckbox-15A working days component
Notification Settingscheckbox-16A notification settings component
Default Collapsiblecollapsible-01A default collapsible component
Show More Collapsiblecollapsible-02A collapsible component with show more functionality
File Tree Collapsiblecollapsible-03A collapsible component for displaying file trees
Filters Collapsiblecollapsible-04A collapsible component for filter options
Default Dropdown Menudropdown-menu-01A default dropdown menu component
Dropdown Menu with Icondropdown-menu-02A dropdown menu with icon component
Dropdown Menu with Checkboxesdropdown-menu-03A dropdown menu with checkboxes component
Dropdown Menu with Radio Groupdropdown-menu-04A dropdown menu with radio group component
Dropdown Menu with Sub Menudropdown-menu-05A dropdown menu with sub menu component
Dropdown Menu with Shortcutsdropdown-menu-06A dropdown menu with keyboard shortcuts component
Complex Dropdown Menudropdown-menu-07A complex dropdown menu component
Workspace Switcher Dropdown Menudropdown-menu-08A workspace switcher dropdown menu component
Default Inputinput-01A default input component
Ring Inputinput-02A ring input component
Filled Inputinput-03A filled input component
Disabled Inputinput-04A disabled input component
Input with Labelinput-05An input with label component
Input with Buttoninput-06An input with button component
Input with Adornmentinput-07An input with adornment component
Input with Helper Textinput-08An input with helper text component
Input with Error Messageinput-09An input with error message component
Input with Forminput-10An input with form component
File Inputinput-11A file input component
Dropzone Inputinput-12A dropzone input component
Default OTP Inputinput-otp-01A default one-time password input component
OTP Input Without Separatorinput-otp-02An OTP input without separators between fields
Separated OTP Inputinput-otp-03An OTP input with separated input fields
Separated OTP Input (Alternate)input-otp-04An alternate style of separated OTP input fields
Secondary OTP Inputinput-otp-05An OTP input with secondary styling
OTP Input with Custom Separatorinput-otp-06An OTP input with custom separator between fields
OTP Input with Inner Shadowinput-otp-07An OTP input with inner shadow styling
Default Navigation Menunavigation-menu-01A default navigation menu component
Navigation Menu with Iconnavigation-menu-02A navigation menu with icon integration
Navigation Menu with Dropdownnavigation-menu-03A navigation menu with dropdown functionality
Navigation Menu with Active Itemnavigation-menu-04A navigation menu with active item styling
Underlined Navigation Menunavigation-menu-05A navigation menu with underlined styling
Rich Navigation Menunavigation-menu-06A feature-rich navigation menu with advanced styling
Navigation Menu with Iconsnavigation-menu-07A navigation menu with icon elements
Mobile Navigation Menunavigation-menu-08A mobile-friendly navigation menu
Default Paginationpagination-01A default pagination component
Pagination with Primary Buttonspagination-02A pagination component with primary button styling
Pagination with Secondary Buttonspagination-03A pagination component with secondary button styling
Pagination with Rounded Buttonspagination-04A pagination component with rounded button styling
Pagination with Iconpagination-05A pagination component with icons
Pagination with First/Last Pagepagination-06A pagination component with first and last page navigation
Bordered Paginationpagination-07A pagination component with bordered styling
Tabs Paginationpagination-08A pagination component with tabs styling
Secondary Tabs Paginationpagination-09A pagination component with secondary tabs styling
Pagination with Icon and Labelpagination-10A pagination component with icons and labels
Numberless Paginationpagination-11A pagination component without page numbers
Numberless Pagination with Textpagination-12A pagination component without numbers but with text
Pagination with Ellipsispagination-13A pagination component with ellipsis for long page ranges
Table Paginationpagination-14A pagination component designed for tables
Pagination with textpagination-15A pagination component with text
Default Progressprogress-01A default linear progress component
Linear Progress with Labelprogress-02A linear progress component with label
Linear Progress with Custom Colorprogress-03A linear progress component with custom color
Rounded Progressprogress-04A progress component with rounded styling
Gradient Progressprogress-05A progress component with gradient styling
Animated Progressprogress-06A progress component with animation effects
Circular Progressprogress-07A circular progress component
Circular Progress with Labelprogress-08A circular progress component with label
Circular Progress with Custom Labelprogress-09A circular progress component with custom label
Circular Progress with Custom Colorprogress-10A circular progress component with custom color
Circular Progress with Custom Shapeprogress-11A circular progress component with custom shape
Circular Progress with Custom Stroke Widthprogress-12A circular progress component with custom stroke width
Default Radio Groupradio-group-01A default radio group component
Horizontal Radio Groupradio-group-02A radio group component with horizontal layout
Disabled Radio Groupradio-group-03A radio group component with disabled options
Radio Group with Custom Colorsradio-group-04A radio group component with custom color options
Radio Group with Custom Sizeradio-group-05A radio group component with custom size options
Radio Group with Variant Stylingradio-group-06A radio group component with variant styling options
Radio Group with Cards (Style 1)radio-group-07A radio group component with card-style options (style 1)
Radio Group with Cards (Style 2)radio-group-08A radio group component with card-style options (style 2)
Radio Group with Cards (Style 3)radio-group-09A radio group component with card-style options (style 3)
Default Selectselect-01A default select component
Select with Background Colorselect-02A select component with custom background color
Ghost Selectselect-03A select component with ghost styling
Select with Custom Dropdown Iconselect-04A select component with custom dropdown icon
Select with Custom Shapeselect-05A select component with custom shape styling
Select with Iconselect-06A select component with icon integration
Select with Form Integrationselect-07A select component integrated with form handling
Theme Selector Selectselect-08A select component for theme selection
Select with Custom Menu Positionselect-09A select component with custom menu position
Scrollable Selectselect-10A select component with scrollable options
Controlled Selectselect-11A controlled select component
Default Separatorseparator-01A default separator component
Horizontal Separator with Labelseparator-02A horizontal separator with label component
Horizontal Separator with Chipseparator-03A horizontal separator with chip component
Dashed Separatorseparator-04A dashed separator component
Vertical Separatorseparator-05A vertical separator component
Vertical Separator with Chipseparator-06A vertical separator with chip component
Vertical Separator with Labelseparator-with-label-verticalA vertical separator with label component
Default Sliderslider-01A default slider component
Disabled Sliderslider-02A disabled slider component
Slider Sizeslider-03A slider component with different sizes
Slider Colorslider-04A slider component with different colors
Slider Shapeslider-05A slider component with different shapes
Slider with Labelslider-06A slider component with a label
Slider with Thumb Iconslider-07A slider component with a custom thumb icon
Audio Sliderslider-08A slider component designed for audio controls
Slider with Marksslider-09A slider component with marks for specific values
Slider with Sticky Labelslider-10A slider component with a sticky label
Slider with Sticky Label on Hoverslider-11A slider component with a sticky label that appears on hover
Slider with Sticky Label Arrowslider-12A slider component with a sticky label with arrow
Vertical Sliderslider-13A vertical slider component
Range Sliderslider-14A range slider component
Slider with Multiple Thumbsslider-15A slider component with multiple thumbs
Default Spinnerspinner-01A default spinner component
Circle Spinnerspinner-02A circular spinner component
Pinwheel Spinnerspinner-03A pinwheel spinner component
Spinner Colorsspinner-04A spinner component with different colors
Spinner Sizesspinner-05A spinner component with different sizes
Swirling Effect Spinnerspinner-06A spinner component with swirling effect
Spinner Circle 1spinner-07A circle spinner component variation 1
Spinner Circle 2spinner-08A circle spinner component variation 2
Spinner Circle 3spinner-09A circle spinner component variation 3
Spinner Circle 4spinner-10A circle spinner component variation 4
Spinner Circle 5spinner-11A circle spinner component variation 5
Default Switchswitch-01A default switch component
Switch with Labelswitch-02A switch component with a label
Disabled Switchswitch-03A disabled switch component
Switch Colorsswitch-04A switch component with different colors
Switch Sizesswitch-05A switch component with different sizes
Controlled Switchswitch-06A controlled switch component
Switch Customizationswitch-07A customized switch component
Default Tabletable-01A default table component
Bordered Tabletable-02A bordered table component
Striped Rows Tabletable-03A table with striped rows
Rounded Corners Tabletable-04A table with rounded corners
Table with Paginationtable-05A table with pagination
Sticky Header Tabletable-06A table with sticky header
Sticky Columns Tabletable-07A table with sticky columns
Overflow Scroll Tabletable-08A table with overflow scroll
Data Tabletable-09A data table component
Data Table Densitytable-10A data table with density controls
Columns Visibility Tabletable-11A table with columns visibility control
Default Tabstabs-01Default tabs component
Underlined Tabstabs-02Tabs with underlined style
Separated Tabstabs-03Tabs with separated style
Bordered Tabstabs-04Tabs with bordered style
Box Tabstabs-05Tabs with box style
Bootstrap Tabstabs-06Tabs with bootstrap style
Icon Tabstabs-07Tabs with icons
Mobile Navigation Tabstabs-08Tabs designed for mobile navigation
Tabs with Badgetabs-09Tabs with badge indicators
Sharp Tabstabs-10Tabs with sharp corners
Shadow Tabstabs-11Tabs with shadow effect
Skewed Tabstabs-12Tabs with skewed shape
Vertical Tabstabs-13Tabs with vertical orientation
Vertical Left Bordered Tabstabs-14Vertical tabs with left border
Vertical Separated Tabstabs-15Vertical tabs with separated style
Vertical Sharp Tabstabs-16Vertical tabs with sharp corners
Vertical Bordered Tabstabs-17Vertical tabs with borders
Animated Tabstabs-18Tabs with content animation
Default Textareatextarea-01A default textarea component
Textarea with Background Colortextarea-02A textarea component with background color
Disabled Textareatextarea-03A disabled textarea component
Textarea with Labeltextarea-04A textarea component with a label
Textarea with Rowstextarea-05A textarea component with custom rows
Textarea with Helper Texttextarea-06A textarea component with helper text
Controlled Textareatextarea-07A controlled textarea component
Default Tooltiptooltip-01A default tooltip component
Tooltip with Arrowtooltip-02A tooltip component with an arrow
Tooltip Directionstooltip-03A tooltip component with different directions
Tooltip with Disabled Hoverable Contenttooltip-04A tooltip component with disabled hoverable content
Tooltip with Delaytooltip-05A tooltip component with delay settings
Tooltip with Skip Delay Durationtooltip-06A tooltip component with skip delay duration settings
Tooltip Portaltooltip-07A tooltip component using portal for rendering