S
shadcnspace/shadcnspace
Accordion 01 - With Icon & Subtitleaccordion-01Stacked accordion with colored icon badges, title, and subtitle per item
Accordion 02 - Multi-Levelaccordion-02Nested accordion with collapsible sub-items, icons, and +/- toggle
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.
Accordion 08 - Animated Lineaccordion-08Accordion with an animated blue top-line that slides in when an item opens
Accordion-09 - Animated Lineaccordion-09Accordion with an animated blue top-line that slides in when an item opens
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 - Animated Gradient Alertalert-06Alert component
Alert 07 - With Hover-Fill Dismissalert-07Toast-style alert with a spring entrance, icon pop-in, and a close button whose ring fills in on hover, built with motion/react
Alert 08 - Evaporate Dismissalert-08Alert that dissolves away like evaporating water when dismissed, fading and blurring out with rising vapor wisps, built with motion/react
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
Animated Text 06 - Reveal Textanimated-text-06Animated Text Reveal component
Animated Text 07 - Morph Textanimated-text-07Animated Text Morph component
Animated Text 08 - Marker Highlightanimated-text-08Marker Highlight animation component using motion
Apple Dock 01 - Defaultapple-dock-01Apple Dock component
Apple Dock 02 - With Panelapple-dock-02Apple Dock with animated expandable panels, smooth tab transitions, and outside-click closing
Aspect Ratio 01 - Defaultaspect-ratio-01A simple image constrained to a 16:9 aspect ratio.
Aspect Ratio 02 - Square Gridaspect-ratio-02A responsive photo gallery grid using square aspect ratio tiles with a hover zoom effect.
Aspect Ratio 03 - Caption Overlayaspect-ratio-03A portrait aspect ratio card with a gradient overlay and caption text.
Aspect Ratio 04 - Video Thumbnailaspect-ratio-04A 16:9 video thumbnail with a play button overlay and duration badge.
Aspect Ratio 05 - Ratio Switcheraspect-ratio-05An interactive demo that lets you switch an image between common aspect ratios like 1:1, 4:3, 16:9, and 21:9.
Aspect Ratio 06 - Product Cardaspect-ratio-06A product card using a 4:5 aspect ratio image with a discount badge and pricing details.
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
Badge 10 - With Avatarbadge-10Badge component with avatar
Badge 11 - Count Popbadge-11Notification/cart count badge that springs and pops on every count change
Badge 12 - Removable Filter Chipbadge-12Dismissible filter chip badge with hover/tap micro-interactions and animated removal
Badge 13 - Streak Displaybadge-13Flame streak badge with a flickering icon loop and an animated roll-in day count
Breadcrumb 01 - Pill Breadcrumbbreadcrumb-01Breadcrumb component
Breadcrumb 02 - Text Breadcrumbbreadcrumb-02Breadcrumb component
Breadcrumb 03 - Interactive Breadcrumbbreadcrumb-03Breadcrumb component
Breadcrumb 04 - Icon-Based Breadcrumbbreadcrumb-04Breadcrumb component
Breadcrumb 05 - Chip Breadcrumbbreadcrumb-05Breadcrumb component
Breadcrumb 06 - Collapsed Breadcrumbbreadcrumb-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 20 - Animated Like Buttonbutton-20Like button with burst particle effect and sliding count
Button 21 - Animated Upvote Buttonbutton-21Upvote button with ripple, upward particles, and sliding count
Button 22 - Loading Buttonbutton-22Loading button component
Button 23 - Permissions Buttonbutton-23Animated Permissions button component
Button 24 - Copy Buttonbutton-24Animated copy button component with spring transitions
Button 25 - Ripple Buttonbutton-25Animated ripple button component with mouse-click tracking
Button 26 - Coupon reveal Buttonbutton-26Animated button component for coupons and reveal actions
Button 27 - Encryptbutton-27Hover text scramble decrypt effect with animated sweep highlight
Button 28 - Slide to Confirmbutton-28Interactive drag-to-confirm slider track for high-security actions, payments, and deployments
Button 29 - Hold to Chargebutton-29Press and hold button with circular SVG progress meter for critical actions and confirmations
Button 30 - Multi-State Sendbutton-30Interactive form submission button with state transitions (Idle -> Loading -> Success)
Button 31 - Confettibutton-31Celebration button that fires a confetti burst from the button and springs on click
Button 32 - Emoji Burstbutton-32Like/react button that launches emoji particles that arc, collide with the button, and settle on top, built with a lightweight canvas physics loop
Button Group 01 - Basicbutton-group-01Basic button group component
Button Group 02 - Verticalbutton-group-02Vertical button group component
Button Group 03 - Paginationbutton-group-03Pagination style button group component
Button Group 04 - Separatorbutton-group-04Button group with separators
Button Group 05 - Currencybutton-group-05Currency style button group component
Button Group 06 - Vercelbutton-group-06Vercel style button group component
Button Group 07 - Alignmentbutton-group-07Alignment style button group component
Button Group 08 - Github star barbutton-group-08Github star bar style button group component
Button Group 09 - Followbutton-group-09Follow style button group component
Button Group 10 - Editor Toolbarbutton-group-10Rich-text formatting toolbar button group component
Button Group 11 - Deploy Environmentbutton-group-11Button group component used for selecting deploy environment
Button Group 12 - Action Dropdownbutton-group-12Button group with a split action dropdown menu, featuring micro-animations and smooth open transitions
Button Group 13 - Star Ratingbutton-group-13Interactive star rating button group with hover preview and pop animation
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
Calendar 16 - Date Time Schedulercalendar-16A responsive calendar component with date selection, controlled time range inputs, and duration presets.
Card 01 - Article Preview Cardcard-01Card component
Card 02 - Preview Cardcard-02Card component
Card 03 - Product Cardcard-03Card component
Card 04 - Welcome Cardcard-04Card component
Card 05 - Analytics Cardcard-05Card component
Card 06 - Statistics Cardcard-06Card component
Card 07 - Audio Frequency Visualizercard-07Card component
Card 08 - Invite Cardcard-08Card component
Card 09 - Invite Member Cardcard-09Card component
Card 10 - Appointment Cardcard-10Card component
Card 11 - Assign Task Cardcard-11Card component
Card 12 - Weekly Cardcard-12Card component
Card 13 - Contributed Cardcard-13Card component
Card 14 - 3D Flipping Cardcard-14An interactive 3D card that flips on hover.
Card 15 - Spotlight Cardcard-15An interactive spotlight card that follows the mouse cursor.
Card 16 - Ecommerce Product Rating Cardcard-16An Ecommerce product card with size selection, wishlist, and add to cart functionality.
Card 17 - Ecommerce Product Variant Cardcard-17A clean editorial ecommerce product card with slide-up CTA, color swatches, sale badge, and wishlist.
Card 18 - Credit Cardcard-18An interactive credit card with 3D flip animation, masked card number, balance toggle, and quick action buttons.
Card 19 - Integration Cardcard-19An animated integration card with SVG connection paths, floating integration icons, and a pulsing center logo.
Card 20 - Testimonial Cardcard-20An animated integration card with SVG connection paths, floating integration icons, and a pulsing center logo.
Card 21 - Highlighted Comparison Cardcard-21A comparison card comparing other tools vs Shadcnspace, featuring custom dark theme transition, checklist, and dynamic gradient effects.
Card 22 - Smooth stacked cardscard-22A smooth scrolling stacking cards for gallary ...
Card 23 - Place Cardcard-23A place/location card whose grayscale image turns to color and scales up on hover using pure Tailwind transitions, with a title and description overlaid on the image.
Card 24 - Animated Event Cardcard-24An animated event card with a cover image, floating date badge, staggered content reveal, time and location details, an attendee avatar stack, and an RSVP button.
Carousel 01 - Custom Dotscarousel-01Carousel component
Carousel 02 - Custom Navigationcarousel-02Carousel component
Carousel 03 - Indexcarousel-03Carousel component
Carousel 04 - Cardscarousel-04Carousel component
Carousel 05 - Previewscarousel-05Carousel component
Carousel 06 - Cards With Detailcarousel-06Carousel component
Carousel 07 - Stacked Cardcarousel-07Interactive stacked card carousel with fanned-out rotation and overlap, powered by Embla Carousel and Framer Motion.
Carousel 08 - Apple Cardcarousel-08Drag-free card carousel with dark image overlays, category labels, and circular arrow navigation controls.
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
Checkbox 10 - Checkbox with avatar and groupcheckbox-10Checkbox 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.
Collapsible 04 - User Profilecollapsible-04A collapsible user profile with user information like last activity, online since and location and actions.
Collapsible 05 - Token Usagecollapsible-05A collapsible usage card with a progress bar, summary and details.
Combobox 01 - With Iconscombobox-01Combobox component with icons
Combobox 02 - With Custom Check Iconcombobox-02Combobox component
Combobox 03 - With Add Buttoncombobox-03Combobox component
Combobox 04 - Timezonecombobox-04Combobox component
Combobox 05 - Userscombobox-05Combobox component
Combobox 06 - With Flagcombobox-06Combobox component
Combobox 07 - Multiplecombobox-07Combobox component
Combobox 08 - Multiple Expandablecombobox-08Combobox component
Combobox 09 - Multiple Count Badgecombobox-09Combobox component
Combobox 10 - Creatablecombobox-10Combobox with inline item creation — type a new value and select 'Create' to add it on the fly
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.
Date Picker 03 - Time Pickerdate-picker-03A professional time picker with time selection.
Date Picker 04 - Multi-languagedate-picker-04An advanced multi-language date selector with dialog and support for Day, Month, and Year periods.
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.
Dialog 07 - Connect Integrationdialog-07Dialog with a decorative header connecting two app icons — ideal for third-party integration and calendar connect flows.
Dialog 08 - Connectorsdialog-08Searchable connectors dialog listing popular integrations with an add action for each — ideal for source/connector picker flows.
Drawer 01 - Onboarding Checklistdrawer-01Right side drawer with a progress bar and an interactive onboarding checklist
Drawer 02 - Shopping Cartdrawer-02Floating right side drawer with a free shipping progress bar, editable cart items, product suggestions, and an order summary
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.
Dropdown Menu 03 - Collaborative Requestsdropdown-menu-03An interactive dropdown for managing collaboration requests with framer-motion animations, avatar groups, and bulk actions.
Dropdown Menu 04 - Drill-down Submenudropdown-menu-04A drill-down navigation menu with nested submenus, search functionality, and smooth transition animations.
Dropdown Menu 05 - Team Selectordropdown-menu-05A multi-select team member dropdown with avatar previews, real-time search, and smooth layout animations.
Dropdown Menu 06 - Voice Chatdropdown-menu-06A voice chat dropdown with avatar previews, real-time search, and smooth layout animations.
Field 01 - Sign In Formfield-01A sign in form built with the Field primitive, featuring an email field with inline validation, a password field with a forgot-password link, and social sign in buttons
Field 02 - Notification Settingsfield-02A notification preferences list built with the Field primitive, pairing horizontal fields with switches and separators for each toggleable option
Field 03 - Choose a Planfield-03A plan selection layout built with the Field primitive, wrapping a radio group in field labels to create selectable, highlighted pricing cards
Field 04 - Shipping Addressfield-04A shipping address fieldset built with the Field primitive, combining responsive field orientation, inputs, a select, and a checkbox confirmation field
File Upload 01 - Animated File Uploadfile-upload-01File Upload component
File Upload 02 - File Upload with Progressfile-upload-02File Upload component
File Upload 03 - Avatar Uploadfile-upload-03File Upload component
File Upload 04 - Upload with Ring Progressfile-upload-04File Upload component
File Upload 05 - Crop & Preview Editorfile-upload-05File 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 20 - Rangeinput-20Input component
Input Group 01 - Autosave Typing Indicatorinput-group-01A premium text input field containing a real-time autosave status indicator (Saving spinner and Saved checkmark) triggered dynamically on user input.
Input Group 02 - Email Validation Indicatorinput-group-02An email input field with an animated leading icon that switches between a mail icon, a verified shield check, and a validation-error shield alert as the user types.
Input Group 03 - Shareable Link with Visibilityinput-group-03A read-only share link input with a public/private visibility select and a copy-to-clipboard button, both grouped on the trailing side.
Input Group 04 - Animated Message Composerinput-group-04A reusable textarea input group with an animated character-count ring and a send button that transitions through sending and sent states.
Input Mask 01 - Card Numberinput-mask-01Card number input mask with #### #### #### #### format.
Input Mask 02 - Card Expiry Dateinput-mask-02Card expiry date input mask with MM/YY format.
Input Mask 03 - MAC Addressinput-mask-03MAC address input mask with ##:##:##:##:##:## format.
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
Input OTP-10 - Interactive Animated Verificationinput-otp-10A premium OTP verification experience with a continuously animated security globe, interactive typing feedback, and dynamic success animations that respond in real time as users enter their code.
Item 01 - Team Members Listitem-01A team members list built with the Item primitive, showing avatar, name, email, role badge, and a dropdown menu with change role, view profile, and revoke access actions
Item 02 - Model Grid Cardsitem-02A grid of model cards built with the Item primitive, showing a gradient preview thumbnail, name, and description per option
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
Marquee 01 - Testimonialsmarquee-01Testimonials marquee component
Marquee 02 - Brandsmarquee-02Brands marquee component
Marquee 03 - Vertical Testimonialsmarquee-03Vertical Testimonials marquee component
Number Ticker 01 - Basicnumber-ticker-01Basic count-up number ticker
Number Ticker 02 - Currency Counternumber-ticker-02A specialized animated counter for currency and financial data. Ideal for showing bank balances, product prices, or real-time transaction values with smooth transitions.
Number Ticker 03 - Countdown Counternumber-ticker-03An animated time and chronometer counter formatted as HH:MM:SS. Perfect for session timers, countdowns, workout durations, or any time-tracking feature.
Number Ticker 04 - Growth Metrics Counternumber-ticker-04A percentage-based growth counter that indicates trends with color shifting and icons. Best for stock trends, quarterly growth, or KPI improvements.
Number Ticker 05 - Real-Time Metrics Counternumber-ticker-05A high-fidelity statistics counter for displaying large numbers clearly. Designed for user counts, page views, or total downloads with an 'active' pulse indicator.
Orbiting Circles 01 - Defaultorbiting-circles-01Orbiting Circles component
Orbiting Circles 02 - with Globeorbiting-circles-02Full-display orbiting rings with integration icons and a center particle globe
Pagination 01 - Floating Pillpagination-01A floating pill-style pagination with smooth morphing animations.
Pagination 02 - Premium Ribbonpagination-02A premium ribbon-style pagination with glowing active indicators.
Pagination 03 - Interactive Jumppagination-03A compact pagination with an interactive 'Go to Page' jump feature and progress bar.
Popover 01 - About Uspopover-01Popover that slides in from the top - ideal for notifications and alerts.
Popover 02 - User Profile Cardpopover-02Profile card popover triggered by an avatar - shows user stats and follow/message actions.
Popover 03 - Notificationspopover-03Notification list popover with unread badge, type icons, All/Unread tabs, and functional mark-all-read.
Popover 04 - Volume Controlpopover-04Popover that slides in from the top - ideal for notifications and alerts.
Popover 05 - Download Progresspopover-05Download progress popover with pause/resume/cancel controls and background fill animation.
Popover 06 - Locationpopover-06Popover that slides in from the top - ideal for location details.
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.
Questionnaire 01 - Topic-Based Assessmentquestionnaire-01An interactive physics concept assessment component with topic-based accordion sections and multi-step questionnaire questions.
Radio Group 01 - Radio Group Animated Demoradio-group-01Radio Group component
Radio Group 02 - Radio Group Colors Demoradio-group-02Radio Group component
Radio Group 03 - Radio Group with PlanCardsradio-group-03Radio Group component
Radio Group 04 - Radio Group Card Vertical Demoradio-group-04Radio Group component
Radio Group 05 - Radio Group Dashed Demoradio-group-05Radio Group component
Radio Group 06 - Radio Group List Demoradio-group-06Radio Group component
Radio Group 07 - Ripple Effectradio-group-07Radio Group component
Radio Group 08 - Hop Effectradio-group-08Radio Group component
Rating 01 - Star Ratingrating-01A rating component that allows users to rate items on a scale of 1 to 5.
Rating 02 - Emoji Ratingrating-02A emoji-based rating component that allows users to rate items on a scale of 1 to 5.
Rating 03 - NPS Scale Ratingrating-03A 0-10 numeric scale rating component for CSAT/NPS-style feedback surveys.
Resizable 01 - Master-Detail Split Paneresizable-01A horizontal resizable layout featuring a searchable order list table on the left and a detailed order inspector panel on the right
Scroll Area 01 - Custom File Explorerscroll-area-01A scrollable file explorer list with custom icons, badges, and smooth scroll area performance.
Scroll Area 02 - Horizontal Profile Storiesscroll-area-02A horizontally scrollable avatar stories bar with active status indicators, built with ScrollArea and ScrollBar.
Scroll Area 03 - Vertical Image Galleryscroll-area-03A vertically scrollable image gallery with fade mask edges, built with ScrollArea and project portfolio images.
Scroll Area 04 - Animated Notification Feedscroll-area-04A notification feed with staggered motion entrance animations, hover micro-interactions, and a scroll-linked progress bar, built with ScrollArea and motion/react.
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
Separator 01 - Defaultseparator-01Basic horizontal separator dividing content sections
Separator 02 - Verticalseparator-02Vertical separators between stat columns with label and value
Separator 03 - Horizontal Label Placementseparator-03Horizontal separators with inline start, center, and end text labels
Separator 04 - Vertical Label Placementseparator-04Vertical separators with top, center, and bottom text labels
Separator 05 - Dashedseparator-05Dashed horizontal separator
Separator 06 - Gradient Fadedseparator-06Gradient faded horizontal separator that fades from transparent to border color
Separator 07 - With Badgeseparator-07Horizontal separator with centered badge
Separator 08 - With Iconseparator-08Horizontal separator with centered icon
Separator 09 - Animated Pulse Releaseseparator-09Static dashed horizontal separator with a one-time pulse that releases from the center outward and fades when scrolled into view, animated using motion/react
Sheet 01 - Different Directionssheet-01Drawer with different directions - top, right, bottom, left
Sheet 02 - Scrollable Contentsheet-02Drawer with scrollable content
Sheet 03 - Shopping Cartsheet-03Drawer with products list, quantity controls, and sticky footer with total and checkout button
Sheet 04 - Filter Panelsheet-04Drawer with products list, quantity controls, and sticky footer with total and checkout button
Shine Border 01 - Basicshine-border-01Shine Border component
Shine Border 02 - Security Cardshine-border-02A laser scanner shine border with a vertical gradient sweep animation wrapping an identity verification card.
Shine Border 03 - Feature Cardshine-border-03An interactive mouse-tracking spotlight shine border that reveals a gradient glow on hover, wrapping a feature highlight card.
Shine Border 04 - Stats Cardshine-border-04A rotating meteor beam shine border with a conic gradient animation wrapping a live business stats dashboard card.
Skeleton 01 - Profile with Statsskeleton-01Animated profile skeleton with staggered fade-up motion on each element — avatar, text lines, stats grid, and CTA button.
Skeleton 02 - Table with Avatarsskeleton-02Animated table skeleton with a title bar, muted header row, avatar+text rows, and badge placeholders — staggered fade-up on scroll into view.
Skeleton 03 - List with Iconsskeleton-03Animated list skeleton with a title bar, icon+text rows, and badge placeholders — staggered fade-up on scroll into view.
Slider 01 - Volume Controlslider-01Volume control slider with volume icons and smooth fill animation.
Slider 02 - Emoji Ratingslider-02Emoji rating slider with hover preview ghost bar and reactive emoji/label display.
Slider 03 - Temperature Controlslider-03Temperature control slider with cool/comfortable/warm zones, color-coded display, and hover preview.
Slider 04 - Modern Volumeslider-04A sleek volume slider featuring a bold track design, custom vertical thumb, and smooth percentage transitions with NumberFlow.
Slider 05 - Equalizer Barslider-05An advanced, interactive bar-style slider featuring dynamic height dipping effects on hover and smooth numeric transitions with NumberFlow.
Slider 06 - Animated Price Range Filterslider-06A dual-thumb price range filter slider with a hover ghost preview — hover outside the selected range to see a semi-transparent extension, with thumb scale animation on hover.
Sonner 01 - Upload Filesonner-01A clean, minimal toast notification for file upload progress and status updates.
Sonner 02 - Delete Projectsonner-02A clean, minimal toast notification for confirming permanent project deletion.
Sonner 03 - Invite Membersonner-03A clean, minimal toast notification for inviting a new member to a project.
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.
Sortable 01 - Sortable Asset Listsortable-01A drag-and-drop sortable asset list component using @dnd-kit with drag handles, file type icons, status badges, and smooth reordering feedback.
Sortable 02 - Sortable Asset Gridsortable-02A drag-and-drop sortable asset grid component using @dnd-kit with type badges, file sizes, and smooth reordering feedback across a responsive card layout.
Sortable 03 - Sortable Grouped Listsortable-03A nested drag-and-drop sortable component using @dnd-kit for reordering option groups and the items within each group, with drag handles on both group and item rows.
Sortable 04 - Sortable Media Library Gridsortable-04A drag-and-drop sortable media library component using @dnd-kit for reordering image assets by display priority within a responsive card grid.
Sortable 05 - Sortable Numbered Checklistsortable-05A drag-and-drop sortable numbered checklist component using @dnd-kit with pill-shaped rows, a drag handle, and auto-updating step numbers as items are reordered.
Sortable 06 - Sortable Music Queuesortable-06A drag-and-drop sortable music queue component using @dnd-kit with track artwork, artist and album details, a now playing badge, play count, and duration.
Spinner 01 - Defaultspinner-01Default shadcn spinner using the Loader2 icon with animate-spin.
Spinner 02 - Throbberspinner-02Classic 8-bar radial throbber with stepped rotation and opacity gradient.
Spinner 03 - Pinwheelspinner-036-blade pinwheel spinner with opacity gradient and continuous rotation.
Spinner 04 - Circle Filledspinner-04Circular arc spinner with a dim background ring and rotating filled arc.
Spinner 05 - Ellipsisspinner-05Three dots with staggered scale and opacity wave animation.
Spinner 06 - Barsspinner-06Three vertical bars with staggered grow animation.
Spinner 07 - Orbital Spinnerspinner-07A central core with three orbiting rings that spin in opposite directions with varying opacity and size.
Spinner 08 - Clock Ringspinner-08A clock-style loading indicator with a rotating ring and a marker arm that completes a full rotation.
Spinner 09 - Ripplespinner-09A ripple-effect loading component with concentric expanding circular waves.
Spinner 10 - Liquid Wavespinner-10A mathematically precise 1:1 replica of a liquid wave Lottie animation with TextMorph text transitions.
Spinning Text 01 - Basicspinning-text-01Spinning Text component
Spinning Text 02 - With Iconspinning-text-02Spinning Text component with animated icon
Stepper 01 - Custom Square Badgesstepper-01Responsive stepper component with customizable indicators, checkmarks for completed steps, active and pending states, and content transitions
Stepper 02 - Multi-Step Wizardsstepper-02Multi-step configuration stepper wizard with distinct tabs for user details, workspace set up, and network options.
Stepper 03 - Animated Progress Indicatorsstepper-03Stepper with spring-based progress line, traveling dot, pulsing active badge, icon to checkmark morphing, and reduced-motion support for guided multi-step workflows.
Stepper 04 - Segmented Progress Pillstepper-04Minimal segmented stepper with a spring-animated progress pill sliding across rounded segments, clickable step labels, and gentle content transitions.
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
Switch 07 - Labeled Toggleswitch-07A reusable labeled switch with custom onLabel/offLabel props, a track that auto-sizes to the label text, and a spring-driven grip-textured thumb.
Switch 08 - Role Pickerswitch-08A colorful role-picker switch that swaps track color and thumb icon per state, with a soft ambient glow and side labels that emphasize the active choice.
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
Tabs 08 - Animated Dashboard Tabstabs-08A reusable, animated tabs component with a sliding active pill, icons, badges, and direction-aware content transitions, driven by a simple data array.
Tabs 09 - Seasonal PixelSnow Tabstabs-09A Winter/Monsoon tabs demo where the Winter panel is covered in a live pixel-snow WebGL shader effect and the Monsoon panel shows falling rain beams that collide and burst at the bottom.
Tabs 10 - Assistant Tabstabs-10Pill-style assistant tabs with chat, voice waveform, video, and settings.
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
Toggle 01 - Animated Sun/Moontoggle-01An animated toggle button that switches between Sun and Moon icons with smooth physics-based transitions.
Toggle 02 - Animated Like Buttontoggle-02An animated like (heart) button with active scale pop-up animation and particle radial burst effects.
Toggle 03 - Animated Upvote Buttontoggle-03An animated Product Hunt / Reddit style upvote button with bouncing arrow and sliding digit counter.
Toggle Group 01 - Animated Formatting Toolbartoggle-group-01A premium animated view switcher and styling toolbar utilizing Radix UI Toggle Group and Framer Motion spring sliding highlights.
Toggle Group 02 - Animated Social Reactions Widgettoggle-group-02A premium social reactions toolbar (Like, Love, Dislike) using Base UI Toggle Group and Framer Motion spring micro-animations.
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
Tooltip 08 - Editor Toolbar Tooltiptooltip-08Tooltip component
Tooltip 09 - Gooey Status Tooltiptooltip-09Tooltip component