S
shadcnstudio
/
shadcn-studio
/
components
Files
Code
Info
Accordion 1
accordion-01
Basic accordion with default styling and collapsible FAQ items.
Accordion 2
accordion-02
Card-style accordion with separated items, shadow effects, and rotated chevron icons.
Accordion 3
accordion-03
Icon-enhanced accordion with category icons displayed before each item title.
Accordion 4
accordion-04
Plus/minus icon accordion with animated icon transitions for expand/collapse states.
Accordion 5
accordion-05
Active state accordion with amber highlighting for expanded items and borders.
Accordion 6
accordion-06
Icon and expand indicator accordion with category icons and plus icon for expand/collapse.
Accordion 7
accordion-07
Avatar-based accordion displaying user profiles with avatar images, names, and email addresses.
Accordion 8
accordion-08
Enhanced icon accordion with circular icon containers and subtitle descriptions for each item.
Accordion 9
accordion-09
Outline-style accordion with bordered items and spacing between each accordion item.
Accordion 10
accordion-10
Box-style accordion with unified border container around all accordion items.
Accordion 11
accordion-11
Tab-style accordion with accent background highlighting for expanded items.
Accordion 12
accordion-12
Tab with outline accordion featuring bordered highlighting and shadow effects for expanded items.
Accordion 13
accordion-13
Media content accordion with category icons and embedded images in accordion content.
Accordion 14
accordion-14
Filled header accordion with accent background triggers and separated content sections.
Accordion 15
accordion-15
Multi-level accordion with nested collapsible sections for hierarchical FAQ organization.
Accordion 16
accordion-16
Simplified multi-level accordion with plus/minus icons for nested FAQ categories and questions.
Alert 1
alert-01
Basic alert with circle alert icon and simple title message.
Alert 2
alert-02
Avatar-enhanced alert with user profile image, and alert icon.
Alert 3
alert-03
Closable alert with dismiss functionality using X icon and state management.
Alert 4
alert-04
Interactive alert with link button featuring arrow icon and styled border/text colors.
Alert 5
alert-05
Attached icon alert with separated icon section and destructive warning styling.
Alert 6
alert-06
Focused icon alert with avatar-wrapped warning icon and destructive background styling.
Alert 7
alert-07
File upload progress alert with animated progress bar, action buttons, and close functionality.
Alert 8
alert-08
Multi-action alert with primary background, multiple buttons, and dismissible interface.
Alert 9
alert-09
Task progress alert with user avatar, progress indicator, and task completion tracking.
Alert 10
alert-10
Gradient background alert with email verification message and gradient styling.
Alert 11
alert-11
Success indicator alert with left border highlight and green success styling.
Alert 12
alert-12
Information/error indicator alert with destructive background styling and informational content.
Alert 13
alert-13
displaying a minimal "New message!" notification with an attention icon and an actionable "Open" button
Alert 14
alert-14
Error indicator alert with red styling and destructive error message.
Alert 15
alert-15
Pure destructive alert using built-in destructive variant with error styling.
Alert 16
alert-16
Minimal alert without icon displaying simple message text only.
Alert 17
alert-17
Standard alert with both title and description text providing detailed information.
Alert 18
alert-18
Outline info alert with blue border and text styling for informational messages.
Alert 19
alert-19
Outline success alert with green border and text for success messages.
Alert 20
alert-20
Outline warning alert with amber border and text for warning messages.
Alert 21
alert-21
Soft primary alert with subtle background and text styling for secondary messages.
Alert 22
alert-22
Soft info alert with blue background and subtle styling for information.
Alert 23
alert-23
Soft success alert with green background and subtle styling for success messages.
Alert 24
alert-24
Soft warning alert with amber background and subtle styling for warnings.
Alert 25
alert-25
Soft destructive alert with red background and subtle styling for errors.
Alert 26
alert-26
Solid info alert with full primary background for prominent informational messages.
Alert 27
alert-27
Solid success alert with full green background for prominent success messages.
Alert 28
alert-28
Solid warning alert with full amber background for prominent warning messages.
Alert 29
alert-29
Solid info alert with full blue background for prominent informational messages.
Alert 30
alert-30
Solid destructive alert with full red background for prominent error messages.
Avatar 1
avatar-01
Basic avatar with profile image and fallback initials.
Avatar 2
avatar-02
Avatar with ring border highlighting for active or selected states.
Avatar 3
avatar-03
Small sized avatar variant with compact dimensions.
Avatar 4
avatar-04
Large sized avatar variant with expanded dimensions.
Avatar 5
avatar-05
Circular avatar with fallback initials.
Avatar 6
avatar-06
Icon avatar using Lucide icon with colored background.
Avatar 7
avatar-07
Status avatar with busy indicator showing red status dot.
Avatar 8
avatar-08
Status avatar with online indicator showing green status dot.
Avatar 9
avatar-09
Status avatar with away indicator showing amber status dot for absent/away state.
Avatar 10
avatar-10
Avatar with plus icon overlay for adding or editing profile functionality.
Avatar 11
avatar-11
Avatar with notification badge showing count number for alerts and messages.
Avatar 12
avatar-12
Avatar with verified badge showing check mark icon for verified accounts.
Avatar 13
avatar-13
Avatar group displaying multiple overlapping users with ring borders.
Avatar 14
avatar-14
Avatar group with count indicator showing additional users (+9) in overflow.
Avatar 15
avatar-15
Large-sized avatar group with bigger dimensions for prominent display.
Avatar 16
avatar-16
Avatar group with tooltip hover effects and elevation animation.
Avatar 17
avatar-17
Avatar group with smooth spacing transition on hover interaction.
Avatar 18
avatar-18
Avatar group with tooltip transitions and hover spacing effects.
Avatar 19
avatar-19
Avatar group with dropdown menu showing additional users and actions.
Avatar 20
avatar-20
Avatar group with outlined container and background styling.
Avatar 21
avatar-21
Avatar group with popularity indicator styling and text showcasing community trust.
Badge 1
badge-01
Default badge demonstrating basic styling with standard text display
Badge 2
badge-02
Secondary variant badge with muted styling for less prominent labels
Badge 3
badge-03
Destructive variant badge with red styling for error or warning states
Badge 4
badge-04
Outline variant badge with bordered styling for subtle emphasis
Badge 5
badge-05
Dot indicator badge with colored circle for compact status representation
Badge 6
badge-06
Rounded badge with full border radius for pill-shaped appearance
Badge 7
badge-07
Number badge with circular design for count and notification displays
Badge 8
badge-08
Large size badge with increased padding for prominence
Badge 9
badge-09
Small size badge with reduced padding for compact display areas
Badge 10
badge-10
Badge with icon integration for enhanced visual context
Badge 11
badge-11
Link badge that can be used as clickable navigation element
Badge 12
badge-12
Closable badge with X button for dismissible notifications
Badge 13
badge-13
Selectable badge with checkbox functionality for interactive selection
Badge 14
badge-14
Gradient styled badge with vibrant indigo-to-pink color transition
Badge 15
badge-15
Gradient outline badge with bordered gradient effect
Badge 16
badge-16
In-progress status badge with amber color and dot indicator
Badge 17
badge-17
Blocked status badge with destructive color and dot indicator
Badge 18
badge-18
Completed status badge with green color and dot indicator
Badge 19
badge-19
Pending status badge with amber outline and alert icon
Badge 20
badge-20
Failed status badge with destructive outline and ban icon
Badge 21
badge-21
Successful status badge with green outline and check icon
Badge 22
badge-22
Avatar badge combining user profile image with label text
Badge 23
badge-23
Cart notification badge with count display over shopping icon
Badge 24
badge-24
Online status indicator badge with green dot over avatar
Breadcrumb 1
breadcrumb-01
Basic breadcrumb navigation with standard separators for page hierarchy
Breadcrumb 2
breadcrumb-02
Breadcrumb with home icon and slash separators for enhanced navigation
Breadcrumb 3
breadcrumb-03
Breadcrumb with folder icons and chevron separators for file system navigation
Breadcrumb 4
breadcrumb-04
Breadcrumb with dot icon separators for minimal visual hierarchy
Breadcrumb 5
breadcrumb-05
Breadcrumb styled with outlined badge components for modern tab-like appearance
Breadcrumb 6
breadcrumb-06
Breadcrumb with dropdown menu integration for compact nested navigation and outlined badge components for modern tab-like appearance
Breadcrumb 7
breadcrumb-07
Interactive breadcrumb with folder state icons and dropdown functionality
Breadcrumb 8
breadcrumb-08
Outlined breadcrumb with bordered container styling for defined boundaries
Button 1
button-01
A basic button component with default styling
Button 2
button-02
A button component in disabled state
Button 3
button-03
A rounded button with icon and text content
Button 4
button-04
A button with animated icon that moves on hover
Button 5
button-05
Outline buttons with icons positioned before and after text
Button 6
button-06
Grouped action buttons for Cancel and Save operations
Button 7
button-07
A button component with large size variant
Button 8
button-08
A button component with small size variant
Button 9
button-09
A button component with custom extra small sizing
Button 10
button-10
A destructive button with gradient background for delete actions
Button 11
button-11
A Primary Button with gradient background effect for primary action
Button 12
button-12
Upgrade button with amber gradient and icon
Button 13
button-13
Outline button with sky blue theme for duplicate action
Button 14
button-14
Outline button with dashed border for download action
Button 15
button-15
Destructive outline button for discard/delete actions
Button 16
button-16
Ghost button with animated arrow on hover
Button 17
button-17
Loading button with spinning icon in disabled state
Button 18
button-18
Link button with animated underline effect on hover
Button 19
button-19
Publish button with circular icon badge and rounded outline styling
Button 20
button-20
Copy button UI displaying a truncated URL with a rounded "Copy" icon for quick copying.
Button 21
button-21
Button with badge indicator showing unread message count
Button 22
button-22
caution button with a warning icon and soft amber styling to indicate alerts or risks.
Button 23
button-23
Save button with a floppy disk icon and soft blue background for non-intrusive actions.
Button 24
button-24
Action buttons styled for “Reject” and “Approve” with colored shield icons to indicate decision-based actions
Button 25
button-25
Notifications button with bell icon and red notification badge counter
Button 26
button-26
Promise-based button with loading spinner and success/error state transitions
Button 27
button-27
User profile button with avatar image and username display
Button 28
button-28
Copy button with state transition animation between copy and check icons
Button 29
button-29
Social media icon buttons for Google, X/Twitter, Facebook, and GitHub
Button 30
button-30
Social authentication buttons with branded colors and "Continue with" text
Button 31
button-31
Icon-only button with bookmark icon and screen reader accessibility
Button 32
button-32
Circular icon button with plus icon and tooltip for enhanced UX
Button 33
button-33
Toggle icon button that switches between menu and close icons
Button 34
button-34
Theme toggle button switching between sun and moon icons with colored styling
Button 35
button-35
Mail icon button with notification badge counter for unread messages
Button 36
button-36
Security icon button with destructive gradient background effect
Button 37
button-37
Success icon button with soft green background and check icon
Button 38
button-38
Notification icon button with animated blue dot indicator
Button 39
button-39
Animated button with ripple effect on click
Button 40
button-40
Button with ring hover effect that shows animated border on hover
Button 41
button-41
Button with shine hover effect using gradient animation
Button 42
button-42
Button with tap scale animation using Framer Motion
Button 43
button-43
Button with shimmer effect animation across the surface
Button 44
button-44
Button with bounce hover effect on mouse interaction
Button 45
button-45
Button with magnetic effect that follows mouse movement
Button 46
button-46
Destructive button with heartbeat pulse animation effect
Button 47
button-47
Button with stitched border design using layered shadow effects
Button 48
button-48
Button with stitched border design using layered shadow effects
Button 49
button-49
Button with stitched border design using layered shadow effects
Button 50
button-50
Button with stitched border design using layered shadow effects
Button 51
button-51
Button with stitched border design using layered shadow effects
Button 52
button-52
Button with stitched border design using layered shadow effects
Button 53
button-53
Button with stitched border design using layered shadow effects
Button 54
button-54
Button with stitched border design using layered shadow effects
Button 55
button-55
Button with stitched border design using layered shadow effects
Button Group 1
button-group-01
Download button group with action button and download count display
Button Group 2
button-group-02
Interactive like button group with toggle state and dynamic count
Button Group 3
button-group-03
Toolbar button group with tooltips for design tools and actions
Button Group 4
button-group-04
Rounded media control button group with play, pause, and skip functions
Button Group 5
button-group-05
Social media links button group with branded colors and hover effects
Button Group 6
button-group-06
Zoom control button group with increment/decrement and percentage display
Button Group 7
button-group-07
Number input button group with plus/minus controls and value display
Button Group 8
button-group-08
Preview link button group with primary action and external link icon
Button Group 9
button-group-09
Action button group with edit, duplicate, and delete functions
Button Group 10
button-group-10
Flip transformation button group with horizontal and vertical controls
Button Group 11
button-group-11
Git merge button group with dropdown menu for merge strategy selection
Button Group 12
button-group-12
Ghost variant button group for navigation between settings, dashboard, and analytics
Button Group 13
button-group-13
Email action button group with ripple animation effects
Button Group 14
button-group-14
Like/dislike button group with expandable hover reveal animation
Button Group 15
button-group-15
Navigation button group with scale animation on press using Framer Motion
Button Group 16
button-group-16
File action button group with animated shine/shimmer hover effect
Calendar 1
calendar-01
Basic single date selection calendar with default month display
Calendar 2
calendar-02
Multi-month calendar displaying two months side by side for single date selection
Calendar 3
calendar-03
Single month calendar with date range selection capability
Calendar 4
calendar-04
Multi-month calendar with date range selection across multiple months
Calendar 5
calendar-05
Range selection calendar with minimum days constraint (5 days minimum)
Calendar 6
calendar-06
Calendar with disabled dates before a specific date for restricted selection
Calendar 7
calendar-07
Range calendar with disabled weekends for business day selection only
Calendar 8
calendar-08
Localized calendar with language switching between English and Hindi
Calendar 9
calendar-09
Calendar with month and year dropdown selectors for easy navigation
Calendar 10
calendar-10
Variable size calendar with responsive cell sizing for different screen sizes
Calendar 11
calendar-11
Event calendar with integrated event list display and add event functionality
Calendar 12
calendar-12
Multi-select calendar allowing selection of multiple individual dates
Calendar 13
calendar-13
Custom styled calendar with sky blue theme for selected dates
Calendar 14
calendar-14
Custom styled range calendar with sky blue theme for date range selection
Calendar 15
calendar-15
Calendar with right-aligned navigation controls for alternative layout
Calendar 16
calendar-16
Calendar with left-aligned navigation controls for alternative layout
Calendar 17
calendar-17
Calendar with week numbers displayed for week-based scheduling
Calendar 18
calendar-18
Calendar with "Today" quick action button for fast current date selection
Calendar 19
calendar-19
Calendar with synchronized date input field for manual date entry
Calendar 20
calendar-20
Calendar with integrated time input for complete datetime selection
Calendar 21
calendar-21
Advanced calendar with collapsible year/month selection and custom navigation
Calendar 22
calendar-22
Calendar with preset date shortcuts (Today, Yesterday, Tomorrow, in 3 days, in a week, etc.)
Calendar 23
calendar-23
Range calendar with preset date range shortcuts (Last week, month, year, etc.)
Calendar 24
calendar-24
Appointment booking calendar with time slot selection and availability indicators
Calendar 25
calendar-25
Pricing calendar with dynamic price display for each date based on availability
Card 1
card-01
Login form card with email and password inputs
Card 2
card-02
Meeting notes card with team member avatars and attendee list
Card 3
card-03
Team invitation card with member list and invite functionality
Card 4
card-04
Image showcase card with gradient background and bottom-aligned image
Card 5
card-05
Image showcase card with top-aligned image and action buttons
Card 6
card-06
Horizontal layout card with side-by-side image and content
Card 7
card-07
Overlay card with image background and overlaid text content
Card 8
card-08
Soft background card with subtle primary color theme
Card 9
card-09
Outline card with primary border and transparent background
Card 10
card-10
Tabbed card with integrated tabs component for organized content sections
Card 11
card-11
Social media post card with user profile, image, hashtags and interaction buttons
Card 12
card-12
Product showcase card with gradient background, like button and pricing details
Card 13
card-13
Testimonial card with user profile, star rating and highlighted text review
Card 14
card-14
Dismissible action card with close button and call-to-action content
Card 15
card-15
Connected card group with three image showcase cards arranged side by side
Card 16
card-16
Interactive spotlight card with animated glow effect that follows mouse movement
Card 17
card-17
Dynamic 3D hover card with perspective transforms and smooth depth animations
Checkbox 1
checkbox-01
Basic checkbox with label for simple true/false selection
Checkbox 2
checkbox-02
Indeterminate checkbox with custom styling and three-state functionality
Checkbox 3
checkbox-03
Checkbox with dashed border styling for visual distinction
Checkbox 4
checkbox-04
Todo list checkbox with strikethrough text when checked
Checkbox 5
checkbox-05
Multiple checkboxes in different sizes for size comparison and selection
Checkbox 6
checkbox-06
Badge-style checkboxes with hidden unchecked state for compact selection
Checkbox 7
checkbox-07
Checkbox with description text providing additional context and information
Checkbox 8
checkbox-08
Horizontal group of checkboxes for technology selection with organized layout
Checkbox 9
checkbox-09
Vertical group of checkboxes with icons for fruits selection
Checkbox 10
checkbox-10
Color-themed checkboxes with destructive, info, and success color variants
Checkbox 11
checkbox-11
Custom icon checkboxes with heart, star, and circle icons for visual feedback
Checkbox 12
checkbox-12
Filled circular checkboxes with color themes and circle check icons
Checkbox 13
checkbox-13
Card-style checkboxes with border highlighting and description text
Checkbox 14
checkbox-14
List group checkboxes with icons and skills selection in bordered layout
Checkbox 15
checkbox-15
Tree checkbox with parent-child relationship and indeterminate state
Checkbox 16
checkbox-16
Form checkbox with terms acceptance, description text, and action buttons
Checkbox 17
checkbox-17
Smooth animated checkbox with motion transitions and visual feedback
Checkbox 18
checkbox-18
Animated todo checkbox with strikethrough effect and smooth transitions
Checkbox 19
checkbox-19
Checkbox with confetti animation effect when checked
Collapsible 1
collapsible-01
Basic collapsible with repository list and toggle button functionality
Collapsible 2
collapsible-02
File tree explorer with nested folders and expandable directory structure
Collapsible 3
collapsible-03
Task completion list with user avatars and progress percentages
Collapsible 4
collapsible-04
User list with avatars, status indicators and expandable team member details
Collapsible 5
collapsible-05
Filter panel with price range inputs, rating checkboxes and brand selection
Collapsible 6
collapsible-06
Simple text content collapsible with expandable paragraph sections
Collapsible 7
collapsible-07
FAQ card with collapsible answer section and expandable image content
Collapsible 8
collapsible-08
Menu items with dropdown actions and nested navigation structure
Collapsible 9
collapsible-09
Multi-step form with delivery address, shipping options and payment details
Collapsible 10
collapsible-10
Animated collapsible with smooth transitions and motion effects
Combobox 1
combobox-01
Basic combobox with framework selection and searchable dropdown
Combobox 2
combobox-02
Grouped combobox with fruits, vegetables, and beverages organized by categories
Combobox 3
combobox-03
Grouped combobox with disabled options and category-based selection
Combobox 4
combobox-04
Industry selector combobox with icons for various business sectors
Combobox 5
combobox-05
Framework selector combobox with custom check icon styling
Combobox 6
combobox-06
combobox with add new option functionality
Combobox 7
combobox-07
Timezone selector combobox with real timezone data from Intl API
Combobox 8
combobox-08
User selector combobox with avatars, name and email addresses
Combobox 9
combobox-09
Country selector combobox with flag icons and country selection
Combobox 10
combobox-10
Multi-select framework combobox with badge display and removable selections
Combobox 11
combobox-11
Multiple-select combobox with expandable badge view to show or hide selected items dynamically
Combobox 12
combobox-12
Multi-select combobox with a count badge showing the number of selected frameworks.
Combobox 13
combobox-13
Framework selector combobox with smooth animations and motion effects
Combobox 14
combobox-14
Framework selector combobox with floating label animation and enhanced styling
Data Table 1
data-table-01
Basic data table with records and row selection functionality
Data Table 2
data-table-02
Density data table with density selection
Data Table 3
data-table-03
Payment records table with search filter, column visibility toggle, and refresh functionality
Data Table 4
data-table-04
Product inventory table with images, badges, and advanced filtering by multiple attributes
Data Table 5
data-table-05
table with sortable columns and up/down arrow sort indicators
Data Table 6
data-table-06
Data table with row expansion functionality for detailed content display
Data Table 7
data-table-07
Data table with pinnable columns sticking to the left side or right side for easy access
Data Table 8
data-table-08
Drag-and-drop data table with sortable rows and reordering functionality
Data Table 9
data-table-09
Data table with expanding sub rows for detailed content display
Data Table 10
data-table-10
Data table with pagination, rows selection, and sorting system
Data Table 11
data-table-11
data table with sorting, row selection, and pagination—styled with Origin UI and powered by @tanstack/react-table
Data Table 12
data-table-12
Data table with export functionality supporting CSV, Excel, and multiple formats
Data Table 13
data-table-13
editable data table with inline cell editing for text, status, and progress—supports row selection and live updates.
Date Picker 1
date-picker-01
Basic single date picker with popover calendar display
Date Picker 2
date-picker-02
Date range picker with popover calendar for selecting start and end dates
Date Picker 3
date-picker-03
Single date picker with calendar icon and enhanced visual styling
Date Picker 4
date-picker-04
Date picker with integrated input field for manual date entry and calendar popup
Date Picker 5
date-picker-05
Natural language date picker supporting phrases like "tomorrow" or "next week"
Date Picker 6
date-picker-06
Date range picker with compact date formatting using little-date library
Date Picker 7
date-picker-07
Single date picker with disabled outside days for cleaner calendar view
Date Picker 8
date-picker-08
Simple time input field with step control for precise time selection
Date Picker 9
date-picker-09
Time input field with clock icon for enhanced visual identification
Date Picker 10
date-picker-10
Combined date picker and time input displayed side by side for datetime selection
Date Picker 11
date-picker-11
Date picker with time range selection (from/to times) for event scheduling
Date Picker 12
date-picker-12
Travel date picker with departure/return dates and time selection for bookings
Date Picker 13
date-picker-13
Analytics chart with date range filter showing visitor data and interactive filtering
Dialog 1
dialog-01
Basic alert dialog with confirmation for destructive actions
Dialog 2
dialog-02
Alert dialog with icon and detailed feature list for update notifications
Dialog 3
dialog-03
Destructive alert dialog with warning icon and checkbox for permanent deletion
Dialog 4
dialog-04
Scrollable dialog with long content and scroll area for product information
Dialog 5
dialog-05
Scrollable dialog with sticky header for fixed navigation while scrolling content
Dialog 6
dialog-06
Scrollable dialog with sticky footer for persistent action buttons
Dialog 7
dialog-07
Full-screen dialog taking up the entire viewport for immersive content
Dialog 8
dialog-08
Terms and conditions dialog with structured content and accept/decline actions
Dialog 9
dialog-09
Subscription dialog with input field and subscribe button
Dialog 10
dialog-10
Referral program dialog with avatar display and email sharing functionality
Dialog 11
dialog-11
Rating feedback dialog with emoji radio buttons and text area for comments
Dialog 12
dialog-12
OTP verification dialog with input-otp component and validation feedback
Dialog 13
dialog-13
Sign up dialog with gradient background and terms acceptance checkbox
Dialog 14
dialog-14
Sign in dialog with gradient background and social login options
Dialog 15
dialog-15
Invite friends dialog with avatar list and email invitation functionality
Dialog 16
dialog-16
Profile edit dialog positioned at top-left corner of screen
Dialog 17
dialog-17
Profile edit dialog positioned at top-align corner of screen
Dialog 18
dialog-18
Profile edit dialog positioned at top-right-aligned of screen
Dialog 19
dialog-19
Profile edit dialog positioned at middle-left-aligned of screen
Dialog 20
dialog-20
Profile edit dialog positioned at middle-right side of screen
Dialog 21
dialog-21
Profile edit dialog positioned at bottom-left-aligned of screen
Dialog 22
dialog-22
Profile edit dialog positioned at center left of screen
Dialog 23
dialog-23
Profile edit dialog positioned at bottom right aligned of screen
Dialog 24
dialog-24
Profile edit dialog with slide-up animation from bottom
Dialog 25
dialog-25
Profile edit dialog with slide-right animation from left side of the screen
Dialog 26
dialog-26
Profile edit dialog with zoom in animation from center of the screen
Dropdown Menu 1
dropdown-menu-01
Basic dropdown menu with groups, separators, and submenu for account actions
Dropdown Menu 2
dropdown-menu-02
User switcher dropdown with avatar display and task assignment selection
Dropdown Menu 3
dropdown-menu-03
Chat list dropdown with avatars, message previews, and notification badges
Dropdown Menu 4
dropdown-menu-04
Contact list dropdown with avatars, email display, and send action buttons
Dropdown Menu 5
dropdown-menu-05
Meeting schedule dropdown with avatars, switch toggles for scheduling control
Dropdown Menu 6
dropdown-menu-06
Text editing dropdown menu with formatting options and descriptions
Dropdown Menu 7
dropdown-menu-07
User account menu dropdown with avatar trigger and profile management options
Dropdown Menu 8
dropdown-menu-08
User profile dropdown with avatar header, user info, and submenu for invitations
Dropdown Menu 9
dropdown-menu-09
Start-aligned dropdown menu with edit, share, and delete actions
Dropdown Menu 10
dropdown-menu-10
End-aligned dropdown menu with browser actions and keyboard shortcuts
Dropdown Menu 11
dropdown-menu-11
Task priority selector dropdown with icons and priority levels
Dropdown Menu 12
dropdown-menu-12
User profile menu dropdown with icons for profile, settings, billing, and FAQ
Dropdown Menu 13
dropdown-menu-13
Dropdown with checkbox controls for UI elements
Dropdown Menu 14
dropdown-menu-14
Radio group selection dropdown for panel position with single choice selection
Dropdown Menu 15
dropdown-menu-15
Left side animation dropdown menu
Dropdown Menu 16
dropdown-menu-16
Animated dropdown menu with slide up animation effect
Form 1
form-01
Form with radio group selection and alert notifications for user feedback
Form 2
form-02
Form with checkbox controls and alert integration for user selections
Form 3
form-03
Form with switch toggle controls for settings and preferences
Form 4
form-04
Form with input fields and validation alerts for data entry
Form 5
form-05
Form with OTP input component for secure verification codes
Form 6
form-06
Form with textarea component for multi-line text input
Form 7
form-07
Form with select dropdown components for option selection
Form 8
form-08
Form with command popover for searchable command selection
Form 9
form-09
Form with date picker in popover for date selection
Form 10
form-10
Comprehensive form with multiple input types in card layout for complex data entry
Input 1
input-01
A basic email input field with placeholder text
Input 2
input-02
An email input field with a descriptive label for improved accessibility
Input 3
input-03
A required email input field with a red asterisk indicator and validation
Input 4
input-04
A disabled email input field that prevents user interaction
Input 5
input-05
A read-only email input field with default value and muted styling
Input 6
input-06
Text input fields showcasing different size variants (small, medium, large)
Input 7
input-07
An email input field with a pre-filled default value
Input 8
input-08
An input field with fully rounded borders for a modern appearance
Input 9
input-09
An input field with helper text below for additional guidance
Input 10
input-10
An email input field with right-aligned helper text for privacy assurance
Input 11
input-11
An email input field with hint text indicating the field is optional
Input 12
input-12
An email input field with error validation and dynamic error message display
Input 13
input-13
An email input field with custom indigo focus ring styling
Input 14
input-14
A username input field with a user icon positioned at the start
Input 15
input-15
An email input field with a mail icon positioned at the end
Input 16
input-16
A URL input field with "https://" text prefix positioned at the start
Input 17
input-17
A domain input field with ".com" text suffix positioned at the end
Input 18
input-18
A URL input field with both "https://" prefix and ".com" suffix text add-ons
Input 19
input-19
A URL input field with an external "https://" add-on box at the start
Input 20
input-20
A domain input field with an external ".com" add-on box at the end
Input 21
input-21
A URL input field with both external "https://" and ".com" add-on boxes
Input 22
input-22
An email input field with a filled muted background style and no border
Input 23
input-23
An email input field with an overlapping label positioned over the border
Input 24
input-24
An email input field with an animated floating label that moves on focus
Input 25
input-25
An email input field with an inset label positioned above the input area
Input 26
input-26
A password input field with a toggle button to show/hide password visibility
Input 27
input-27
A file input field with custom styling for the file picker button
Input 28
input-28
A URL input field with a protocol selector dropdown at the start
Input 29
input-29
A domain input field with a TLD selector dropdown at the end
Input 30
input-30
An email input field paired with a subscribe button for newsletter signups
Input 31
input-31
An email input field with an inline send button positioned at the end
Input 32
input-32
Input field with a right-aligned icon button, ideal for actions like downloading or submitting email addresses
Input 33
input-33
An email input field with an external subscribe button connected via styling
Input 34
input-34
Input field with character limit counter showing current count out of maximum allowed
Input 35
input-35
Input field with real-time character counter, guiding users on remaining character allowance.
Input 36
input-36
Input field with clear button to instantly reset the field value
Input 37
input-37
Search input field with keyboard shortcut indicator (⌘K) for enhanced UX
Input 38
input-38
Search input field with search icon and microphone button for voice input
Input 39
input-39
Search input field with loading indicator that shows during search operations
Input 40
input-40
Number input field with increment/decrement buttons using React Aria Components
Input 41
input-41
Number field with increment/decrement buttons positioned at the end using React Aria
Input 42
input-42
Number field with vertically stacked increment/decrement buttons using React Aria
Input 43
input-43
Number field with rounded increment/decrement buttons positioned inline using React Aria
Input 44
input-44
Number field with rounded increment/decrement buttons positioned at the end using React Aria
Input 45
input-45
Number field with vertically stacked chevron buttons for increment/decrement using React Aria
Input 46
input-46
Password input field with strength meter and requirements validation checker
Input Mask 1
input-mask-01
An input field with custom alphanumeric mask pattern for structured data entry
Input Mask 2
input-mask-02
A time input field with HH:MM:SS mask formatting for precise time entry
Input Mask 3
input-mask-03
A credit card number input with automatic formatting and card type detection
Input Mask 4
input-mask-04
A credit card expiry date input with MM/YY formatting and validation
Input Mask 5
input-mask-05
A credit card CVC input field with secure formatting and length validation
Input Mask 6
input-mask-06
A comprehensive credit card details form with card number, expiry, and CVC inputs with automatic formatting
Input OTP 1
input-otp-01
A 4-digit numeric OTP input field with individual slots for each digit
Input OTP 2
input-otp-02
A 4-character alphanumeric OTP input field supporting both letters and numbers
Input OTP 3
input-otp-03
A 4-digit OTP input field with resend functionality and helper text
Input OTP 4
input-otp-04
A 4-digit OTP input field with countdown timer and automatic resend functionality
Input OTP 5
input-otp-05
A 4-digit OTP input field with outlined styling and rounded borders
Input OTP 6
input-otp-06
A 4-digit OTP input field with filled background styling and muted appearance
Input OTP 7
input-otp-07
A 4-digit OTP input field with minimal underline styling and no background
Input OTP 8
input-otp-08
A 6-digit OTP input field with grouped layout and visual separator between groups
Input OTP 9
input-otp-09
A 6-digit OTP input field with outlined grouped layout and visual separator
Input OTP 10
input-otp-10
A 6-digit OTP input field with custom dot separator and grouped layout
Pagination 1
pagination-01
A basic pagination component with previous, numbered pages, and next controls
Pagination 2
pagination-02
A pagination component with chevron icons for previous and next navigation
Pagination 3
pagination-03
A pagination component with primary button styling for the active page
Pagination 4
pagination-04
A pagination component with secondary button styling and custom variants
Pagination 5
pagination-05
A bordered pagination component with dividers and connected button styling
Pagination 6
pagination-06
A pagination component with fully rounded button styling for modern appearance
Pagination 7
pagination-07
A pagination component with first and last page navigation buttons
Pagination 8
pagination-08
A pagination component with ellipsis and tooltip showing hidden page count
Pagination 9
pagination-09
A pagination component with underline styling for the active page indicator
Pagination 10
pagination-10
A card-style pagination component with border, shadow, and contained layout
Pagination 11
pagination-11
A minimal numberless pagination component with only previous and next controls
Pagination 12
pagination-12
A numberless pagination component with current page indicator text display
Pagination 13
pagination-13
A compact mini pagination component with page count display and icon navigation
Pagination 14
pagination-14
A pagination component with page size selector dropdown for customizable results per page
Pagination 15
pagination-15
A comprehensive pagination component with page size selector, tooltips, and detailed navigation controls
Popover 1
popover-01
A ratings popover displaying star ratings with progress bars and review statistics
Popover 2
popover-02
A dimensions popover with input fields for width, max width, height, and max height settings
Popover 3
popover-03
A pricing popover displaying plan details with features and pricing information
Popover 4
popover-04
A volume control popover with a slider for adjusting audio levels
Popover 5
popover-05
An informational popover about Shadcn Studio with description and learn more link
Popover 6
popover-06
A download progress popover with progress bar and pause/cancel/retry controls
Popover 7
popover-07
A file deletion confirmation popover with warning icon and action buttons
Popover 8
popover-08
A feedback popover with textarea for user comments and send/cancel actions
Popover 9
popover-09
A filter popover with checkbox options and price range slider controls
Popover 10
popover-10
A user search popover with debounced input, loading states, and avatar display
Popover 11
popover-11
A notifications popover with unread indicators and mark-as-read functionality
Popover 12
popover-12
An informational popover with image and content layout for location details
Popover 13
popover-13
A promotional popover with QR code and coupon code with copy functionality with slide in from left animation
Popover 14
popover-14
A team sharing popover with email input and member selection checkboxes with slide in from bottom animation
Popover 15
popover-15
A user profile popover with avatar, bio, and social statistics display with zoom-in animation
Radio Group 1
radio-group-01
A basic vertical radio group
Radio Group 2
radio-group-02
A horizontal radio group layout
Radio Group 3
radio-group-03
A colored radio group with custom styling for different states
Radio Group 4
radio-group-04
A radio group with different sizes for various display options
Radio Group 5
radio-group-05
A radio group with dashed borders
Radio Group 6
radio-group-06
A radio group with solid filled styling for theme selection
Radio Group 7
radio-group-07
A radio group with descriptions for detailed plan selection options
Radio Group 8
radio-group-08
A chip-style radio group with grid layout for size selection
Radio Group 9
radio-group-09
A list-style radio group with pricing and badges for plan selection
Radio Group 10
radio-group-10
A split-list radio group with highlighted selected state and pricing
Radio Group 11
radio-group-11
A card-style radio group with detailed descriptions and pricing
Radio Group 12
radio-group-12
A border less card radio group with hidden radio buttons and label-based selection
Radio Group 13
radio-group-13
A vertical card radio group with icons and centered layout for plan selection
Radio Group 14
radio-group-14
An animated radio group with motion effects for notification preferences
Radio Group 15
radio-group-15
An animated inset radio group with smooth transitions for language selection
Select 1
select-01
A basic native select dropdown for gender selection
Select 2
select-02
A native select dropdown with placeholder text for user guidance
Select 3
select-03
A native select dropdown with icon for movie selection
Select 4
select-04
A native select dropdown with helper text
Select 5
select-05
A native select dropdown with error state and validation message
Select 6
select-06
A required native select dropdown with asterisk indicator
Select 7
select-07
A native select dropdown with option groups for categorized choices
Select 8
select-08
A native select dropdown with overlapping label design
Select 9
select-09
A native select dropdown with inset label design and custom styling
Select 10
select-10
A basic custom select dropdown with grouped items and labels
Select 11
select-11
A custom select dropdown with placeholder text
Select 12
select-12
A custom select dropdown with icon
Select 13
select-13
A custom select dropdown with helper text for location selection
Select 14
select-14
A custom select dropdown with error state and validation message
Select 15
select-15
A custom select dropdown with different size variants (small, default, large)
Select 16
select-16
A custom select dropdown with colored border and focus ring styling
Select 17
select-17
A custom select dropdown with colored background and themed styling
Select 18
select-18
A ghost-style custom select dropdown with minimal styling and hover effects
Select 19
select-19
A disabled custom select dropdown with reduced opacity and interaction
Select 20
select-20
A custom select dropdown with disabled individual options
Select 21
select-21
A custom select dropdown with required field indicator
Select 22
select-22
A custom select dropdown with multiple option groups
Select 23
select-23
A custom select dropdown with separators and grouped countries by geographic regions
Select 24
select-24
A custom select dropdown with overlapping label positioned over the border
Select 25
select-25
A custom select dropdown with inset label design inside bordered container
Select 26
select-26
A timezone select dropdown with grouped time zones by geographic regions
Select 27
select-27
A music genre select dropdown with icons for each option
Select 28
select-28
A custom select dropdown with leading text before the selected value
Select 29
select-29
A status select dropdown with colored circle indicators for each status
Select 30
select-30
A country select dropdown with flag images for each country option
Select 31
select-31
A user select dropdown with avatar images for each user option
Select 32
select-32
A multi-select dropdown with search functionality for product categories
Select 33
select-33
A multi-select dropdown with placeholder, badge display and removal functionality
Select 34
select-34
A native multiple select dropdown for dietary preferences with bordered container
Select 35
select-35
A React Aria Components listbox with single selection for currency options
Select 36
select-36
A React Aria Components listbox with multiple selection and grouped language options
Select 37
select-37
An animated select dropdown with slide-in from bottom transition effect
Select 38
select-38
An animated select dropdown with zoom-in transition effect from center
Sheet 1
sheet-01
A basic sheet component with form inputs for profile editing
Sheet 2
sheet-02
A sheet component demonstrating different slide directions (top, right, bottom, left)
Sheet 3
sheet-03
A non-modal sheet component without overlay for profile editing
Sheet 4
sheet-04
A sheet component with scrollable content for terms and conditions
Sheet 5
sheet-05
A sheet component with form validation and structured user registration
Sheet 6
sheet-06
A navigation sheet component with collapsible menu structure
Sheet 7
sheet-07
A sheet component with data table, pagination, and form integration for adding user data
Sonner 1
sonner-01
A basic toast notification with simple message display
Sonner 2
sonner-02
A toast notification with title and description for detailed information
Sonner 3
sonner-03
A toast notification with custom icon for enhanced visual communication
Sonner 4
sonner-04
A toast notification with avatar component for personalized user notifications
Sonner 5
sonner-05
A closable toast notification with user-controlled dismiss functionality
Sonner 6
sonner-06
A toast notification with action button for interactive user responses
Sonner 7
sonner-07
A promise-based toast notification with loading, success, and error states
Sonner 8
sonner-08
A toast notification with configurable positioning options for all screen corners and centers for e.g. (top-left, top-right, bottom-left, bottom-right, center)
Sonner 9
sonner-09
A soft-styled info toast notification with color-mixed background for subtle messaging
Sonner 10
sonner-10
A soft-styled success toast notification with green color theming for positive feedback
Sonner 11
sonner-11
A soft-styled warning toast notification with amber color theming for caution messages
Sonner 12
sonner-12
A soft-styled destructive error toast notification with subtle red theming for error messages
Sonner 13
sonner-13
An outline-styled info toast notification with border highlighting for informational messages
Sonner 14
sonner-14
An outline-styled success toast notification with green border theming for positive feedback
Sonner 15
sonner-15
An outline-styled warning toast notification with amber border theming for caution messages
Sonner 16
sonner-16
An outline-styled destructive error toast notification with red border theming for error messages
Sonner 17
sonner-17
A solid-styled info toast notification with blue background and white text for prominent messaging
Sonner 18
sonner-18
A solid-styled success toast notification with green background and white text for prominent positive feedback
Sonner 19
sonner-19
A solid-styled warning toast notification with amber background and white text for prominent caution messages
Sonner 20
sonner-20
A solid-styled destructive error toast notification with red background and white text for prominent error messages
Switch 1
switch-01
A basic switch component with label for simple on/off controls
Switch 2
switch-02
A square-styled switch with rounded corners for alternative visual design
Switch 3
switch-03
A mini-sized switch with border styling for compact interface layouts
Switch 4
switch-04
Color-themed switches with destructive, success, info, and warning variants
Switch 5
switch-05
Multiple size variations of switches with small, medium, and large options
Switch 6
switch-06
Outline-styled switches with transparent backgrounds and colored borders for different themes
Switch 7
switch-07
A gradient-styled switch with amber to sky/indigo color transitions based on state
Switch 8
switch-08
A switch with dynamic label that changes text based on toggle state (Yes/No)
Switch 9
switch-09
A dual-label switch with clickable Yes/No labels that toggle the switch state
Switch 10
switch-10
A switch with icon label that toggles between sun and moon icons for theme switching
Switch 11
switch-11
A dual-icon switch with clickable sun and moon icons for theme mode switching
Switch 12
switch-12
A switch with check and X icon indicators that change visibility based on toggle state
Switch 13
switch-13
A switch with sliding check and X icon indicators that move with the toggle handle
Switch 14
switch-14
A square-styled switch with sliding Yes/No text indicators in the background
Switch 15
switch-15
A switch integrated within a card layout with database icon for backup settings
Switch 16
switch-16
A switch card with Google Cloud icon for backup service toggle functionality
Switch 17
switch-17
A switch card with GitHub icon for repository connection toggle functionality
Switch 18
switch-18
A list group of switches with icons for skill preference selection across multiple categories
Switch 19
switch-19
Animated motion switches in multiple sizes with smooth transition effects
Switch 20
switch-20
Animated gradient motion switches with color transitions and multiple size variations
Table 1
table-01
A basic table with caption, header, body, and footer displaying invoice data
Table 2
table-02
A bordered table with complete border styling around the table container
Table 3
table-03
A table with rounded corners and shadow styling for enhanced visual appeal
Table 4
table-04
A table with vertical lines between columns for clear data separation
Table 5
table-05
A table without borders for a clean, minimal appearance
Table 6
table-06
A striped rows table with alternating row background colors for improved readability
Table 7
table-07
A striped columns table with alternating column background colors for enhanced data comparison
Table 8
table-08
A table with highlighted row functionality for emphasis and user interaction
Table 9
table-09
A table with vertical scrolling functionality for displaying large datasets
Table 10
table-10
A table with sticky header that remains visible during vertical scrolling
Table 11
table-11
A table with sticky first column that remains fixed during horizontal scrolling
Table 12
table-12
A vertical table layout for displaying data in a column-oriented format with key-value pairs
Table 13
table-13
A table with avatar components for displaying user information with profile pictures
Table 14
table-14
A table with integrated pagination controls for navigating through large datasets
Table 15
table-15
A table with selectable rows using checkboxes for bulk actions and data manipulation
Table 16
table-16
A comprehensive product table with avatars, checkboxes, buttons, and action controls
Tabs 1
tabs-01
Basic tabs component with default styling for content organization and navigation
Tabs 2
tabs-02
Outlined tabs with border styling and background transparency for modern interface design
Tabs 3
tabs-03
Tabs with icons for enhanced visual navigation and improved user experience
Tabs 4
tabs-04
Tabs with badge components for displaying notifications, counters, or status indicators
Tabs 5
tabs-05
Vertical tabs with icons displayed above text labels in a stacked layout
Tabs 6
tabs-06
Tabs with badge count indicators showing numerical values for each tab
Tabs 7
tabs-07
Icon-only tabs with tooltip labels for compact navigation
Tabs 8
tabs-08
Simple justified tabs with equal width distribution across the container
Tabs 9
tabs-09
Solid pill-style tabs with rounded corners and filled background
Tabs 10
tabs-10
Outlined pill-style tabs with border styling and transparent background
Tabs 11
tabs-11
Underline tabs with border bottom styling for minimal navigation
Tabs 12
tabs-12
Sharp-cornered tabs with rectangular styling and bottom border
Tabs 13
tabs-13
Lifted tabs with shadow effects for elevated appearance
Tabs 14
tabs-14
Overflow tabs with scrollable area for handling many tab items
Tabs 15
tabs-15
Vertical tabs layout with left-side navigation structure
Tabs 16
tabs-16
Vertical tabs with underline styling in left-side layout
Tabs 17
tabs-17
Soft vertical tabs with gentle styling and left navigation
Tabs 18
tabs-18
Vertical tabs with solid background styling and left layout
Tabs 19
tabs-19
Vertical tabs with sharp corners and rectangular styling
Tabs 20
tabs-20
Vertical tabs with lined separator styling for organized layout
Tabs 21
tabs-21
Vertical tabs with tooltip functionality for additional information
Tabs 22
tabs-22
Vertical tabs with icons for enhanced visual navigation
Tabs 23
tabs-23
Vertical tabs with badge indicators in left navigation layout
Tabs 24
tabs-24
Vertical tabs with outline styling for clean bordered appearance
Tabs 25
tabs-25
Custom styled tabs with primary background active state and enhanced hover effects
Tabs 26
tabs-26
Custom tabs with underline styling using bottom border and no background
Tabs 27
tabs-27
Animated tabs with motion highlight transitions using motion-tabs components
Tabs 28
tabs-28
Expandable tabs with icons and collapsible content using framer motion animations
Tabs 29
tabs-29
Animated underline tabs with dynamic underline position tracking using framer motion
Textarea 1
textarea-01
A basic textarea input field with placeholder text
Textarea 2
textarea-02
A textarea with associated label for improved accessibility
Textarea 3
textarea-03
A textarea with helper text below for additional context
Textarea 4
textarea-04
A textarea with right-aligned helper text for guidance
Textarea 5
textarea-05
An invalid textarea with error styling and validation message
Textarea 6
textarea-06
A textarea with hint text providing user guidance and tips
Textarea 7
textarea-07
A required textarea with asterisk indicator for mandatory fields
Textarea 8
textarea-08
A textarea with colored border (indigo) styling and focus ring effects
Textarea 9
textarea-09
A filled textarea with muted background and transparent border styling
Textarea 10
textarea-10
Textarea size variations with small, default, and large height options
Textarea 11
textarea-11
A textarea with start icon positioned on the left side
Textarea 12
textarea-12
A textarea with end icon positioned on the right side
Textarea 13
textarea-13
A textarea with overlapping label for modern form design
Textarea 14
textarea-14
A textarea with floating label that animates on focus
Textarea 15
textarea-15
A textarea with inset label for compact form layouts
Textarea 16
textarea-16
A textarea with separate submit button below for form submission
Textarea 17
textarea-17
An auto-growing textarea with field-sizing-content that expands with text content
Textarea 18
textarea-18
A textarea with disabled resize functionality for fixed dimensions
Textarea 19
textarea-19
A textarea with character count display and remaining characters indicator
Textarea 20
textarea-20
A read-only textarea with muted background styling for displaying non-editable content
Textarea 21
textarea-21
A disabled textarea in non-interactive state for form display
Tooltip 1
tooltip-01
A basic tooltip with simple text content displayed on hover
Tooltip 2
tooltip-02
A light-themed tooltip with custom background and text colors
Tooltip 3
tooltip-03
A tooltip without the arrow indicator for clean minimal appearance
Tooltip 4
tooltip-04
An error-styled tooltip with destructive color scheme for warnings
Tooltip 5
tooltip-05
A tooltip with an icon and text content in a flexible layout
Tooltip 6
tooltip-06
A tooltip with rounded corners for a modern soft appearance
Tooltip 7
tooltip-07
A rich content tooltip with accessibility information, icon and formatted text
Tooltip 8
tooltip-08
A tooltip displaying user information with avatar and name
Tooltip 9
tooltip-09
A tooltip with badge indicator for pricing and status information
Tooltip 10
tooltip-10
A directional tooltip demo showing placement on all four sides for e.g. top, right, bottom, left
Tooltip 11
tooltip-11
A hover card with media content including image and description links
Tooltip 12
tooltip-12
A hover card displaying statistics with avatar and growth metrics
Tooltip 13
tooltip-13
A project hover card with progress bar, timeline, and team avatars
Tooltip 14
tooltip-14
An alert hover card with warning icon for error notifications
Tooltip 15
tooltip-15
A hover card showing today's task completion with team member avatars and percentage progress
Tooltip 16
tooltip-16
An animated tooltip with stacked avatars and hover effects using motion-tooltip component
Tooltip 17
tooltip-17
A global tooltip system with overlapping avatars and hover scaling effects using global-tooltip component
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 1
accordion-01
Basic accordion with default styling and collapsible FAQ items.
Accordion 2
accordion-02
Card-style accordion with separated items, shadow effects, and rotated chevron icons.
Accordion 3
accordion-03
Icon-enhanced accordion with category icons displayed before each item title.
Accordion 4
accordion-04
Plus/minus icon accordion with animated icon transitions for expand/collapse states.
Accordion 5
accordion-05
Active state accordion with amber highlighting for expanded items and borders.
Accordion 6
accordion-06
Icon and expand indicator accordion with category icons and plus icon for expand/collapse.
Accordion 7
accordion-07
Avatar-based accordion displaying user profiles with avatar images, names, and email addresses.
Accordion 8
accordion-08
Enhanced icon accordion with circular icon containers and subtitle descriptions for each item.
Accordion 9
accordion-09
Outline-style accordion with bordered items and spacing between each accordion item.
Accordion 10
accordion-10
Box-style accordion with unified border container around all accordion items.
Accordion 11
accordion-11
Tab-style accordion with accent background highlighting for expanded items.
Accordion 12
accordion-12
Tab with outline accordion featuring bordered highlighting and shadow effects for expanded items.
Accordion 13
accordion-13
Media content accordion with category icons and embedded images in accordion content.
Accordion 14
accordion-14
Filled header accordion with accent background triggers and separated content sections.
Accordion 15
accordion-15
Multi-level accordion with nested collapsible sections for hierarchical FAQ organization.
Accordion 16
accordion-16
Simplified multi-level accordion with plus/minus icons for nested FAQ categories and questions.
Alert 1
alert-01
Basic alert with circle alert icon and simple title message.
Alert 2
alert-02
Avatar-enhanced alert with user profile image, and alert icon.
Alert 3
alert-03
Closable alert with dismiss functionality using X icon and state management.
Alert 4
alert-04
Interactive alert with link button featuring arrow icon and styled border/text colors.
Alert 5
alert-05
Attached icon alert with separated icon section and destructive warning styling.
Alert 6
alert-06
Focused icon alert with avatar-wrapped warning icon and destructive background styling.
Alert 7
alert-07
File upload progress alert with animated progress bar, action buttons, and close functionality.
Alert 8
alert-08
Multi-action alert with primary background, multiple buttons, and dismissible interface.
Alert 9
alert-09
Task progress alert with user avatar, progress indicator, and task completion tracking.
Alert 10
alert-10
Gradient background alert with email verification message and gradient styling.
Alert 11
alert-11
Success indicator alert with left border highlight and green success styling.
Alert 12
alert-12
Information/error indicator alert with destructive background styling and informational content.
Alert 13
alert-13
displaying a minimal "New message!" notification with an attention icon and an actionable "Open" button
Alert 14
alert-14
Error indicator alert with red styling and destructive error message.
Alert 15
alert-15
Pure destructive alert using built-in destructive variant with error styling.
Alert 16
alert-16
Minimal alert without icon displaying simple message text only.
Alert 17
alert-17
Standard alert with both title and description text providing detailed information.
Alert 18
alert-18
Outline info alert with blue border and text styling for informational messages.
Alert 19
alert-19
Outline success alert with green border and text for success messages.
Alert 20
alert-20
Outline warning alert with amber border and text for warning messages.
Alert 21
alert-21
Soft primary alert with subtle background and text styling for secondary messages.
Alert 22
alert-22
Soft info alert with blue background and subtle styling for information.
Alert 23
alert-23
Soft success alert with green background and subtle styling for success messages.
Alert 24
alert-24
Soft warning alert with amber background and subtle styling for warnings.
Alert 25
alert-25
Soft destructive alert with red background and subtle styling for errors.
Alert 26
alert-26
Solid info alert with full primary background for prominent informational messages.
Alert 27
alert-27
Solid success alert with full green background for prominent success messages.
Alert 28
alert-28
Solid warning alert with full amber background for prominent warning messages.
Alert 29
alert-29
Solid info alert with full blue background for prominent informational messages.
Alert 30
alert-30
Solid destructive alert with full red background for prominent error messages.
Avatar 1
avatar-01
Basic avatar with profile image and fallback initials.
Avatar 2
avatar-02
Avatar with ring border highlighting for active or selected states.
Avatar 3
avatar-03
Small sized avatar variant with compact dimensions.
Avatar 4
avatar-04
Large sized avatar variant with expanded dimensions.
Avatar 5
avatar-05
Circular avatar with fallback initials.
Avatar 6
avatar-06
Icon avatar using Lucide icon with colored background.
Avatar 7
avatar-07
Status avatar with busy indicator showing red status dot.
Avatar 8
avatar-08
Status avatar with online indicator showing green status dot.
Avatar 9
avatar-09
Status avatar with away indicator showing amber status dot for absent/away state.
Avatar 10
avatar-10
Avatar with plus icon overlay for adding or editing profile functionality.
Avatar 11
avatar-11
Avatar with notification badge showing count number for alerts and messages.
Avatar 12
avatar-12
Avatar with verified badge showing check mark icon for verified accounts.
Avatar 13
avatar-13
Avatar group displaying multiple overlapping users with ring borders.
Avatar 14
avatar-14
Avatar group with count indicator showing additional users (+9) in overflow.
Avatar 15
avatar-15
Large-sized avatar group with bigger dimensions for prominent display.
Avatar 16
avatar-16
Avatar group with tooltip hover effects and elevation animation.
Avatar 17
avatar-17
Avatar group with smooth spacing transition on hover interaction.
Avatar 18
avatar-18
Avatar group with tooltip transitions and hover spacing effects.
Avatar 19
avatar-19
Avatar group with dropdown menu showing additional users and actions.
Avatar 20
avatar-20
Avatar group with outlined container and background styling.
Avatar 21
avatar-21
Avatar group with popularity indicator styling and text showcasing community trust.
Badge 1
badge-01
Default badge demonstrating basic styling with standard text display
Badge 2
badge-02
Secondary variant badge with muted styling for less prominent labels
Badge 3
badge-03
Destructive variant badge with red styling for error or warning states
Badge 4
badge-04
Outline variant badge with bordered styling for subtle emphasis
Badge 5
badge-05
Dot indicator badge with colored circle for compact status representation
Badge 6
badge-06
Rounded badge with full border radius for pill-shaped appearance
Badge 7
badge-07
Number badge with circular design for count and notification displays
Badge 8
badge-08
Large size badge with increased padding for prominence
Badge 9
badge-09
Small size badge with reduced padding for compact display areas
Badge 10
badge-10
Badge with icon integration for enhanced visual context
Badge 11
badge-11
Link badge that can be used as clickable navigation element
Badge 12
badge-12
Closable badge with X button for dismissible notifications
Badge 13
badge-13
Selectable badge with checkbox functionality for interactive selection
Badge 14
badge-14
Gradient styled badge with vibrant indigo-to-pink color transition
Badge 15
badge-15
Gradient outline badge with bordered gradient effect
Badge 16
badge-16
In-progress status badge with amber color and dot indicator
Badge 17
badge-17
Blocked status badge with destructive color and dot indicator
Badge 18
badge-18
Completed status badge with green color and dot indicator
Badge 19
badge-19
Pending status badge with amber outline and alert icon
Badge 20
badge-20
Failed status badge with destructive outline and ban icon
Badge 21
badge-21
Successful status badge with green outline and check icon
Badge 22
badge-22
Avatar badge combining user profile image with label text
Badge 23
badge-23
Cart notification badge with count display over shopping icon
Badge 24
badge-24
Online status indicator badge with green dot over avatar
Breadcrumb 1
breadcrumb-01
Basic breadcrumb navigation with standard separators for page hierarchy
Breadcrumb 2
breadcrumb-02
Breadcrumb with home icon and slash separators for enhanced navigation
Breadcrumb 3
breadcrumb-03
Breadcrumb with folder icons and chevron separators for file system navigation
Breadcrumb 4
breadcrumb-04
Breadcrumb with dot icon separators for minimal visual hierarchy
Breadcrumb 5
breadcrumb-05
Breadcrumb styled with outlined badge components for modern tab-like appearance
Breadcrumb 6
breadcrumb-06
Breadcrumb with dropdown menu integration for compact nested navigation and outlined badge components for modern tab-like appearance
Breadcrumb 7
breadcrumb-07
Interactive breadcrumb with folder state icons and dropdown functionality
Breadcrumb 8
breadcrumb-08
Outlined breadcrumb with bordered container styling for defined boundaries
Button 1
button-01
A basic button component with default styling
Button 2
button-02
A button component in disabled state
Button 3
button-03
A rounded button with icon and text content
Button 4
button-04
A button with animated icon that moves on hover
Button 5
button-05
Outline buttons with icons positioned before and after text
Button 6
button-06
Grouped action buttons for Cancel and Save operations
Button 7
button-07
A button component with large size variant
Button 8
button-08
A button component with small size variant
Button 9
button-09
A button component with custom extra small sizing
Button 10
button-10
A destructive button with gradient background for delete actions
Button 11
button-11
A Primary Button with gradient background effect for primary action
Button 12
button-12
Upgrade button with amber gradient and icon
Button 13
button-13
Outline button with sky blue theme for duplicate action
Button 14
button-14
Outline button with dashed border for download action
Button 15
button-15
Destructive outline button for discard/delete actions
Button 16
button-16
Ghost button with animated arrow on hover
Button 17
button-17
Loading button with spinning icon in disabled state
Button 18
button-18
Link button with animated underline effect on hover
Button 19
button-19
Publish button with circular icon badge and rounded outline styling
Button 20
button-20
Copy button UI displaying a truncated URL with a rounded "Copy" icon for quick copying.
Button 21
button-21
Button with badge indicator showing unread message count
Button 22
button-22
caution button with a warning icon and soft amber styling to indicate alerts or risks.
Button 23
button-23
Save button with a floppy disk icon and soft blue background for non-intrusive actions.
Button 24
button-24
Action buttons styled for “Reject” and “Approve” with colored shield icons to indicate decision-based actions
Button 25
button-25
Notifications button with bell icon and red notification badge counter
Button 26
button-26
Promise-based button with loading spinner and success/error state transitions
Button 27
button-27
User profile button with avatar image and username display
Button 28
button-28
Copy button with state transition animation between copy and check icons
Button 29
button-29
Social media icon buttons for Google, X/Twitter, Facebook, and GitHub
Button 30
button-30
Social authentication buttons with branded colors and "Continue with" text
Button 31
button-31
Icon-only button with bookmark icon and screen reader accessibility
Button 32
button-32
Circular icon button with plus icon and tooltip for enhanced UX
Button 33
button-33
Toggle icon button that switches between menu and close icons
Button 34
button-34
Theme toggle button switching between sun and moon icons with colored styling
Button 35
button-35
Mail icon button with notification badge counter for unread messages
Button 36
button-36
Security icon button with destructive gradient background effect
Button 37
button-37
Success icon button with soft green background and check icon
Button 38
button-38
Notification icon button with animated blue dot indicator
Button 39
button-39
Animated button with ripple effect on click
Button 40
button-40
Button with ring hover effect that shows animated border on hover
Button 41
button-41
Button with shine hover effect using gradient animation
Button 42
button-42
Button with tap scale animation using Framer Motion
Button 43
button-43
Button with shimmer effect animation across the surface
Button 44
button-44
Button with bounce hover effect on mouse interaction
Button 45
button-45
Button with magnetic effect that follows mouse movement
Button 46
button-46
Destructive button with heartbeat pulse animation effect
Button 47
button-47
Button with stitched border design using layered shadow effects
Button 48
button-48
Button with stitched border design using layered shadow effects
Button 49
button-49
Button with stitched border design using layered shadow effects
Button 50
button-50
Button with stitched border design using layered shadow effects
Button 51
button-51
Button with stitched border design using layered shadow effects
Button 52
button-52
Button with stitched border design using layered shadow effects
Button 53
button-53
Button with stitched border design using layered shadow effects
Button 54
button-54
Button with stitched border design using layered shadow effects
Button 55
button-55
Button with stitched border design using layered shadow effects
Button Group 1
button-group-01
Download button group with action button and download count display
Button Group 2
button-group-02
Interactive like button group with toggle state and dynamic count
Button Group 3
button-group-03
Toolbar button group with tooltips for design tools and actions
Button Group 4
button-group-04
Rounded media control button group with play, pause, and skip functions
Button Group 5
button-group-05
Social media links button group with branded colors and hover effects
Button Group 6
button-group-06
Zoom control button group with increment/decrement and percentage display
Button Group 7
button-group-07
Number input button group with plus/minus controls and value display
Button Group 8
button-group-08
Preview link button group with primary action and external link icon
Button Group 9
button-group-09
Action button group with edit, duplicate, and delete functions
Button Group 10
button-group-10
Flip transformation button group with horizontal and vertical controls
Button Group 11
button-group-11
Git merge button group with dropdown menu for merge strategy selection
Button Group 12
button-group-12
Ghost variant button group for navigation between settings, dashboard, and analytics
Button Group 13
button-group-13
Email action button group with ripple animation effects
Button Group 14
button-group-14
Like/dislike button group with expandable hover reveal animation
Button Group 15
button-group-15
Navigation button group with scale animation on press using Framer Motion
Button Group 16
button-group-16
File action button group with animated shine/shimmer hover effect
Calendar 1
calendar-01
Basic single date selection calendar with default month display
Calendar 2
calendar-02
Multi-month calendar displaying two months side by side for single date selection
Calendar 3
calendar-03
Single month calendar with date range selection capability
Calendar 4
calendar-04
Multi-month calendar with date range selection across multiple months
Calendar 5
calendar-05
Range selection calendar with minimum days constraint (5 days minimum)
Calendar 6
calendar-06
Calendar with disabled dates before a specific date for restricted selection
Calendar 7
calendar-07
Range calendar with disabled weekends for business day selection only
Calendar 8
calendar-08
Localized calendar with language switching between English and Hindi
Calendar 9
calendar-09
Calendar with month and year dropdown selectors for easy navigation
Calendar 10
calendar-10
Variable size calendar with responsive cell sizing for different screen sizes
Calendar 11
calendar-11
Event calendar with integrated event list display and add event functionality
Calendar 12
calendar-12
Multi-select calendar allowing selection of multiple individual dates
Calendar 13
calendar-13
Custom styled calendar with sky blue theme for selected dates
Calendar 14
calendar-14
Custom styled range calendar with sky blue theme for date range selection
Calendar 15
calendar-15
Calendar with right-aligned navigation controls for alternative layout
Calendar 16
calendar-16
Calendar with left-aligned navigation controls for alternative layout
Calendar 17
calendar-17
Calendar with week numbers displayed for week-based scheduling
Calendar 18
calendar-18
Calendar with "Today" quick action button for fast current date selection
Calendar 19
calendar-19
Calendar with synchronized date input field for manual date entry
Calendar 20
calendar-20
Calendar with integrated time input for complete datetime selection
Calendar 21
calendar-21
Advanced calendar with collapsible year/month selection and custom navigation
Calendar 22
calendar-22
Calendar with preset date shortcuts (Today, Yesterday, Tomorrow, in 3 days, in a week, etc.)
Calendar 23
calendar-23
Range calendar with preset date range shortcuts (Last week, month, year, etc.)
Calendar 24
calendar-24
Appointment booking calendar with time slot selection and availability indicators
Calendar 25
calendar-25
Pricing calendar with dynamic price display for each date based on availability
Card 1
card-01
Login form card with email and password inputs
Card 2
card-02
Meeting notes card with team member avatars and attendee list
Card 3
card-03
Team invitation card with member list and invite functionality
Card 4
card-04
Image showcase card with gradient background and bottom-aligned image
Card 5
card-05
Image showcase card with top-aligned image and action buttons
Card 6
card-06
Horizontal layout card with side-by-side image and content
Card 7
card-07
Overlay card with image background and overlaid text content
Card 8
card-08
Soft background card with subtle primary color theme
Card 9
card-09
Outline card with primary border and transparent background
Card 10
card-10
Tabbed card with integrated tabs component for organized content sections
Card 11
card-11
Social media post card with user profile, image, hashtags and interaction buttons
Card 12
card-12
Product showcase card with gradient background, like button and pricing details
Card 13
card-13
Testimonial card with user profile, star rating and highlighted text review
Card 14
card-14
Dismissible action card with close button and call-to-action content
Card 15
card-15
Connected card group with three image showcase cards arranged side by side
Card 16
card-16
Interactive spotlight card with animated glow effect that follows mouse movement
Card 17
card-17
Dynamic 3D hover card with perspective transforms and smooth depth animations
Checkbox 1
checkbox-01
Basic checkbox with label for simple true/false selection
Checkbox 2
checkbox-02
Indeterminate checkbox with custom styling and three-state functionality
Checkbox 3
checkbox-03
Checkbox with dashed border styling for visual distinction
Checkbox 4
checkbox-04
Todo list checkbox with strikethrough text when checked
Checkbox 5
checkbox-05
Multiple checkboxes in different sizes for size comparison and selection
Checkbox 6
checkbox-06
Badge-style checkboxes with hidden unchecked state for compact selection
Checkbox 7
checkbox-07
Checkbox with description text providing additional context and information
Checkbox 8
checkbox-08
Horizontal group of checkboxes for technology selection with organized layout
Checkbox 9
checkbox-09
Vertical group of checkboxes with icons for fruits selection
Checkbox 10
checkbox-10
Color-themed checkboxes with destructive, info, and success color variants
Checkbox 11
checkbox-11
Custom icon checkboxes with heart, star, and circle icons for visual feedback
Checkbox 12
checkbox-12
Filled circular checkboxes with color themes and circle check icons
Checkbox 13
checkbox-13
Card-style checkboxes with border highlighting and description text
Checkbox 14
checkbox-14
List group checkboxes with icons and skills selection in bordered layout
Checkbox 15
checkbox-15
Tree checkbox with parent-child relationship and indeterminate state
Checkbox 16
checkbox-16
Form checkbox with terms acceptance, description text, and action buttons
Checkbox 17
checkbox-17
Smooth animated checkbox with motion transitions and visual feedback
Checkbox 18
checkbox-18
Animated todo checkbox with strikethrough effect and smooth transitions
Checkbox 19
checkbox-19
Checkbox with confetti animation effect when checked
Collapsible 1
collapsible-01
Basic collapsible with repository list and toggle button functionality
Collapsible 2
collapsible-02
File tree explorer with nested folders and expandable directory structure
Collapsible 3
collapsible-03
Task completion list with user avatars and progress percentages
Collapsible 4
collapsible-04
User list with avatars, status indicators and expandable team member details
Collapsible 5
collapsible-05
Filter panel with price range inputs, rating checkboxes and brand selection
Collapsible 6
collapsible-06
Simple text content collapsible with expandable paragraph sections
Collapsible 7
collapsible-07
FAQ card with collapsible answer section and expandable image content
Collapsible 8
collapsible-08
Menu items with dropdown actions and nested navigation structure
Collapsible 9
collapsible-09
Multi-step form with delivery address, shipping options and payment details
Collapsible 10
collapsible-10
Animated collapsible with smooth transitions and motion effects
Combobox 1
combobox-01
Basic combobox with framework selection and searchable dropdown
Combobox 2
combobox-02
Grouped combobox with fruits, vegetables, and beverages organized by categories
Combobox 3
combobox-03
Grouped combobox with disabled options and category-based selection
Combobox 4
combobox-04
Industry selector combobox with icons for various business sectors
Combobox 5
combobox-05
Framework selector combobox with custom check icon styling
Combobox 6
combobox-06
combobox with add new option functionality
Combobox 7
combobox-07
Timezone selector combobox with real timezone data from Intl API
Combobox 8
combobox-08
User selector combobox with avatars, name and email addresses
Combobox 9
combobox-09
Country selector combobox with flag icons and country selection
Combobox 10
combobox-10
Multi-select framework combobox with badge display and removable selections
Combobox 11
combobox-11
Multiple-select combobox with expandable badge view to show or hide selected items dynamically
Combobox 12
combobox-12
Multi-select combobox with a count badge showing the number of selected frameworks.
Combobox 13
combobox-13
Framework selector combobox with smooth animations and motion effects
Combobox 14
combobox-14
Framework selector combobox with floating label animation and enhanced styling
Data Table 1
data-table-01
Basic data table with records and row selection functionality
Data Table 2
data-table-02
Density data table with density selection
Data Table 3
data-table-03
Payment records table with search filter, column visibility toggle, and refresh functionality
Data Table 4
data-table-04
Product inventory table with images, badges, and advanced filtering by multiple attributes
Data Table 5
data-table-05
table with sortable columns and up/down arrow sort indicators
Data Table 6
data-table-06
Data table with row expansion functionality for detailed content display
Data Table 7
data-table-07
Data table with pinnable columns sticking to the left side or right side for easy access
Data Table 8
data-table-08
Drag-and-drop data table with sortable rows and reordering functionality
Data Table 9
data-table-09
Data table with expanding sub rows for detailed content display
Data Table 10
data-table-10
Data table with pagination, rows selection, and sorting system
Data Table 11
data-table-11
data table with sorting, row selection, and pagination—styled with Origin UI and powered by @tanstack/react-table
Data Table 12
data-table-12
Data table with export functionality supporting CSV, Excel, and multiple formats
Data Table 13
data-table-13
editable data table with inline cell editing for text, status, and progress—supports row selection and live updates.
Date Picker 1
date-picker-01
Basic single date picker with popover calendar display
Date Picker 2
date-picker-02
Date range picker with popover calendar for selecting start and end dates
Date Picker 3
date-picker-03
Single date picker with calendar icon and enhanced visual styling
Date Picker 4
date-picker-04
Date picker with integrated input field for manual date entry and calendar popup
Date Picker 5
date-picker-05
Natural language date picker supporting phrases like "tomorrow" or "next week"
Date Picker 6
date-picker-06
Date range picker with compact date formatting using little-date library
Date Picker 7
date-picker-07
Single date picker with disabled outside days for cleaner calendar view
Date Picker 8
date-picker-08
Simple time input field with step control for precise time selection
Date Picker 9
date-picker-09
Time input field with clock icon for enhanced visual identification
Date Picker 10
date-picker-10
Combined date picker and time input displayed side by side for datetime selection
Date Picker 11
date-picker-11
Date picker with time range selection (from/to times) for event scheduling
Date Picker 12
date-picker-12
Travel date picker with departure/return dates and time selection for bookings
Date Picker 13
date-picker-13
Analytics chart with date range filter showing visitor data and interactive filtering
Dialog 1
dialog-01
Basic alert dialog with confirmation for destructive actions
Dialog 2
dialog-02
Alert dialog with icon and detailed feature list for update notifications
Dialog 3
dialog-03
Destructive alert dialog with warning icon and checkbox for permanent deletion
Dialog 4
dialog-04
Scrollable dialog with long content and scroll area for product information
Dialog 5
dialog-05
Scrollable dialog with sticky header for fixed navigation while scrolling content
Dialog 6
dialog-06
Scrollable dialog with sticky footer for persistent action buttons
Dialog 7
dialog-07
Full-screen dialog taking up the entire viewport for immersive content
Dialog 8
dialog-08
Terms and conditions dialog with structured content and accept/decline actions
Dialog 9
dialog-09
Subscription dialog with input field and subscribe button
Dialog 10
dialog-10
Referral program dialog with avatar display and email sharing functionality
Dialog 11
dialog-11
Rating feedback dialog with emoji radio buttons and text area for comments
Dialog 12
dialog-12
OTP verification dialog with input-otp component and validation feedback
Dialog 13
dialog-13
Sign up dialog with gradient background and terms acceptance checkbox
Dialog 14
dialog-14
Sign in dialog with gradient background and social login options
Dialog 15
dialog-15
Invite friends dialog with avatar list and email invitation functionality
Dialog 16
dialog-16
Profile edit dialog positioned at top-left corner of screen
Dialog 17
dialog-17
Profile edit dialog positioned at top-align corner of screen
Dialog 18
dialog-18
Profile edit dialog positioned at top-right-aligned of screen
Dialog 19
dialog-19
Profile edit dialog positioned at middle-left-aligned of screen
Dialog 20
dialog-20
Profile edit dialog positioned at middle-right side of screen
Dialog 21
dialog-21
Profile edit dialog positioned at bottom-left-aligned of screen
Dialog 22
dialog-22
Profile edit dialog positioned at center left of screen
Dialog 23
dialog-23
Profile edit dialog positioned at bottom right aligned of screen
Dialog 24
dialog-24
Profile edit dialog with slide-up animation from bottom
Dialog 25
dialog-25
Profile edit dialog with slide-right animation from left side of the screen
Dialog 26
dialog-26
Profile edit dialog with zoom in animation from center of the screen
Dropdown Menu 1
dropdown-menu-01
Basic dropdown menu with groups, separators, and submenu for account actions
Dropdown Menu 2
dropdown-menu-02
User switcher dropdown with avatar display and task assignment selection
Dropdown Menu 3
dropdown-menu-03
Chat list dropdown with avatars, message previews, and notification badges
Dropdown Menu 4
dropdown-menu-04
Contact list dropdown with avatars, email display, and send action buttons
Dropdown Menu 5
dropdown-menu-05
Meeting schedule dropdown with avatars, switch toggles for scheduling control
Dropdown Menu 6
dropdown-menu-06
Text editing dropdown menu with formatting options and descriptions
Dropdown Menu 7
dropdown-menu-07
User account menu dropdown with avatar trigger and profile management options
Dropdown Menu 8
dropdown-menu-08
User profile dropdown with avatar header, user info, and submenu for invitations
Dropdown Menu 9
dropdown-menu-09
Start-aligned dropdown menu with edit, share, and delete actions
Dropdown Menu 10
dropdown-menu-10
End-aligned dropdown menu with browser actions and keyboard shortcuts
Dropdown Menu 11
dropdown-menu-11
Task priority selector dropdown with icons and priority levels
Dropdown Menu 12
dropdown-menu-12
User profile menu dropdown with icons for profile, settings, billing, and FAQ
Dropdown Menu 13
dropdown-menu-13
Dropdown with checkbox controls for UI elements
Dropdown Menu 14
dropdown-menu-14
Radio group selection dropdown for panel position with single choice selection
Dropdown Menu 15
dropdown-menu-15
Left side animation dropdown menu
Dropdown Menu 16
dropdown-menu-16
Animated dropdown menu with slide up animation effect
Form 1
form-01
Form with radio group selection and alert notifications for user feedback
Form 2
form-02
Form with checkbox controls and alert integration for user selections
Form 3
form-03
Form with switch toggle controls for settings and preferences
Form 4
form-04
Form with input fields and validation alerts for data entry
Form 5
form-05
Form with OTP input component for secure verification codes
Form 6
form-06
Form with textarea component for multi-line text input
Form 7
form-07
Form with select dropdown components for option selection
Form 8
form-08
Form with command popover for searchable command selection
Form 9
form-09
Form with date picker in popover for date selection
Form 10
form-10
Comprehensive form with multiple input types in card layout for complex data entry
Input 1
input-01
A basic email input field with placeholder text
Input 2
input-02
An email input field with a descriptive label for improved accessibility
Input 3
input-03
A required email input field with a red asterisk indicator and validation
Input 4
input-04
A disabled email input field that prevents user interaction
Input 5
input-05
A read-only email input field with default value and muted styling
Input 6
input-06
Text input fields showcasing different size variants (small, medium, large)
Input 7
input-07
An email input field with a pre-filled default value
Input 8
input-08
An input field with fully rounded borders for a modern appearance
Input 9
input-09
An input field with helper text below for additional guidance
Input 10
input-10
An email input field with right-aligned helper text for privacy assurance
Input 11
input-11
An email input field with hint text indicating the field is optional
Input 12
input-12
An email input field with error validation and dynamic error message display
Input 13
input-13
An email input field with custom indigo focus ring styling
Input 14
input-14
A username input field with a user icon positioned at the start
Input 15
input-15
An email input field with a mail icon positioned at the end
Input 16
input-16
A URL input field with "https://" text prefix positioned at the start
Input 17
input-17
A domain input field with ".com" text suffix positioned at the end
Input 18
input-18
A URL input field with both "https://" prefix and ".com" suffix text add-ons
Input 19
input-19
A URL input field with an external "https://" add-on box at the start
Input 20
input-20
A domain input field with an external ".com" add-on box at the end
Input 21
input-21
A URL input field with both external "https://" and ".com" add-on boxes
Input 22
input-22
An email input field with a filled muted background style and no border
Input 23
input-23
An email input field with an overlapping label positioned over the border
Input 24
input-24
An email input field with an animated floating label that moves on focus
Input 25
input-25
An email input field with an inset label positioned above the input area
Input 26
input-26
A password input field with a toggle button to show/hide password visibility
Input 27
input-27
A file input field with custom styling for the file picker button
Input 28
input-28
A URL input field with a protocol selector dropdown at the start
Input 29
input-29
A domain input field with a TLD selector dropdown at the end
Input 30
input-30
An email input field paired with a subscribe button for newsletter signups
Input 31
input-31
An email input field with an inline send button positioned at the end
Input 32
input-32
Input field with a right-aligned icon button, ideal for actions like downloading or submitting email addresses
Input 33
input-33
An email input field with an external subscribe button connected via styling
Input 34
input-34
Input field with character limit counter showing current count out of maximum allowed
Input 35
input-35
Input field with real-time character counter, guiding users on remaining character allowance.
Input 36
input-36
Input field with clear button to instantly reset the field value
Input 37
input-37
Search input field with keyboard shortcut indicator (⌘K) for enhanced UX
Input 38
input-38
Search input field with search icon and microphone button for voice input
Input 39
input-39
Search input field with loading indicator that shows during search operations
Input 40
input-40
Number input field with increment/decrement buttons using React Aria Components
Input 41
input-41
Number field with increment/decrement buttons positioned at the end using React Aria
Input 42
input-42
Number field with vertically stacked increment/decrement buttons using React Aria
Input 43
input-43
Number field with rounded increment/decrement buttons positioned inline using React Aria
Input 44
input-44
Number field with rounded increment/decrement buttons positioned at the end using React Aria
Input 45
input-45
Number field with vertically stacked chevron buttons for increment/decrement using React Aria
Input 46
input-46
Password input field with strength meter and requirements validation checker
Input Mask 1
input-mask-01
An input field with custom alphanumeric mask pattern for structured data entry
Input Mask 2
input-mask-02
A time input field with HH:MM:SS mask formatting for precise time entry
Input Mask 3
input-mask-03
A credit card number input with automatic formatting and card type detection
Input Mask 4
input-mask-04
A credit card expiry date input with MM/YY formatting and validation
Input Mask 5
input-mask-05
A credit card CVC input field with secure formatting and length validation
Input Mask 6
input-mask-06
A comprehensive credit card details form with card number, expiry, and CVC inputs with automatic formatting
Input OTP 1
input-otp-01
A 4-digit numeric OTP input field with individual slots for each digit
Input OTP 2
input-otp-02
A 4-character alphanumeric OTP input field supporting both letters and numbers
Input OTP 3
input-otp-03
A 4-digit OTP input field with resend functionality and helper text
Input OTP 4
input-otp-04
A 4-digit OTP input field with countdown timer and automatic resend functionality
Input OTP 5
input-otp-05
A 4-digit OTP input field with outlined styling and rounded borders
Input OTP 6
input-otp-06
A 4-digit OTP input field with filled background styling and muted appearance
Input OTP 7
input-otp-07
A 4-digit OTP input field with minimal underline styling and no background
Input OTP 8
input-otp-08
A 6-digit OTP input field with grouped layout and visual separator between groups
Input OTP 9
input-otp-09
A 6-digit OTP input field with outlined grouped layout and visual separator
Input OTP 10
input-otp-10
A 6-digit OTP input field with custom dot separator and grouped layout
Pagination 1
pagination-01
A basic pagination component with previous, numbered pages, and next controls
Pagination 2
pagination-02
A pagination component with chevron icons for previous and next navigation
Pagination 3
pagination-03
A pagination component with primary button styling for the active page
Pagination 4
pagination-04
A pagination component with secondary button styling and custom variants
Pagination 5
pagination-05
A bordered pagination component with dividers and connected button styling
Pagination 6
pagination-06
A pagination component with fully rounded button styling for modern appearance
Pagination 7
pagination-07
A pagination component with first and last page navigation buttons
Pagination 8
pagination-08
A pagination component with ellipsis and tooltip showing hidden page count
Pagination 9
pagination-09
A pagination component with underline styling for the active page indicator
Pagination 10
pagination-10
A card-style pagination component with border, shadow, and contained layout
Pagination 11
pagination-11
A minimal numberless pagination component with only previous and next controls
Pagination 12
pagination-12
A numberless pagination component with current page indicator text display
Pagination 13
pagination-13
A compact mini pagination component with page count display and icon navigation
Pagination 14
pagination-14
A pagination component with page size selector dropdown for customizable results per page
Pagination 15
pagination-15
A comprehensive pagination component with page size selector, tooltips, and detailed navigation controls
Popover 1
popover-01
A ratings popover displaying star ratings with progress bars and review statistics
Popover 2
popover-02
A dimensions popover with input fields for width, max width, height, and max height settings
Popover 3
popover-03
A pricing popover displaying plan details with features and pricing information
Popover 4
popover-04
A volume control popover with a slider for adjusting audio levels
Popover 5
popover-05
An informational popover about Shadcn Studio with description and learn more link
Popover 6
popover-06
A download progress popover with progress bar and pause/cancel/retry controls
Popover 7
popover-07
A file deletion confirmation popover with warning icon and action buttons
Popover 8
popover-08
A feedback popover with textarea for user comments and send/cancel actions
Popover 9
popover-09
A filter popover with checkbox options and price range slider controls
Popover 10
popover-10
A user search popover with debounced input, loading states, and avatar display
Popover 11
popover-11
A notifications popover with unread indicators and mark-as-read functionality
Popover 12
popover-12
An informational popover with image and content layout for location details
Popover 13
popover-13
A promotional popover with QR code and coupon code with copy functionality with slide in from left animation
Popover 14
popover-14
A team sharing popover with email input and member selection checkboxes with slide in from bottom animation
Popover 15
popover-15
A user profile popover with avatar, bio, and social statistics display with zoom-in animation
Radio Group 1
radio-group-01
A basic vertical radio group
Radio Group 2
radio-group-02
A horizontal radio group layout
Radio Group 3
radio-group-03
A colored radio group with custom styling for different states
Radio Group 4
radio-group-04
A radio group with different sizes for various display options
Radio Group 5
radio-group-05
A radio group with dashed borders
Radio Group 6
radio-group-06
A radio group with solid filled styling for theme selection
Radio Group 7
radio-group-07
A radio group with descriptions for detailed plan selection options
Radio Group 8
radio-group-08
A chip-style radio group with grid layout for size selection
Radio Group 9
radio-group-09
A list-style radio group with pricing and badges for plan selection
Radio Group 10
radio-group-10
A split-list radio group with highlighted selected state and pricing
Radio Group 11
radio-group-11
A card-style radio group with detailed descriptions and pricing
Radio Group 12
radio-group-12
A border less card radio group with hidden radio buttons and label-based selection
Radio Group 13
radio-group-13
A vertical card radio group with icons and centered layout for plan selection
Radio Group 14
radio-group-14
An animated radio group with motion effects for notification preferences
Radio Group 15
radio-group-15
An animated inset radio group with smooth transitions for language selection
Select 1
select-01
A basic native select dropdown for gender selection
Select 2
select-02
A native select dropdown with placeholder text for user guidance
Select 3
select-03
A native select dropdown with icon for movie selection
Select 4
select-04
A native select dropdown with helper text
Select 5
select-05
A native select dropdown with error state and validation message
Select 6
select-06
A required native select dropdown with asterisk indicator
Select 7
select-07
A native select dropdown with option groups for categorized choices
Select 8
select-08
A native select dropdown with overlapping label design
Select 9
select-09
A native select dropdown with inset label design and custom styling
Select 10
select-10
A basic custom select dropdown with grouped items and labels
Select 11
select-11
A custom select dropdown with placeholder text
Select 12
select-12
A custom select dropdown with icon
Select 13
select-13
A custom select dropdown with helper text for location selection
Select 14
select-14
A custom select dropdown with error state and validation message
Select 15
select-15
A custom select dropdown with different size variants (small, default, large)
Select 16
select-16
A custom select dropdown with colored border and focus ring styling
Select 17
select-17
A custom select dropdown with colored background and themed styling
Select 18
select-18
A ghost-style custom select dropdown with minimal styling and hover effects
Select 19
select-19
A disabled custom select dropdown with reduced opacity and interaction
Select 20
select-20
A custom select dropdown with disabled individual options
Select 21
select-21
A custom select dropdown with required field indicator
Select 22
select-22
A custom select dropdown with multiple option groups
Select 23
select-23
A custom select dropdown with separators and grouped countries by geographic regions
Select 24
select-24
A custom select dropdown with overlapping label positioned over the border
Select 25
select-25
A custom select dropdown with inset label design inside bordered container
Select 26
select-26
A timezone select dropdown with grouped time zones by geographic regions
Select 27
select-27
A music genre select dropdown with icons for each option
Select 28
select-28
A custom select dropdown with leading text before the selected value
Select 29
select-29
A status select dropdown with colored circle indicators for each status
Select 30
select-30
A country select dropdown with flag images for each country option
Select 31
select-31
A user select dropdown with avatar images for each user option
Select 32
select-32
A multi-select dropdown with search functionality for product categories
Select 33
select-33
A multi-select dropdown with placeholder, badge display and removal functionality
Select 34
select-34
A native multiple select dropdown for dietary preferences with bordered container
Select 35
select-35
A React Aria Components listbox with single selection for currency options
Select 36
select-36
A React Aria Components listbox with multiple selection and grouped language options
Select 37
select-37
An animated select dropdown with slide-in from bottom transition effect
Select 38
select-38
An animated select dropdown with zoom-in transition effect from center
Sheet 1
sheet-01
A basic sheet component with form inputs for profile editing
Sheet 2
sheet-02
A sheet component demonstrating different slide directions (top, right, bottom, left)
Sheet 3
sheet-03
A non-modal sheet component without overlay for profile editing
Sheet 4
sheet-04
A sheet component with scrollable content for terms and conditions
Sheet 5
sheet-05
A sheet component with form validation and structured user registration
Sheet 6
sheet-06
A navigation sheet component with collapsible menu structure
Sheet 7
sheet-07
A sheet component with data table, pagination, and form integration for adding user data
Sonner 1
sonner-01
A basic toast notification with simple message display
Sonner 2
sonner-02
A toast notification with title and description for detailed information
Sonner 3
sonner-03
A toast notification with custom icon for enhanced visual communication
Sonner 4
sonner-04
A toast notification with avatar component for personalized user notifications
Sonner 5
sonner-05
A closable toast notification with user-controlled dismiss functionality
Sonner 6
sonner-06
A toast notification with action button for interactive user responses
Sonner 7
sonner-07
A promise-based toast notification with loading, success, and error states
Sonner 8
sonner-08
A toast notification with configurable positioning options for all screen corners and centers for e.g. (top-left, top-right, bottom-left, bottom-right, center)
Sonner 9
sonner-09
A soft-styled info toast notification with color-mixed background for subtle messaging
Sonner 10
sonner-10
A soft-styled success toast notification with green color theming for positive feedback
Sonner 11
sonner-11
A soft-styled warning toast notification with amber color theming for caution messages
Sonner 12
sonner-12
A soft-styled destructive error toast notification with subtle red theming for error messages
Sonner 13
sonner-13
An outline-styled info toast notification with border highlighting for informational messages
Sonner 14
sonner-14
An outline-styled success toast notification with green border theming for positive feedback
Sonner 15
sonner-15
An outline-styled warning toast notification with amber border theming for caution messages
Sonner 16
sonner-16
An outline-styled destructive error toast notification with red border theming for error messages
Sonner 17
sonner-17
A solid-styled info toast notification with blue background and white text for prominent messaging
Sonner 18
sonner-18
A solid-styled success toast notification with green background and white text for prominent positive feedback
Sonner 19
sonner-19
A solid-styled warning toast notification with amber background and white text for prominent caution messages
Sonner 20
sonner-20
A solid-styled destructive error toast notification with red background and white text for prominent error messages
Switch 1
switch-01
A basic switch component with label for simple on/off controls
Switch 2
switch-02
A square-styled switch with rounded corners for alternative visual design
Switch 3
switch-03
A mini-sized switch with border styling for compact interface layouts
Switch 4
switch-04
Color-themed switches with destructive, success, info, and warning variants
Switch 5
switch-05
Multiple size variations of switches with small, medium, and large options
Switch 6
switch-06
Outline-styled switches with transparent backgrounds and colored borders for different themes
Switch 7
switch-07
A gradient-styled switch with amber to sky/indigo color transitions based on state
Switch 8
switch-08
A switch with dynamic label that changes text based on toggle state (Yes/No)
Switch 9
switch-09
A dual-label switch with clickable Yes/No labels that toggle the switch state
Switch 10
switch-10
A switch with icon label that toggles between sun and moon icons for theme switching
Switch 11
switch-11
A dual-icon switch with clickable sun and moon icons for theme mode switching
Switch 12
switch-12
A switch with check and X icon indicators that change visibility based on toggle state
Switch 13
switch-13
A switch with sliding check and X icon indicators that move with the toggle handle
Switch 14
switch-14
A square-styled switch with sliding Yes/No text indicators in the background
Switch 15
switch-15
A switch integrated within a card layout with database icon for backup settings
Switch 16
switch-16
A switch card with Google Cloud icon for backup service toggle functionality
Switch 17
switch-17
A switch card with GitHub icon for repository connection toggle functionality
Switch 18
switch-18
A list group of switches with icons for skill preference selection across multiple categories
Switch 19
switch-19
Animated motion switches in multiple sizes with smooth transition effects
Switch 20
switch-20
Animated gradient motion switches with color transitions and multiple size variations
Table 1
table-01
A basic table with caption, header, body, and footer displaying invoice data
Table 2
table-02
A bordered table with complete border styling around the table container
Table 3
table-03
A table with rounded corners and shadow styling for enhanced visual appeal
Table 4
table-04
A table with vertical lines between columns for clear data separation
Table 5
table-05
A table without borders for a clean, minimal appearance
Table 6
table-06
A striped rows table with alternating row background colors for improved readability
Table 7
table-07
A striped columns table with alternating column background colors for enhanced data comparison
Table 8
table-08
A table with highlighted row functionality for emphasis and user interaction
Table 9
table-09
A table with vertical scrolling functionality for displaying large datasets
Table 10
table-10
A table with sticky header that remains visible during vertical scrolling
Table 11
table-11
A table with sticky first column that remains fixed during horizontal scrolling
Table 12
table-12
A vertical table layout for displaying data in a column-oriented format with key-value pairs
Table 13
table-13
A table with avatar components for displaying user information with profile pictures
Table 14
table-14
A table with integrated pagination controls for navigating through large datasets
Table 15
table-15
A table with selectable rows using checkboxes for bulk actions and data manipulation
Table 16
table-16
A comprehensive product table with avatars, checkboxes, buttons, and action controls
Tabs 1
tabs-01
Basic tabs component with default styling for content organization and navigation
Tabs 2
tabs-02
Outlined tabs with border styling and background transparency for modern interface design
Tabs 3
tabs-03
Tabs with icons for enhanced visual navigation and improved user experience
Tabs 4
tabs-04
Tabs with badge components for displaying notifications, counters, or status indicators
Tabs 5
tabs-05
Vertical tabs with icons displayed above text labels in a stacked layout
Tabs 6
tabs-06
Tabs with badge count indicators showing numerical values for each tab
Tabs 7
tabs-07
Icon-only tabs with tooltip labels for compact navigation
Tabs 8
tabs-08
Simple justified tabs with equal width distribution across the container
Tabs 9
tabs-09
Solid pill-style tabs with rounded corners and filled background
Tabs 10
tabs-10
Outlined pill-style tabs with border styling and transparent background
Tabs 11
tabs-11
Underline tabs with border bottom styling for minimal navigation
Tabs 12
tabs-12
Sharp-cornered tabs with rectangular styling and bottom border
Tabs 13
tabs-13
Lifted tabs with shadow effects for elevated appearance
Tabs 14
tabs-14
Overflow tabs with scrollable area for handling many tab items
Tabs 15
tabs-15
Vertical tabs layout with left-side navigation structure
Tabs 16
tabs-16
Vertical tabs with underline styling in left-side layout
Tabs 17
tabs-17
Soft vertical tabs with gentle styling and left navigation
Tabs 18
tabs-18
Vertical tabs with solid background styling and left layout
Tabs 19
tabs-19
Vertical tabs with sharp corners and rectangular styling
Tabs 20
tabs-20
Vertical tabs with lined separator styling for organized layout
Tabs 21
tabs-21
Vertical tabs with tooltip functionality for additional information
Tabs 22
tabs-22
Vertical tabs with icons for enhanced visual navigation
Tabs 23
tabs-23
Vertical tabs with badge indicators in left navigation layout
Tabs 24
tabs-24
Vertical tabs with outline styling for clean bordered appearance
Tabs 25
tabs-25
Custom styled tabs with primary background active state and enhanced hover effects
Tabs 26
tabs-26
Custom tabs with underline styling using bottom border and no background
Tabs 27
tabs-27
Animated tabs with motion highlight transitions using motion-tabs components
Tabs 28
tabs-28
Expandable tabs with icons and collapsible content using framer motion animations
Tabs 29
tabs-29
Animated underline tabs with dynamic underline position tracking using framer motion
Textarea 1
textarea-01
A basic textarea input field with placeholder text
Textarea 2
textarea-02
A textarea with associated label for improved accessibility
Textarea 3
textarea-03
A textarea with helper text below for additional context
Textarea 4
textarea-04
A textarea with right-aligned helper text for guidance
Textarea 5
textarea-05
An invalid textarea with error styling and validation message
Textarea 6
textarea-06
A textarea with hint text providing user guidance and tips
Textarea 7
textarea-07
A required textarea with asterisk indicator for mandatory fields
Textarea 8
textarea-08
A textarea with colored border (indigo) styling and focus ring effects
Textarea 9
textarea-09
A filled textarea with muted background and transparent border styling
Textarea 10
textarea-10
Textarea size variations with small, default, and large height options
Textarea 11
textarea-11
A textarea with start icon positioned on the left side
Textarea 12
textarea-12
A textarea with end icon positioned on the right side
Textarea 13
textarea-13
A textarea with overlapping label for modern form design
Textarea 14
textarea-14
A textarea with floating label that animates on focus
Textarea 15
textarea-15
A textarea with inset label for compact form layouts
Textarea 16
textarea-16
A textarea with separate submit button below for form submission
Textarea 17
textarea-17
An auto-growing textarea with field-sizing-content that expands with text content
Textarea 18
textarea-18
A textarea with disabled resize functionality for fixed dimensions
Textarea 19
textarea-19
A textarea with character count display and remaining characters indicator
Textarea 20
textarea-20
A read-only textarea with muted background styling for displaying non-editable content
Textarea 21
textarea-21
A disabled textarea in non-interactive state for form display
Tooltip 1
tooltip-01
A basic tooltip with simple text content displayed on hover
Tooltip 2
tooltip-02
A light-themed tooltip with custom background and text colors
Tooltip 3
tooltip-03
A tooltip without the arrow indicator for clean minimal appearance
Tooltip 4
tooltip-04
An error-styled tooltip with destructive color scheme for warnings
Tooltip 5
tooltip-05
A tooltip with an icon and text content in a flexible layout
Tooltip 6
tooltip-06
A tooltip with rounded corners for a modern soft appearance
Tooltip 7
tooltip-07
A rich content tooltip with accessibility information, icon and formatted text
Tooltip 8
tooltip-08
A tooltip displaying user information with avatar and name
Tooltip 9
tooltip-09
A tooltip with badge indicator for pricing and status information
Tooltip 10
tooltip-10
A directional tooltip demo showing placement on all four sides for e.g. top, right, bottom, left
Tooltip 11
tooltip-11
A hover card with media content including image and description links
Tooltip 12
tooltip-12
A hover card displaying statistics with avatar and growth metrics
Tooltip 13
tooltip-13
A project hover card with progress bar, timeline, and team avatars
Tooltip 14
tooltip-14
An alert hover card with warning icon for error notifications
Tooltip 15
tooltip-15
A hover card showing today's task completion with team member avatars and percentage progress
Tooltip 16
tooltip-16
An animated tooltip with stacked avatars and hover effects using motion-tooltip component
Tooltip 17
tooltip-17
A global tooltip system with overlapping avatars and hover scaling effects using global-tooltip component
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information