S
shadcndashboard/shadcndashboard
Accordion-01 - Defaultaccordion-01Default accordion component
Accordion-02 - Multi-levelaccordion-02Multi-level accordion component
Accordion-03 - Numbered FAQaccordion-03FAQ accordion with numbered items, background fill on open, and +/- toggle
Accordion-04 - Cardaccordion-04Accordion wrapped in a rounded card with left-aligned +/- icons and border dividers
Accordion-05 - Mediaaccordion-05Accordion with icon trigger, description, and an image revealed on open
Accordion-06 - Filled Triggeraccordion-06Accordion with a filled accent background on the trigger header
Accordion-07 - Motion Servicesaccordion-07Animated accordion with a number bubble, sliding title shift, and an expanding bottom line on hover and active states — built with motion/react for fluid spring transitions.
Alert-01 - Alert with Password Detailalert-01Alert component
Alert-02 - Alert with User Detailalert-02Alert component
Alert-03 - Social Alertalert-03Alert component
Alert-04 - Indicator Destructive Alertalert-04Alert component
Alert-05 - Dark Alertalert-05Alert component
Alert-06 - Gradient Alertalert-06Alert component
Animated List 01 - Defaultanimated-list-01Animated List component
Animated List 02 - Setup Stepsanimated-list-02Setup Steps component
Animated List 03 - Expandable Stackanimated-list-03Expandable stack of cards showing notifications with dynamic spring layouts
Animated Text-01 - Shiny Textanimated-text-01Animated Text component
Animated Text-02 - Gradient Textanimated-text-02Animated Gradient Text component
Animated Text-03 - Typinganimated-text-03Animated Typing component
Animated Text-04 - Rolling Textanimated-text-04Animated Rolling Text component
Animated Text-05 - Shimmer Textanimated-text-05Animated Shimmer Text component
Area Chart 01- Defaultarea-chart-01A multi-series area chart with year comparison
Area Chart 02- Composedarea-chart-02A composed chart with bar and line series
Area Chart 03- Series Markersarea-chart-03A profit area chart with two series
Area Chart 04- Settlementsarea-chart-04A settlements area chart with gradient fill
Area Chart 05- Lineararea-chart-05A linear area chart
Area Chart 06- Steparea-chart-06A stacked area chart with expand stacking
Area Chart 07- Stackedarea-chart-07A step area chart with two series and animation
Autocomplete-01 - Defaultautocomplete-01Default autocomplete component
Autocomplete-02 - Size variantsautocomplete-02Autocomplete component with different size variants
Autocomplete-03 - Vanish Animationautocomplete-03Autocomplete with vanish animation
Autocomplete-04 - Team Member Searchautocomplete-04Autocomplete with grouped team members, avatars, status dots, and spring-animated list items
Autocomplete-05 - Async Searchautocomplete-05Autocomplete with debounced async search, loading spinner, error handling, avatars, and spring-animated results
Autocomplete-06 - With Iconautocomplete-06Autocomplete for selecting a project type with unique icons, selected icon shown in input, and spring-animated list items
Avatar-01 - Defaultavatar-01Default avatar component
Avatar-02 - Groupavatar-02Group avatar component
Avatar-03 - Badgeavatar-03Badge avatar component
Avatar-04 - Borderavatar-04Border avatar component
Avatar-05 - Counteravatar-05Counter avatar component
Avatar-06 - Fallbackavatar-06Fallback avatar component
Avatar-07 - Selectable Avataravatar-07Animated selectable avatar button with optional badge and name label
Avatar-08 - Avatar stackavatar-08Stacked avatar group with overflow count and popularity indicator
Badge-01 - Defaultbadge-01Badge component
Badge-02 - Countbadge-02Badge component
Badge-03 - Outlinebadge-03Badge component
Badge-04 - With Iconbadge-04Badge component
Badge-05 - Linkbadge-05Badge component
Badge-06 - Errorbadge-06Badge component
Badge-07 - Successbadge-07Animated success badge with top glow and letter-by-letter reveal
Badge-08 - Pendingbadge-08Animated pending badge with spinning loader and top glow
Badge-09 - Failedbadge-09Animated failed badge with top glow and letter-by-letter reveal
Bar Chart 01 - Defaultbar-chart-01A stacked bar chart with multiple series and legend
Bar Chart 05 - Activebar-chart-02A bar chart with active state highlighting
Bar Chart 02 - Negativebar-chart-03A bar chart with positive and negative values
Bar Chart 06 - Horizontalbar-chart-04A horizontal bar chart
Bar Chart 07 - Multiplebar-chart-05A grouped bar chart with multiple series
Bar Chart 03- Negative Valuesbar-chart-06A bar chart with profit/loss and negative values
Bar Chart 04- Stackedbar-chart-07A stacked bar chart with legend
Breadcrumb-01 - Pill Outlinebreadcrumb-01Breadcrumb component
Breadcrumb-02 - Slash Separatorbreadcrumb-02Breadcrumb component
Breadcrumb-03 - Dot Separator with Back Navbreadcrumb-03Breadcrumb component
Breadcrumb-04 - With Folder Dropdownbreadcrumb-04Breadcrumb component
Breadcrumb-05 - With Badges & Dropdownbreadcrumb-05Breadcrumb component
Breadcrumb-06 - With Ellipsis Dropdownbreadcrumb-06Breadcrumb component
Button-01 - With Iconbutton-01With Icon button component
Button-02 - Shiny Textbutton-02Shiny Text button component
Button-03 - Shine Hoverbutton-03Shine Hover button component
Button-04 - Heartbeat Effectbutton-04Heartbeat Effect button component
Button-05 - Get Figma Filebutton-05Get Figma File button component
Button-06 - Animated Borderbutton-06Animated Border button component
Button-07 - Socialbutton-07Social button component
Button-08 - Social Iconbutton-08Social Icon button component
Button-09 - Outline With Iconbutton-09Outline With Icon button component
Button-10 - Savebutton-10Save button component
Button-11 - Cancelbutton-11Cancel button component
Button-12 - Defaultbutton-12Default button component
Button-13 - Size xsbutton-13Size xs button component
Button-14 - Size smbutton-14Size sm button component
Button-15 - Size lgbutton-15Size lg button component
Button-16 - Ripple Spotlightbutton-16Mouse-tracking ripple spotlight effect button
Button-17 - Blob Fillbutton-17Circle blob expands from bottom center on hover to fill the button
Button-18 - Promo Code Copybutton-18Animated promo code copy button with blur transition and progress fill
Button-19 - Interactive Hoverbutton-19Interactive Hover button
Button Group-01 - Defaultbutton-group-01Default button group component
Button Group-02 - Verticalbutton-group-02Vertical button group component
Button Group-03 - Paginationbutton-group-03Pagination button group component
Button Group-04 - With Separatorbutton-group-04Button group with separator component
Button Group-05 - With Selectbutton-group-05Button group with select component
Button Group-06 - Vercel Stylebutton-group-06Vercel style button group component
Calendar-01 - Standard calendarcalendar-01Calendar component
Calendar-02 - Style calendarcalendar-02Calendar component
Calendar-03 - Time calendarcalendar-03Calendar component
Calendar-04 - Dialog calendarcalendar-04Calendar component
Calendar-05 - Month and Year Selectcalendar-05Calendar component
Calendar-06 - Disable Weekendscalendar-06Calendar component
Calendar-07 - Variable Sizecalendar-07Calendar component
Calendar-08 - With Event Listcalendar-08Calendar component
Calendar-09 - Custom Range Selectcalendar-09Calendar component
Calendar-10 - Right Side Navigationcalendar-10Calendar component
Calendar-11 - Left Side Navigationcalendar-11Calendar component
Calendar-12 - With Today Buttoncalendar-12Calendar component
Calendar-13 - With Date Inputcalendar-13Calendar component
Calendar-14 - Range Selectioncalendar-14Calendar component
Calendar-15 - With Pricingcalendar-15Calendar component
Carousel-01 - Custom Dotscarousel-01Carousel component
Carousel-02 - Custom Navigationcarousel-02Carousel component
Carousel-03 - Indexcarousel-03Carousel component
Carousel-04 - Cardscarousel-04Carousel component
Checkbox-01 - Checkbox with sizescheckbox-01Checkbox component
Checkbox-02 - Checkbox with vertical groupcheckbox-02Checkbox component
Checkbox-03 - Checkbox with colorscheckbox-03Checkbox component
Checkbox-04 - Checkbox with todo listcheckbox-04Checkbox component
Checkbox-05 - Checkbox with list groupcheckbox-05Checkbox component
Checkbox-06 - Checkbox with formcheckbox-06Checkbox component
Checkbox-07 - Checkbox with custom iconscheckbox-07Checkbox component
Checkbox-08 - Checkbox with dashed bordercheckbox-08Checkbox component
Checkbox-09 - Checkbox with treecheckbox-09Checkbox component
Code Block 01 - Defaultcode-block-01Syntax-highlighted code block with filename header and copy button
Code Block 02 - Scrollablecode-block-02Scrollable code block with line numbers and fixed max height
Code Block 03 - Custom Backgroundcode-block-03Code block with custom background and line numbers
Code Block 04 - Highlighted Linecode-block-04Code block with line numbers and amber highlighted line
Code Block 05 - Multi Filecode-block-05Code block with switchable file tabs, line numbers, and scrollable content
Code Block 06 - Language Tabscode-block-06Code block with language selector tabs (JavaScript, Python, React) and scrollable content
Code Block 07 - Install Commandcode-block-07Package manager install command tabs (pnpm, npm, yarn, bun) with copy button
Collapsible 01 - Release Changelogcollapsible-01An expandable release changelog with per-version collapsible panels, typed badge labels (Feature, Fix, Breaking), and smooth open/close animations.
Collapsible 02 - Dashboard Sidebarcollapsible-02A dashboard sidebar with collapsible nav sections, active item highlighting, notification badges, and a user profile footer.
Collapsible 03 - API Keys Managercollapsible-03A collapsible API keys panel with copy-to-clipboard, delete actions, and a dropdown context menu per key.
Combobox-01 - With Iconscombobox-01A combobox component with search input prefix/suffix icons and item-level icons.
Combobox-02 - Multi-selectcombobox-02A multi-select combobox component displaying selected items as chips within the input field.
Combobox-03 - With Add Buttoncombobox-03A combobox component with an interactive add button at the bottom of the option list.
Combobox-04 - Timezonecombobox-04A grouped timezone selection combobox component with section headers and separators.
Combobox-05 - Userscombobox-05A user selection combobox component displaying user avatars, status indicator, names, and emails.
Combobox-06 - With Flagcombobox-06A country selector combobox component displaying country flags alongside country names.
Command-01 - Shortcut Menucommand-01Command component with different size variants
Command-02 - Scrollablecommand-02Scrollable command component with groups and separators
Command-03 - Palettecommand-03Palette command component with groups and separators
Command-04 - Team Member Searchcommand-04Command component for searching and inviting team members
Command-05 - Developer Actionscommand-05Command component for developer actions
Command-06 - Search Filescommand-06Command component for searching files
Command-07 - Filter Searchcommand-07Command component for filter search
Context Menu-01 - Animated Actionscontext-menu-01Animated context menu with colored icon badges, keyboard shortcuts, and a destructive action separator
Context Menu-02 - Radial Bubblecontext-menu-02Spring-animated radial bubble menu that fans colored icon buttons in a circle from a central trigger
Date Picker-01 - Data & Time Pickerdate-picker-01A professional appointment booking card with date and time range selection.
Date Picker-02 - Date Rangedate-picker-02A professional appointment booking card with date and time range selection.
Dialog 01 - Slide from Topdialog-01Dialog that slides in from the top — ideal for notifications and alerts.
Dialog 02 - Slide from Bottomdialog-02Dialog that slides in from the bottom — ideal for confirmations and destructive actions.
Dialog 03 - Slide from Leftdialog-03Dialog that slides in from the left — ideal for subscription forms and quick inputs.
Dialog 04 - Slide from Rightdialog-04Dialog that slides in from the right — ideal for user profiles and detail panels.
Dialog 05 - Zoom Indialog-05Dialog that scales up from the center — ideal for success states and celebrations.
Dialog 06 - Zoom Outdialog-06Dialog that shrinks into place from a larger scale — ideal for announcements and feature highlights.
Drawer-01 - Defaultdrawer-01Default drawer component
Dropdown Menu 01 - User Profiledropdown-menu-01A professional user profile dropdown with avatar, status indicator, and categorized links for profile, settings, and logout.
Dropdown Menu 02 - Notificationsdropdown-menu-02A sleek notification dropdown with color-coded category icons, activity summaries, and a 'See All' action button.
File Upload-01 - Dropzonefile-upload-01Dropzone file upload component
Input-01 - Input with dateinput-01Input component
Input-02 - Input with timeinput-02Input component
Input-03 - Input with currencyinput-03Input component
Input-04 - Real Time Validationinput-04Input component
Input-05 - Input with start selectinput-05Input component
Input-06 - Input with character counterinput-06Input component
Input-07 - Input with controlsinput-07Input component
Input-08 - Input with add-onsinput-08Input component
Input-09 - Input with floating labelinput-09Input component
Input-10 - Input with clear buttoninput-10Input component
Input-11 - Input with end inline buttoninput-11Input component
Input-12 - Input with end buttoninput-12Input component
Input-13 - Input with fileinput-13Input component
Input-14 - Input with errorinput-14Input component
Input-15 - Required Inputinput-15Input component
Input-16 - Standard Inputinput-16Input component
Input-17 - Input with labelinput-17Input component
Input-18 - Disabledinput-18Input component
Input-19 - With Animated Checkmarkinput-19Input component
Input Mask-01 - Card Numberinput-mask-01Card number input mask component
Input Mask-02 - Card Expiryinput-mask-02Card expiry input mask component
Input Mask-03 - MAC Addressinput-mask-03MAC address input mask component
Input OTP-01 - Defaultinput-otp-01Default input OTP component
Input OTP-02 - Digits Onlyinput-otp-02Input OTP component with pattern to allow only digits
Input OTP-03 - With Separatorinput-otp-03Input OTP component with separator between segments
Input OTP-04 - Disabledinput-otp-04Input OTP component in disabled state
Input OTP-05 - Controlledinput-otp-05Input OTP component in controlled state
Input OTP-06 - Invalidinput-otp-06Input OTP component in invalid state
Input OTP-07 - Four Digitsinput-otp-07Input OTP component with pattern to allow only 4 digits
Input OTP-08 - Alphanumericinput-otp-08Input OTP component with pattern to allow only alphanumeric characters
Input OTP-09 - Animatedinput-otp-09Input OTP component with animation
KBD-01 - KBD in Buttonkbd-01Buttons with inline keyboard shortcut hints with Mac/Windows platform switch
KBD-02 - KBD Groupkbd-02KbdGroup showcasing grouped multi-key shortcut combinations with Mac/Windows platform switch
KBD-03 - KBD in Tooltipkbd-03ButtonGroup with KBD shortcut hints shown inside tooltips on hover, with Mac/Windows platform switch
KBD-04 - KBD in Search Inputkbd-04Search input with KBD shortcut in the input group addon, with Mac/Windows platform switch
KBD-05 - KBD Generatorkbd-05Interactive keyboard shortcut generator — pick modifiers, enter a key, preview and copy JSX code
Label 01 - With Checkboxlabel-01Label component with checkbox
Label 02 - With Inputlabel-02Label component with input
Label 03 - With Badgelabel-03Label component with badge
Label 04 - With Textarealabel-04Label component with textarea
Label 05 - With Switchlabel-05Label component with switch
Label 06 - Floating Labellabel-06Floating label that transitions from inside the input to the top on focus or fill
Line Chart 03- Arealine-chart-01An area line chart with BTC and ETH trends
Line Chart 01- Markersline-chart-02A line chart with event markers using reference lines
Line Chart 02- Forecastline-chart-03An area chart with actual vs forecast and target reference line
Line Chart 04- Language Trendsline-chart-04A 4-line overlapping area chart showing tech language usage trends
Number Ticker-01 - Defaultnumber-ticker-01Default number ticker component
Number Ticker-02 - Currencynumber-ticker-02Currency number ticker component
Number Ticker-03 - Countdownnumber-ticker-03Countdown number ticker component
Number Ticker-04 - Trendnumber-ticker-04Trend number ticker component
Number Ticker-05 - Labelednumber-ticker-05Labeled number ticker component
Pagination-01 - Defaultpagination-01Default pagination component
Pagination-02 - With Ellipsispagination-02Pagination with ellipsis component
Pagination-03 - Hashpagination-03Hash pagination component
Pie Chart 04- Simplepie-chart-01A simple pie chart
Pie Chart 05- Half Donutpie-chart-02A half donut chart with clipped bottom
Pie Chart 01- Multi Ringpie-chart-03A concentric multi-ring progress chart with center label and legend
Pie Chart 02- Gradientspie-chart-04A donut chart with radial gradient fills on each slice
Pie Chart 03- Separator Nonepie-chart-05A pie chart with no separator
Popover-01 - Aboutpopover-01About popover component
Popover-02 - Profile Cardpopover-02Profile card popover component
Popover-03 - Notificationpopover-03Notification popover component
Popover-04 - Volumepopover-04Volume popover component
Popover-05 - Downloadpopover-05Download popover component
Popover-06 - Locationpopover-06Location popover component
Progress-01 - Simple Uploadprogress-01A minimal, animated progress bar with status text and a reset action.
Progress-02 - Onboarding Stepperprogress-02A clean onboarding progress tracker with step navigation and percentage completion.
Progress-03 - Skills Dashboardprogress-03A professional skills overview with color-coded, animated progress bars and entrance effects.
Progress-04 - Shimmer Status Progressprogress-04Animated progressbar with real-time text updates, smooth entrance and exit animations, and a polished UI.
Radar Chart 01- Basicradar-chart-01A basic radar chart
Radar Chart 02- Triangleradar-chart-02A triangle radar chart with 3 axes comparing multiple series
Radar Chart 03- No Strokeradar-chart-03A polygon radar chart with multiple overlapping areas and no data-point dots
Radar Chart 04- Circle Gridradar-chart-04A circular radar chart with border dots and active dot on hover
Radar Chart 05- With Markerradar-chart-05A radar chart with a glowing stroke effect on the primary series
Radar Chart 06- Glowradar-chart-06A radar chart with a glowing stroke effect on the primary series
Radial Chart 01- Defaultradial-chart-01A semi-circle radial bar chart with clipped bottom half
Radial Chart 02- Semiradial-chart-02A semi-circle radial bar chart with clipped bottom half
Radial Chart 03- Gradientradial-chart-03A radial bar chart with multi-stop gradient fills on each bar
Radial Chart 04- KPI Ringsradial-chart-04Concentric KPI progress rings with center average score
Radial Chart 05- Gaugeradial-chart-05A semicircle gauge chart with gradient fill and center label
Radio Group-01 - Motion Radioradio-group-01Radio Group component
Radio Group-02 - Defaultradio-group-02Radio Group component
Radio Group-03 - With Iconradio-group-03Radio Group component
Radio Group-04 - Cardradio-group-04Radio Group component
Radio Group-05 - Horizontalradio-group-05Radio Group component
Radio Group-06 - With Badgeradio-group-06Radio Group component
Scroll Area-01 - File Listscroll-area-01File list scroll area component
Scroll Area-02 - Profile Cardsscroll-area-02Profile cards scroll area component
Scroll Area-03 - Vertical Galleryscroll-area-03Vertical gallery scroll area component
Select-01 - Required selectselect-01Select component
Select-02 - Select with iconselect-02Select component
Select-03 - Select with statusselect-03Select component
Select-04 - Select with timezoneselect-04Select component
Select-05 - Select with overlapping labelselect-05Select component
Select-06 - Select with multiple optionsselect-06Select component
Select-07 - Select with avatarsselect-07Select component
Select-08 - Select with leading textselect-08Select component
Select-09 - Select with separatorselect-09Select component
Shine Border-01 - Cardshine-border-01Shine border card component
Shine Border-02 - Security Cardshine-border-02Shine border security card component
Shine Border-03 - Feature Cardshine-border-03Shine border feature card component
Shine Border-04 - Stats Cardshine-border-04Shine border stats card component
Skeleton-01 - Defaultskeleton-01Default skeleton component
Skeleton-02 - Cardskeleton-02Card skeleton component
Skeleton-03 - Profile with Statsskeleton-03Animated profile skeleton with staggered fade-up motion on each element — avatar, text lines, stats grid, and CTA button.
Skeleton-04 - Table with Avatarsskeleton-04Animated table skeleton with a title bar, muted header row, avatar+text rows, and badge placeholders — staggered fade-up on scroll into view.
Skeleton-05 - List with Iconsskeleton-05Animated list skeleton with a title bar, icon+text rows, and badge placeholders — staggered fade-up on scroll into view.
Slider-01 - Volumeslider-01Volume slider component
Slider-02 - Emoji Ratingslider-02Emoji rating slider component
Slider-03 - Temperatureslider-03Temperature slider component
Slider-04 - Modern Volumeslider-04A sleek volume slider featuring a bold track design, custom vertical thumb, and smooth percentage transitions with NumberFlow.
Sonner-01 - Upload Toastsonner-01Upload toast sonner component
Sonner-02 - Warning Toastsonner-02Warning toast sonner component
Sonner-03 - Success Toastsonner-03Success toast sonner component
Sonner-04 - Custom PR Mergesonner-04A premium custom toast notification for Pull Request merge flows with approval avatars.
Sonner-05 - Custom Sync Statussonner-05A clean, minimal toast notification showing active repository sync status.
Sonner-06 - Success Payoutsonner-06Animated payout toast that transitions from an amber pending state to a teal success state with a smooth ocean-wave ripple emanating from the icon.
Sonner-07 - Failed Payoutsonner-07Animated payout toast that transitions from an amber pending state to a red-500 failed state with a smooth ripple wave and slide-in text animation.
Spinner-01 - Defaultspinner-01Default spinner component
Spinner-02 - Throbberspinner-02Throbber spinner component
Spinner-03 - Pinwheelspinner-03Pinwheel spinner component
Spinner-04 - Circle Filledspinner-04Circle filled spinner component
Spinner-05 - Ellipsisspinner-05Ellipsis spinner component
Spinner-06 - Barsspinner-06Bars spinner component
Spinner-07 - Orbital Spinnerspinner-07A central core with three orbiting rings that spin in opposite directions with varying opacity and size.
Switch-01 - Active effectswitch-01Switch with active effect component
Switch-02 - With Iconswitch-02Switch component
Switch-03 - Toggle themeswitch-03Switch toggle theme component
Switch-04 - With Descriptionswitch-04Switch component
Switch-05 - With labelswitch-05Switch component
Switch-06 - Custom Colorsswitch-06Switch component
Tabs-01 - Animatedtabs-01Tabs component
Tabs-02 - Transitiontabs-02Tabs component
Tabs-03 - With Icontabs-03Tabs component
Tabs-04 - With Counttabs-04Tabs component
Tabs-05 - Underlinetabs-05Animated underline tabs component
Tabs-06 - Verticaltabs-06Vertical animated tabs component
Tabs-07 - Icon & Descriptiontabs-07Tabs with icon and description component
Textarea-01 - Feedback Textareatextarea-01Textarea component
Textarea-02 - Textarea with icontextarea-02Textarea component
Textarea-03 - Required Textareatextarea-03Textarea component
Textarea-04 - Textarea with buttontextarea-04Textarea component
Textarea-05 - Auto growing textareatextarea-05Textarea component
Textarea-06 - Textarea with characters lefttextarea-06Textarea component
Textarea-07 - Textarea with floating labeltextarea-07Textarea component
Textarea-08 - Textarea with helper texttextarea-08Textarea component
Textarea-09 - Disabled Textareatextarea-09Textarea component
Tooltip-01 - Hover Blog Cardtooltip-01Tooltip component
Tooltip-02 - Content Tooltiptooltip-02Tooltip component
Tooltip-03 - Animated Tooltiptooltip-03Animated Tooltip component
Tooltip-04 - Rounded Tooltiptooltip-04Tooltip component
Tooltip-05 - Tooltip Positiontooltip-05Tooltip component
Tooltip-06 - Avatar Tooltiptooltip-06Tooltip component
Tooltip-07 - Error Tooltiptooltip-07Tooltip component