SLARIVO / DROPDOWNS

Dropdowns Components

Browse 292 exact locally owned demos. Filter the collection, inspect a focused preview, and unlock its implementation prompt.

• Slarivo dropdown 01

  A reusable component for dropdown

• Slarivo Action dropdown

  A click-driven action picker whose multi-level submenu opens beside the row, jumps straight to the selected item, and drills in place with an animated breadcrumb at a fixed width.

• Slarivo HeroUI Select

  Accessible select built on React Aria, from HeroUI v3. A collapsible listbox with single and multiple selection, descriptions, grouped sections with headers and separators, disabled options, controlled value, primary/secondary variants, and full keyboard + typeahead support. Compound API: Select / Select.Trigger / Select.Value / Select.Indicator / Select.Popover + ListBox / ListBox.Item / ListBox.ItemIndicator / ListBox.Section / Header / Separator / Label / Description / FieldError.

• Slarivo Select

  Display a dropdown list of items.

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Dropdown Menu

  Displays a menu to the user — such as a set of actions or functions — triggered by a button.

• Slarivo Dropdown

  Here is Dropdown component

• Slarivo Switch

  Choose between a set of options.

• Slarivo Animated Dropdown

  A dropdown menu with smooth expand/collapse animations and click-outside handling.

• Slarivo Drilldown Menu

  A list that drills into itself. The row you click stays put, fades to a grey breadcrumb with a return arrow, and its children arrive one indent deeper — no sliding panels.

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Dropdown Menu

  Displays a menu to the user — such as a set of actions or functions — triggered by a button.

• Slarivo Select

  Displays a list of options for the user to pick from—triggered by a button.

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Filters

  A Linear inspired component to add / edit filters

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Breadcrumb

  Enchanced shadcn/ui breadcrumb

• Slarivo Popover [react-aria-components]

  A popover is an overlay element positioned relative to a trigger. There is no built in way to create popovers in HTML. Popover helps achieve accessible popovers that can be styled as needed.

• Slarivo Async Select

  Async Select component built with React & shadcn/ui

• Slarivo Color Picker

  Color picker

• Slarivo Language Selector Dropdown

  A polished language switcher dropdown with flags and labels, supporting multiple languages

• Slarivo Basic Dropdown

  Here is Basic Dropdown component

• Slarivo Button Group

  Here is Button Group component

• Slarivo Theme Dropdown

  Theme Dropdown

• Slarivo Fluid Dropdown

  Fluid dropdown component with hover and smooth animations, customizable colors and Animation

• Slarivo RuixenMenuOptions

  This RuixenMenuOptions component is a visually rich and user-friendly dropdown menu built using the ShadCN UI library and Lucide icons. It offers grouped actions like quick edits (rename, clone), organization options (move, pin, share), and settings, along with a clearly marked destructive action ("Delete Forever") styled in red for caution. The menu is neatly structured using submenus, separators, and keyboard shortcuts, making it ideal for applications requiring a compact, accessible action panel for managing items.

• Slarivo User Profile Dropdown

  UserProfileDropdown Component This component displays a user's avatar and details, along with a dropdown menu containing customizable actions.

• Slarivo Header-01

  header navigation bar menu

• Slarivo Data Table Filter

  This React component creates a customizable filter for data tables. It addresses the need for a clean, user-friendly way to filter table data based on various criteria. The component leverages the power of the shadcn/ui library for its UI elements and Tailwind CSS for styling, ensuring a consistent and visually appealing experience. **Functionality Breakdown:** 1. **Props-Driven Configuration:** The component is highly configurable through its props. You define the filter label, available options (each with a value, label, and optional icon), selected values, and a callback function to handle changes. The `isMultiSelect` prop controls whether users can select multiple filter options. 2. **Interactive Popover:** The filter displays as a button that, when clicked, reveals a popover containing a list of filter options. This uses the `@/components/ui/popover` component. 3. **Command Component for Options:** Filter options are rendered using the `@/components/ui/command` component, providing a familiar and accessible interface for selecting options. Each option is displayed with its label and optional icon. A checkmark indicates selected options. 4. **State Management:** The component manages the currently selected filter values internally using React's `useState` hook. Multi-select and single-select logic are carefully handled to ensure correct behavior. 5. **Dynamic Button Text:** The filter button dynamically updates its text to reflect the current selection (e.g., showing the selected option, or "(x selected)" for multiple selections). 6. **Clear and Select All:** For multi-select filters, "Select All" and "Clear Filter" buttons are provided for convenient bulk actions. 7. **Accessibility:** The component incorporates appropriate ARIA attributes (`aria-expanded`, `aria-haspopup`, `aria-selected`, `aria-label`) to enhance accessibility for screen readers and assistive technologies. **Libraries and Concepts:** - React: For building the component's UI and managing its state. - shadcn/ui: Provides the UI components (Button, Popover, Command). This library is built with Tailwind CSS. - Lucide-React: Library for providing the icons. - Tailwind CSS: Used for styling. - TypeScript: Used for type safety and better code maintainability. **Use Cases:** - Filtering data in tables based on status, priority, category, date, etc. - Creating advanced filtering capabilities in applications with large datasets. - Enhancing user experience by providing a streamlined way to filter information. **Example Scenarios:** - Filtering tasks by their status (active, pending, completed). - Filtering products based on category or price range. - Filtering users by their role or location.

• Slarivo Smart Popover

  This SmartPopover gives you a mobile-first popover/drawer combo that auto-adapts based on screen size. It wraps Radix Popover and Vaul Drawer with a shared context, so you write it once and it just works—perfect for menus, filters, or actions on both mobile and desktop.

• Slarivo Base Menu

  A list of actions in a dropdown, enhanced with keyboard navigation. Built on top of Base UI Menu component with shadcn styling.

• Slarivo Dropdown

  Here is Dropdown component

• Slarivo Dropdown

  Here is Dropdown component

• Slarivo Dropdown

  Here is Dropdown component

• Slarivo Dropdown

  Here is Dropdown component

• Slarivo Dropdown

  Here is Dropdown component

• Slarivo Dropdown

  Here is Dropdown component

• Slarivo Dropdown

  Here is Dropdown component

• Slarivo Dropdown

  Here is Dropdown component

• Slarivo Navigation menu

  A collection of links for navigating websites.

• Slarivo Expandable Tabs

  A set of expandable tabs that show both icon and text when selected. Tabs animate smoothly to expand or collapse on click, and clicking outside collapses any open tab. Features - Animated Expansion: Smooth animations when revealing tab labels - Space Efficient: Collapses to icons-only when not in use - Click Outside: Automatically collapses when clicking outside - Separator Support: Optional separators between tab groups - Customizable: Supports custom colors and styling - Shadcn/UI Theme: Fully integrated with shadcn/ui theming system - Dark Mode: Built-in dark mode support - Accessible: Keyboard navigation and screen reader friendly Example Use Cases - Navigation Menus: Compact sidebar navigation - Toolbars: Feature-rich toolbars that save space - Mobile Interfaces: Touch-friendly navigation - Settings Panels: Grouped settings controls - Dashboard Controls: Quick access to main features

• Slarivo Dropdown Menu

  Displays a menu to the user — such as a set of actions or functions — triggered by a button.

• Slarivo Dropdown Menu

  Displays a menu to the user — such as a set of actions or functions — triggered by a button.

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Navbar with Dropdowns

  A classic shadcn style navbar with dropdowns and mobile slide in menu.

• Slarivo Dock

  A versatile UI element that provides a flexible and customizable way to organize and display menu items within your application.

• Slarivo Header

  Header with shadcn navigation menu and buttons

• Slarivo Crypto Swap Card

  Crypto Swap Card With Real Time Pricing of Currency Using CoinGecko Free api

• Slarivo Share Card

  ShareCard A card component to manage and share access to a resource, such as a folder. It allows inviting new users with specific roles and modifying the roles of existing users.

• Slarivo Action Toolbar

  The ActionToolbar component is a modern, interactive toolbar built to combine functionality and design elegance. Inspired by the shared-border button style, it presents a unified, polished look with rounded edges, subtle gradients, and smooth hover transitions. Each button can act independently or include dropdown menus for extended actions, making it ideal for editor panels, dashboards, or productivity interfaces. The toolbar supports active states, badges for counts, and an optional compact mode for tighter layouts. With its clean design, responsive behavior, and intuitive interactivity, ActionToolbar offers both practicality and a refined visual experience—perfect for any modern web application interface.

• Slarivo Animated Staggered Dropdown

  This code implements a visually appealing and interactive dropdown component using animation libraries. It addresses the need for a more engaging user experience compared to a standard dropdown. The component displays a list of options when a button is clicked. The animation is achieved using the `motion` library from Framer Motion, providing a staggered, smooth opening and closing animation for each list item. The dropdown's functionality is built using React's useState hook to manage its open/closed state. The component utilizes React Icons for its icons, offering a customizable and visually consistent experience. The `wrapperVariants`, `iconVariants`, `itemVariants`, and `actionIconVariants` objects define the animation properties for the dropdown wrapper, chevron icon, list items, and action icons respectively, controlling the timing and appearance of animations. Each option is rendered as a separate list item within a motion.ul. Upon clicking an option, the dropdown closes, and the corresponding action could be triggered (though that logic is not included in this example; it would be added within the Option component). The component is highly customizable via props (though not demonstrated here). The example uses a set of predefined icons and options, but these can be easily replaced or extended. This component can be used in various applications where a visually appealing and interactive dropdown menu is needed, such as within a settings menu, a post-management interface, or any context menu where multiple actions are available.

• Slarivo Menu

  A dropdown menu component with support for icons, keyboard shortcuts, checkboxes, switches, radio groups, links, group labels, nested submenus, and dialog triggers. Also exported as DropdownMenu for compatibility.

• Slarivo Menu

  A dropdown menu component with support for icons, keyboard shortcuts, checkboxes, switches, radio groups, links, group labels, nested submenus, and dialog triggers. Also exported as DropdownMenu for compatibility.

• Slarivo Health Stat Card

  The HealthStatCard component is a beautifully designed, interactive, and reusable UI card built using Shadcn UI and Framer Motion. It is perfect for displaying health, fitness, or performance-related statistics in a visually engaging way. The card features smooth animations, rounded “bubble-style” bars with 3D hover effects, and an optional tooltip that provides detailed information about each data point. You can configure the title, icon, stats, graph data, legend visibility, and even customize tooltip descriptions for each bar. This makes it ideal for use in dashboards, wellness apps, or analytics pages where users can easily visualize and interpret progress trends at a glance.

• Slarivo Project Selector

  Here is modern project selector component

• Slarivo Issue Context Menu

  Here is ContextMenu by indevui

• Slarivo Scheduler

  Here is notification scheduler component

• Slarivo Dropdown Menu

  Displays a menu to the user — such as a set of actions or functions — triggered by a button.

• Slarivo Dropdown Menu

  Displays a menu to the user — such as a set of actions or functions — triggered by a button.

• Slarivo Menu

  Here is Context Menu component

• Slarivo HeroUI Dropdown

  Accessible dropdown menu built on React Aria, from HeroUI v3. A trigger-anchored popover menu supporting plain actions, leading icons, descriptions, keyboard shortcuts (Kbd), grouped sections with headers and separators, disabled items, single and multiple selection with check indicators, a controlled selected state, a danger/destructive variant, and a custom avatar trigger. Full keyboard navigation, typeahead, and focus management. Compound API: Dropdown / Dropdown.Trigger / Dropdown.Popover / Dropdown.Menu / Dropdown.Item / Dropdown.Section / Dropdown.ItemIndicator + Label / Header / Description / Separator / Kbd / Avatar.

• Slarivo HeroUI Dropdown

  Accessible dropdown menu built on React Aria, from HeroUI v3. A trigger-anchored popover menu supporting plain actions, leading icons, descriptions, keyboard shortcuts (Kbd), grouped sections with headers and separators, disabled items, single and multiple selection with check indicators, a controlled selected state, a danger/destructive variant, and a custom avatar trigger. Full keyboard navigation, typeahead, and focus management. Compound API: Dropdown / Dropdown.Trigger / Dropdown.Popover / Dropdown.Menu / Dropdown.Item / Dropdown.Section / Dropdown.ItemIndicator + Label / Header / Description / Separator / Kbd / Avatar.

• Slarivo HeroUI Dropdown

  Accessible dropdown menu built on React Aria, from HeroUI v3. A trigger-anchored popover menu supporting plain actions, leading icons, descriptions, keyboard shortcuts (Kbd), grouped sections with headers and separators, disabled items, single and multiple selection with check indicators, a controlled selected state, a danger/destructive variant, and a custom avatar trigger. Full keyboard navigation, typeahead, and focus management. Compound API: Dropdown / Dropdown.Trigger / Dropdown.Popover / Dropdown.Menu / Dropdown.Item / Dropdown.Section / Dropdown.ItemIndicator + Label / Header / Description / Separator / Kbd / Avatar.

• Slarivo HeroUI Dropdown

  Accessible dropdown menu built on React Aria, from HeroUI v3. A trigger-anchored popover menu supporting plain actions, leading icons, descriptions, keyboard shortcuts (Kbd), grouped sections with headers and separators, disabled items, single and multiple selection with check indicators, a controlled selected state, a danger/destructive variant, and a custom avatar trigger. Full keyboard navigation, typeahead, and focus management. Compound API: Dropdown / Dropdown.Trigger / Dropdown.Popover / Dropdown.Menu / Dropdown.Item / Dropdown.Section / Dropdown.ItemIndicator + Label / Header / Description / Separator / Kbd / Avatar.

• Slarivo HeroUI Dropdown

  Accessible dropdown menu built on React Aria, from HeroUI v3. A trigger-anchored popover menu supporting plain actions, leading icons, descriptions, keyboard shortcuts (Kbd), grouped sections with headers and separators, disabled items, single and multiple selection with check indicators, a controlled selected state, a danger/destructive variant, and a custom avatar trigger. Full keyboard navigation, typeahead, and focus management. Compound API: Dropdown / Dropdown.Trigger / Dropdown.Popover / Dropdown.Menu / Dropdown.Item / Dropdown.Section / Dropdown.ItemIndicator + Label / Header / Description / Separator / Kbd / Avatar.

• Slarivo HeroUI Dropdown

  Accessible dropdown menu built on React Aria, from HeroUI v3. A trigger-anchored popover menu supporting plain actions, leading icons, descriptions, keyboard shortcuts (Kbd), grouped sections with headers and separators, disabled items, single and multiple selection with check indicators, a controlled selected state, a danger/destructive variant, and a custom avatar trigger. Full keyboard navigation, typeahead, and focus management. Compound API: Dropdown / Dropdown.Trigger / Dropdown.Popover / Dropdown.Menu / Dropdown.Item / Dropdown.Section / Dropdown.ItemIndicator + Label / Header / Description / Separator / Kbd / Avatar.

• Slarivo HeroUI Dropdown

  Accessible dropdown menu built on React Aria, from HeroUI v3. A trigger-anchored popover menu supporting plain actions, leading icons, descriptions, keyboard shortcuts (Kbd), grouped sections with headers and separators, disabled items, single and multiple selection with check indicators, a controlled selected state, a danger/destructive variant, and a custom avatar trigger. Full keyboard navigation, typeahead, and focus management. Compound API: Dropdown / Dropdown.Trigger / Dropdown.Popover / Dropdown.Menu / Dropdown.Item / Dropdown.Section / Dropdown.ItemIndicator + Label / Header / Description / Separator / Kbd / Avatar.

• Slarivo HeroUI Dropdown

  Accessible dropdown menu built on React Aria, from HeroUI v3. A trigger-anchored popover menu supporting plain actions, leading icons, descriptions, keyboard shortcuts (Kbd), grouped sections with headers and separators, disabled items, single and multiple selection with check indicators, a controlled selected state, a danger/destructive variant, and a custom avatar trigger. Full keyboard navigation, typeahead, and focus management. Compound API: Dropdown / Dropdown.Trigger / Dropdown.Popover / Dropdown.Menu / Dropdown.Item / Dropdown.Section / Dropdown.ItemIndicator + Label / Header / Description / Separator / Kbd / Avatar.

• Slarivo HeroUI Dropdown

  Accessible dropdown menu built on React Aria, from HeroUI v3. A trigger-anchored popover menu supporting plain actions, leading icons, descriptions, keyboard shortcuts (Kbd), grouped sections with headers and separators, disabled items, single and multiple selection with check indicators, a controlled selected state, a danger/destructive variant, and a custom avatar trigger. Full keyboard navigation, typeahead, and focus management. Compound API: Dropdown / Dropdown.Trigger / Dropdown.Popover / Dropdown.Menu / Dropdown.Item / Dropdown.Section / Dropdown.ItemIndicator + Label / Header / Description / Separator / Kbd / Avatar.

• Slarivo BeUI Multi-chain Swap

  Dropdowns component from the 21st.dev community.

• Slarivo Context Menu

  A right-click (or long-press) context menu with items, checkboxes, radio groups, nested submenus, keyboard shortcuts, and destructive actions.

• Slarivo Priority Selector

  Here is priority selector icon by indev ui

• Slarivo Expandable Content Button

  The Expandable Content Button is a highly flexible shadcn/ui component that combines a standard button with a hidden dropdown panel. On click, the button expands to reveal a mini-card containing configurable options, such as filters, social share links, or other quick actions. The main button includes a right-aligned chevron icon that indicates the expanded state, while the dropdown options can include custom Lucide icons or none at all, depending on the use case. It automatically closes when the user clicks outside, ensuring a clean and intuitive user experience. This component is ideal for dashboards, toolbars, or any interface where space-efficient interactive controls are needed, offering both visual clarity and functional flexibility.

• Slarivo User Context Menu

  The ActionToolbar component is a clean and functional UI element designed to provide users with easy access to common actions. Featuring a simple layout with plain background colors, clear spacing between icons and labels, and smooth hover effects, it ensures both clarity and usability. Each button in the toolbar includes an icon paired with descriptive text, improving recognition and accessibility for users. This component is ideal for dashboards, control panels, and productivity tools where quick access to key functions is essential. Its minimalist design keeps the interface organized, professional, and visually balanced across different screen sizes.

• Slarivo Reshaped Autocomplete

  Renders a TextField and a list of suggested values using Autocomplete.Item compound components. The list is shown when the user focuses the field and hidden once they select a value. Supports filtering, custom item composition with slots, multiline start slot and FormControl integration.

• Slarivo 8-bit Menubar

  Pixel-art horizontal menubar from 8bitcn.com — retro pixel border on top-level items and submenus, with checkbox/radio items and submenus. Built on Radix Menubar (clean source).

• Slarivo Material UI Autocomplete / Combobox / Multi-select

  A high-fidelity Material Design 3 Autocomplete and Multi-select Combobox built for shadcn/ui. Features a custom physics-based ripple engine, cinematic staggered entrance animations, and a luxurious floating scroll area with smooth fade masks. Built-in advanced multi-select suppor

• Slarivo Floating Navbar

  A pill-shaped floating navigation bar with rounded icon buttons and a dropdown action menu for quick app navigation.

• Slarivo 8-bit Menubar

  Pixel-art horizontal menubar from 8bitcn.com — retro pixel border on top-level items and submenus. Wraps Radix Menubar (inlined via esbuild).

• Slarivo Activity Dropdown

  An animated activity dropdown menu with smooth transitions and icon indicators.

• Slarivo HeroUI Button Group

  HeroUI v3 ButtonGroup — grouped buttons with separators, variants, sizes, orientation, icons and full-width layout.

• Slarivo Reshaped Context menu

  Root wrapper whose children receive a right-click handler to open an overlaying menu. Exposes compound components for menu items, item sections and nested sub-menus with automatic focus trapping, supports DropdownMenu positioning properties and automatically fits into the viewport.

• Slarivo Context Menu

  A right-click context menu with keyboard navigation, typeahead, long-press support on touch, and smart edge-aware positioning that renders through a portal.

• Slarivo Popover (Base UI)

  A popover built on Base UI popover primitives with side-aware panel motion, optional anchor support, and size-aware content transitions.

• Slarivo Share Menu with Export Submenu

  A dropdown menu triggered by a Share button, with a copy-link item and a nested Export submenu for choosing formats like PDF, PNG, SVG, or CSV.

• Slarivo File Actions Menu

  A dropdown menu of file actions — rename, duplicate, move, download and a destructive delete — with keyboard shortcut hints.

• Slarivo Basic Context Menu

  A right-click context menu with grouped items, keyboard shortcuts, a nested submenu, and a destructive action, built on Base UI.

• Slarivo Grouped Context Menu

  A right-click context menu with grouped file and edit actions, keyboard shortcuts, and a destructive delete item.

• Slarivo Context Menu with Icons

  A right-click context menu with copy, cut, paste, and a destructive delete action, each labelled with an icon.

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Accordion

  Enchanced shadcn/ui accordion

• Slarivo Header 3

  Feature-rich responsive header with scroll blur, animated mobile drawer, and nested navigation menus.

• Slarivo Navigation Menu

  Upgrade your project with a sleek React + Tailwind CSS Navigation Menu featuring a modern desktop mega menu and a smooth mobile drawer. Perfect for SaaS dashboards, landing pages, and websites that need a professional, multi-level navigation experience.

• Slarivo Animated AI Input

  AI input with animated model switching.

• Slarivo Interactive Selector

  A visually striking, interactive React component showcasing premium camping options with smooth animations, responsive layout

• Slarivo Dropdowm Menu

  Dropdown menu component with framer motion and tailwind css.

• Slarivo Navbar 5

  Shadcn Navbar with 2 column dropdown menus and mobile menu that slides in from the top with dropdowns

• Slarivo Data Table

  Powerful table and datagrids built using TanStack Table.

• Slarivo User Dropdown

  A comprehensive user profile dropdown menu with avatar trigger, status management, and organized navigation sections. Features dark/light mode support, customizable user data, and grouped menu items for profile settings, premium features, support resources, and account management. Built with React, Tailwind CSS, and Iconify icons. Key Features: Avatar-triggered dropdown with user info display Status indicator with update submenu (Online, Focus, Offline) Organized menu sections (Profile, Premium, Support, Account) Full dark/light theme compatibility Configurable props for user data and event handlers Modern UI with icons, badges, and responsive design Perfect for SaaS platforms, dashboards, and applications requiring professional user account management interfaces.

• Slarivo Color Picker

  A @shadcn-ui compatible color picker using @uiw/react-color

• Slarivo Color Picker

  Inputs component from the 21st.dev community.

• Slarivo Dorpdown Navigation

  A dynamic and interactive multi-level navigation menu with dropdown submenus and hover effects.

• Slarivo Dorpdown Navigation

  A dynamic and interactive multi-level navigation menu with dropdown submenus and hover effects.

• Slarivo Workspaces

  a flexible, context-based solution to manage and display multiple workspaces in your app. It uses Radix Popover, supports avatars, search, and customizable rendering—perfect for SaaS dashboards with multi-tenant support.

• Slarivo Multiple Selector

  Fast, composable, fully-featured multiple selector for React.

• Slarivo Select [react-aria-components]

  A Select displays a collapsible list of options and allows a user to select one of them. A select can be built using the <select> and <option> HTML elements, but this is not possible to style consistently cross browser, especially the options. Select helps achieve accessible select components that can be styled as needed without compromising on high quality interactions.

• Slarivo Fluid menu

  A fluid circular menu that elegantly expands to reveal navigation items with smooth icon transitions

• Slarivo Mega Menu

  Here is vercel styled menu component

• Slarivo Navbar

  This MinimalChatBox component is a lightweight, interactive chat interface built with React, Framer Motion, and Tailwind. It provides a clean toggleable chat box that smoothly animates in and out of view. The design is simple yet functional, featuring an input field for typing messages and quick-access icons for opening, closing, and sending. Its minimal styling makes it easy to embed into any application while maintaining a modern, distraction-free look.

• Slarivo Dropdown Menu

  Displays a menu to the user — such as a set of actions or functions — triggered by a button.

• Slarivo Navigation Menu

  Here is Navigation Menu component

• Slarivo Menu Toggle

  a sleek animated toggle button (like a hamburger menu) built with SVG. It smoothly transitions between open and closed states with a fun rotation and line morph effect—perfect for modern navbars!

• Slarivo Navigation Bar

  Here is Navigation Bar component

• Slarivo Navbar

  Navbar with hover animation effect

• Slarivo Menubar

  A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

• Slarivo Select

  A comprehensive select component with support for single selection, icons, and animations.

• Slarivo Vercel Navbar

  Vercel Navbar with navigation menu

• Slarivo Popover

  A beautifully wrapped Radix Popover with custom slots, animations, and sections like header, body, and footer — all styled for seamless integration. Easily build interactive popups with consistent UI and flexible layout support.

• Slarivo Popover

  A beautifully wrapped Radix Popover with custom slots, animations, and sections like header, body, and footer — all styled for seamless integration. Easily build interactive popups with consistent UI and flexible layout support.

• Slarivo Autocomplete

  Custom autocomplete component built with Shadcn ui and Fancy Multi Select by Maximilian Kaske. Feel free to play around with it and customize it to your needs.

• Slarivo Multiple select

  Select option with multiple choices

• Slarivo useClickOutside

  A hook that handles clicks outside of a specified element

• Slarivo Select (Native)

  Native select in shadcn/ui style

• Slarivo Tag Selector

  A versatile component for selecting and creating multiple tags with search functionality and keyboard navigation support.

• Slarivo Select

  Display a dropdown list of items.

• Slarivo Profile Dropdown

  A profile dropdown for Users.

• Slarivo Select

  Reusable select option component built with framer motion and tailwindcss

• Slarivo Select

  Displays a list of options for the user to pick from—triggered by a button.

• Slarivo Basic Dropdown

  Here is Basic Dropdown component

• Slarivo Context Menu

  Displays a menu to the user — such as a set of actions or functions — triggered by a button.

• Slarivo Coach Scheduling Card

  This is a fully interactive, motion-enhanced Coach Scheduling Card that allows users to view a coach’s weekly availability, select time slots, choose a location, and confirm bookings—all in a single animated, responsive UI. It blends profile preview, dropdown logic, availability grids, and confirmation flows into a seamless component with thoughtful framer-motion effects throughout. Animations are conditionally toggled for accessibility, and the UI adapts to user actions in real-time. Perfect for fitness apps, tutoring platforms, service marketplaces, or any SaaS tool offering human-led bookings with sleek UX.

• Slarivo MacOS Menu Bar

  Menus component from the 21st.dev community.

• Slarivo Activity Dropdown

  Activity Dropdown: Features a staggered reveal animation where each notification item fades in sequentially, a rotating chevron indicator, and full light/dark theme support.

• Slarivo Navigation Menu

  A collection of links for navigating websites.

• Slarivo Flexi Filter Table

  This Super Mega Filter component is designed to provide a clean yet powerful way to filter large sets of data. Built with shadcn UI, it combines dropdowns, checkboxes, and keyword search in a plain, minimal layout that makes it both practical and reusable. The component is highly configurable—you can easily add, remove, or customize filter categories such as status, category, and date range without touching the core structure. Its lightweight design ensures it blends seamlessly into dashboards, admin panels, or job portals without looking overdone, while still giving users precise control over narrowing down results. By prioritizing usability over fancy styling, this filter is ideal for real-world applications where clarity and efficiency matter most.

• Slarivo SidebarShowcase

  This custom sidebar component is a fully responsive, interactive navigation panel built using ShadCN UI, Framer Motion, and React. It features a team switcher at the top, allowing users to quickly toggle between different teams using a dropdown menu. The sidebar is divided into categories such as “Main” and “Work,” where each category contains individual navigation items. The Work category supports collapsible sub-labels with smooth animations for nested items, while some items can remain as single links without dropdowns. Each navigation item can display a status badge (like “New,” “Updated,” or “Coming Soon”) to indicate priority or updates. At the bottom, the sidebar includes a user profile dropdown with options for profile management, settings, billing, and logout, fully leveraging ShadCN UI’s DropdownMenu. The component combines clean typography, muted default text, hover effects, and smooth motion animations, offering a polished and professional navigation experience suitable for modern web applications.

• Slarivo Floating Chat Widget

  Floating chat widget with AI agent selection dropdown and animations

• Slarivo Radix Dropdown Menu

  Displays a menu to the user — such as a set of actions or functions — triggered by a button.

• Slarivo Inline Dropdown

  Context menu with hold to click and text input hidden Full credits to : https://github.com/haaarshsingh https://ui.harshsingh.xyz/inline-dropdown

• Slarivo Date Picker

  This is date picker

• Slarivo Combobox

  Here is Combobox component

• Slarivo Dropdown Range Date Picker

  The DropdownRangeDatePicker is a popover-based date range selection component that combines intuitive navigation with a compact input interface. Built with shadcn/ui and react-day-picker, it features dropdown menus for selecting month and year, allowing users to jump directly to any part of the calendar without excessive navigation. The selected range is displayed within a styled input button, with long date ranges gracefully truncated to fit while still providing a clean preview of the chosen values. With built-in Clear and Apply actions, this component is ideal for booking systems, scheduling workflows, and dashboards where users need to quickly pick and confirm date ranges in a modern, space-efficient way.

• Slarivo Navbar with Animated Mega Dropdown

  A responsive React Navbar component implementing animated mega-dropdown menus for desktop interactions and a slide-in overlay menu for mobile devices. It's built using React hooks and utilizes Framer Motion for smooth animations and transitions. Styling is handled with Tailwind CSS classes. The component is structured to easily incorporate various multi-column dropdown data sets

• Slarivo Profile Dropdown

  Here is profile dropdown component

• Slarivo Statistics Card 10

  Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo dock

  Here is dock component

• Slarivo Phone Input

  An international phone input component with country selection, smart validation, country-specific placeholders, and visual feedback for global phone numbers.

• Slarivo Combobox

  Filters large lists to selectable options based on the matching query.

• Slarivo Table Edit

  This component is a highly interactive and reusable data table built entirely using Shadcn UI components. It features a fixed header and footer, allowing the middle rows to scroll independently, which is ideal for tables with large datasets. Users can select rows using checkboxes, view row-specific actions via a dropdown menu, and even edit rows inline, with inputs for text fields and a select dropdown for status. The design balances usability and simplicity, making it suitable for admin dashboards, CRM systems, or any interface that requires efficient data management, while maintaining a clean, professional look.

• Slarivo Material UI Dropdown Menu

  A highly sophisticated Material Design 3 Dropdown Menu built on top of shadcn/ui and Radix UI. Engineered with a custom Dual-Physics Ripple Engine via the Web Animations API for true geometric haptic-like feedback. Features a seamless drill-down navigation system with smooth, dynamic height adjustments using ResizeObserver. Includes SSR-compatible cinematic sweep & staggered entry animations driven by local CSS variables. Fully WCAG compliant, keyboard navigable, and perfectly bundled as a zero-dependency, single-file portable component.

• Slarivo Statistics Card 2

  Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Navigation Menu

  A navigation menu component with keyboard navigation and accessibility features.

• Slarivo Breadcrumb

  Displays the path to the current resource using a hierarchy of links.

• Slarivo DateTimePicker

  This TreeView component is an interactive file and folder explorer designed with React, Framer Motion, and shadcn/ui. It allows users to easily navigate hierarchical data by expanding or collapsing folders with a simple click on the icon or name. Each file and folder includes a tooltip on hover, ensuring clarity even for long names. The component emphasizes a clean and modern UI, leveraging shadcn’s design system for consistent styling and Framer Motion for smooth animations.

• Slarivo Omni Command Palette

  a fast, accessible, mobile-friendly command/search palette with async multi-sources, fuzzy highlighting, recents, presets, pinned actions, and keyboard shortcuts.

• Slarivo Selector Chips

  Selector Chips are used to display a list of items that can be selected.

• Slarivo Root Toggle

  A select component for switching between major sections of your application, with support for descriptions and icons. Features - Smooth animations - Support for icons and descriptions - Keyboard navigation - Custom trigger styles - Active state tracking - Glass morphism effect - Responsive design

• Slarivo ComboBox

  A reusable component for combo-box dropdown

• Slarivo Shifting Dropdown

  An animated navigation menu with shifting content. Hovering or clicking on a dropdown smoothly reveals its content with motion transitions.

• Slarivo Dropdown

  Here is Dropdown component

• Slarivo Split Button

  A button that offers a primary interaction coupled with a dropdown menu offering additional actions.

• Slarivo Animated Shifting Tab Component

  This code implements a reusable React component that creates an animated tabbed interface with a shifting content overlay. It addresses the need for a visually engaging and interactive way to present different sections of content, such as product details, pricing plans, or blog posts. The component uses several libraries to achieve this: React for the core UI, Framer Motion for animations, and React Icons for providing visual elements. Here's a step-by-step breakdown: 1. **`ShiftingDropDown` Component:** This is the main container, holding the `Tabs` component. 2. **`Tabs` Component:** This manages the selected tab state using `useState` hooks for `selected` (the currently selected tab index) and `dir` (direction of animation, 'l' or 'r'). The `handleSetSelected` function updates these states based on mouse events, determining the animation direction. 3. **`Tab` Component:** Each tab is rendered as a button. The styling changes based on whether it's selected, using CSS classes and the `selected` prop. The `FiChevronDown` icon animates on selection. 4. **`Content` Component:** This displays the content for the selected tab. `AnimatePresence` ensures smooth entrance and exit animations for the content using Framer Motion's `initial`, `animate`, and `exit` properties. The `motion.div` smoothly animates the content's position based on the `dir` prop (left or right). 5. **`Bridge` Component:** A simple visual element that creates a bridge connecting the tab to the content. 6. **`Nub` Component:** This dynamically positioned element visually points to the selected tab. `useEffect` and `getBoundingClientRect` are used to calculate its position relative to the selected tab. 7. **Content Components (`Products`, `Pricing`, `Blog`):** These components render the actual content for each tab, using basic HTML elements and styling. 8. **`TABS` Array:** This array defines the data for each tab, mapping titles to their corresponding content components. Example Scenarios: - Displaying product features, pricing tiers, or blog posts. - Creating an interactive FAQ section. - Presenting different views or options within a dashboard. - Implementing a step-by-step guide or tutorial. The component leverages the power of React's state management and Framer Motion's animation capabilities to create a polished and user-friendly experience. The use of CSS classes and inline styles allows for easy customization and theming.

• Slarivo Voice Picker

  Here is Voice Picker component

• Slarivo Monthly Heatmap Calendar

  This Monthly Heatmap Calendar component is a fully interactive scheduling tool built entirely with shadcn/ui. It allows users to navigate across different months and years using clean dropdown selectors while still displaying a structured grid view of the month. Each day cell supports adding events through a popover form, where users can enter a title and select a specific time. Scheduled events are visually marked with a badge indicator, and event details can be viewed, edited, or deleted directly within the popover. The calendar layout is spaced for clarity, making it easy to scan through days while still keeping event management compact and intuitive. This component is particularly useful for task planning, booking systems, or productivity dashboards, offering a more feature-rich and customizable experience compared to traditional date pickers.

• Slarivo Team Invite

  A modern team invitation and member management component with permission controls

• Slarivo Vercel Footer

  Vercel Footer with dropdown menu

• Slarivo Combobox

  An input combined with a list of predefined items to select.

• Slarivo Help Button

  Here is help button component

• Slarivo Dropdown Multi Calendar

  The DropdownMultiCalendar is a powerful and user-friendly date selection component that enhances the traditional multi-date calendar with intuitive navigation controls. Built entirely with shadcn/ui, it features dropdown menus for quickly selecting a specific year and month, allowing users to jump instantly to any point in time without scrolling through the calendar. Once dates are chosen, they are displayed as interactive badges that can be individually removed for fine-grained control. The structured card layout, combined with a confirmation action, makes it ideal for applications like booking systems, event planners, and scheduling dashboards where efficient navigation and multi-date management are essential.

• Slarivo Combobox

  Here is Combobox component

• Slarivo Select

  Select dropdown built on Radix UI with support for groups, labels, and separators.

• Slarivo Select

  Here is Select component

• Slarivo Smooth Dropdown

  A dropdown menu with smooth spring animations.

• Slarivo Table Dialog

  This component is a feature-rich, interactive data table built entirely with Shadcn UI components. It includes a fixed header and footer, allowing the table body to scroll independently, which ensures that column labels and summary information remain visible at all times. Each row includes a checkbox for selection, with the ability to select multiple rows at once. Actions for each row are accessible through a dropdown menu, offering options like “Edit” and “Delete.” The Edit action opens a dialog where all fields of the selected row can be modified using input fields and select menus, keeping the table layout intact and avoiding inline edits that can disrupt the table’s appearance. This design makes the table both highly reusable and user-friendly, suitable for applications that require structured data management, quick updates, and a clean, consistent interface.

• Slarivo Select

  Here is Select component

• Slarivo Select

  Here is Select component

• Slarivo Account Menu

  The AccountMenu component is a modern, user-friendly dropdown menu designed for managing user account actions and preferences in a web application. It provides a clean interface with icons and labels, allowing users to easily navigate to their dashboard, profile settings, team spaces, and notifications. The menu supports nested submenus, radio groups, and checkbox items, enabling users to select themes, notification preferences, and other personalized settings. With proper alignment of icons and text, and checkmarks positioned on the right, the AccountMenu ensures a visually appealing, intuitive, and responsive experience, making it ideal for dashboards and account management panels.

• Slarivo Assignee User

  Here is user assignation component by indev ui

• Slarivo Select

  Display a dropdown list of items. A recreation of Vercel's Geist design system.

• Slarivo Dropdown Menu

  A versatile dropdown menu component with animations, multiple variants, and full accessibility support.

• Slarivo Combobox

  Here is Combobox component

• Slarivo Manage Access Component

  Manage Access Component This component provides a complete UI for managing user access to a resource. It's built to be highly reusable, controlled by props for users, access levels, and callback functions.

• Slarivo Animated Select

  Animated select component made using framer-motion

• Slarivo Vertical accordion

  here is interactive vertical accordion

• Slarivo MultiSelect

  Use the MultiSelect component to fulfill your requirement.

• Slarivo Autocomplete

  An autocomplete input component with filtering, grouping, trigger/clear buttons, and keyboard navigation. Built on Base UI Autocomplete primitives.

• Slarivo Multi Selector

  Here is advanced multi selector component

• Slarivo Calendar

  A date picker component with range and multi-select support.

• Slarivo Dropdown Menu

  A dropdown menu of actions triggered by a button, built on Base UI primitives.

• Slarivo Extended Select

  A dropdown select component built on top of Radix UI Select primitive. Supports multiple variants, icons, and custom styling. Features - Multiple variants (default, filled, flushed, dashed) - Custom trigger icons - Error state handling - Helper text support - Scrollable content - Custom item indicators - Keyboard navigation - Accessible by default - Customizable animations - Dark mode compatible

• Slarivo Time Picker

  This is a sleek, minimal black-and-white time picker with a floating label and clock icon. It features separate dropdowns for hours and minutes with step-5 intervals, providing fast and user-friendly selection in both light and dark themes.

• Slarivo Nested Dashboard Menu

  This component is a nested menubar designed for complex dashboards, where each top-level menu (like Dashboard, Projects, Team, Tasks, Reports, Settings) can have submenus for additional options. It allows users to quickly access detailed sections without leaving the main navigation, keeping the interface organized, compact, and user-friendly. By using submenus, it supports multi-level navigation in a clean and intuitive way, making it ideal for admin panels or productivity apps.

• Slarivo Notifications

  The Notifications component is a reusable, interactive UI element built using ShadCN UI, TypeScript, and Tailwind CSS, designed to display real-time notifications in a web application. It features a bell icon trigger with an optional unread badge, and a dropdown menu that appears centered below the icon, ensuring a consistent and visually appealing alignment.

• Slarivo ColorEmotionSelect

  The Color-Emotion Semantic Select is a reusable UI component built with shadcn UI’s Select primitives that lets you visually map options to meaningful colors and emotions. Instead of showing plain text choices, each option carries a color indicator—such as red for “High Priority,” yellow for “Warning,” or blue for “Calm”—and can also include an emoji or icon to express mood or intensity. This makes the dropdown more intuitive, accessible, and quick to scan, especially in dashboards, analytics tools, or design systems where colors already communicate status or priority.

• Slarivo Menu

  This is Basic menu

• Slarivo Menu

  A dropdown menu component with support for icons, keyboard shortcuts, checkboxes, switches, radio groups, links, group labels, nested submenus, and dialog triggers. Also exported as DropdownMenu for compatibility.

• Slarivo Menu

  A dropdown menu component with support for icons, keyboard shortcuts, checkboxes, switches, radio groups, links, group labels, nested submenus, and dialog triggers. Also exported as DropdownMenu for compatibility.

• Slarivo Menu

  A dropdown menu component with support for icons, keyboard shortcuts, checkboxes, switches, radio groups, links, group labels, nested submenus, and dialog triggers. Also exported as DropdownMenu for compatibility.

• Slarivo Form

  Here is advanced form layout

• Slarivo Select

  A fluid select dropdown with proximity hover, animated checkmark, grouped options, and spring transitions. Built with Framer Motion and portal rendering.

• Slarivo Header 03

  header with navigation ment and toggle

• Slarivo Select

  A fluid select dropdown with proximity hover, animated checkmark, grouped options, and spring transitions. Built with Framer Motion and portal rendering.

• Slarivo Select

  A select menu for choosing a single option from a list, built on Base UI.

• Slarivo Smart Assist Input

  The SmartAssistInput is a next-generation, reusable input field designed to go far beyond a plain text box. It not only lets users type, but also actively assists them by remembering their previous inputs (via local history), offering quick re-selection with a dropdown, and providing built-in actions like copy and clear.

• Slarivo Model Selector

  Here is Model Selector Component

• Slarivo Search With Category

  This component is a search bar with a category filter, built entirely using shadcn/ui components. It combines a dropdown select for choosing a category (like Products, Blogs, Users, or Docs), a text input for entering search queries, and a button with a search icon to submit. The design keeps all three elements aligned with equal height, giving it a clean and consistent look. It’s a common UI pattern for dashboards, e-commerce, or content platforms where users need to refine searches by category.

• Slarivo CommandPalette

  A modern, keyboard-first navigation UI that allows users to search and execute various commands through a floating interface. Supports keyboard shortcuts, search functionality, and customizable command groups.

• Slarivo Context Menu

  Here is Context Menu component

• Slarivo Minimisable Table

  This component is a Minimisable Table with Column Controls built using Shadcn UI and Lucide icons, designed for clean and configurable data presentation. Unlike traditional tables, it allows users to shrink specific columns into compact icon-only views, reducing clutter while keeping essential information accessible. A dropdown menu provides control over which columns are minimized, with a checkmark indicator to clearly show active selections. This makes the table both highly interactive and customizable, enabling quick adjustments for different use cases like dashboards, reports, or comparison views. The plain styling ensures it adapts seamlessly to both light and dark themes, maintaining clarity without unnecessary visual noise. This balance of simplicity, usability, and configurability makes it a reusable solution for modern applications.

• Slarivo Behavioral History Select

  The Behavioral History Select is a smart, user-adaptive dropdown component built with shadcn UI that enhances the standard select experience by remembering user behavior. It dynamically tracks recently and frequently selected items, displaying them at the top of the list with visual indicators like badges or counts, allowing users to quickly access their most used choices. The component persists selection history via localStorage, making it adaptive across sessions, and its configurable fixed width ensures a stable, professional layout. With distinct sections for recent selections and other options, optional frequency markers, and a clean, modern interface, it’s highly reusable in forms, dashboards, multi-step workflows, and design systems—turning a simple dropdown into an intelligent, interactive, and visually informative selection tool.

• Slarivo Country Accordion

  A collapsible international money transfer UI that groups countries by region. Each row expands to reveal additional destinations with a fluid height animation powered by Framer Motion

• Slarivo 8-bit Select

  Pixel-art select dropdown from 8bitcn — retro pixel border on the trigger and the floating panel, with Press Start 2P typography. Wraps Radix Select for full keyboard and accessibility support.

• Slarivo Calendar With Month and Year Dropdown

  Here is shadcn calendar with month and year

• Slarivo Menubar

  A horizontal menu bar component for navigation and actions.

• Slarivo Table Controls

  Table Controls Demo (Simulated Selection)

• Slarivo Flexnative Select

  A Select dropdown from the Flexnative UI registry with 10 variants: basic, grouped options, disabled, leading icons, object values, description items, disabled items, avatar user-picker, labelled field, and an icon-in-trigger. Built on Radix Select.

• Slarivo ComboBox

  A filterable select field that lets people search, choose, and enter values from a popover list.

• Slarivo Menu

  Here is Menu component

• Slarivo Dropdown Menu

  Displays a menu to the user — such as a set of actions or functions — triggered by a button.

• Slarivo Dropdown Menu Sides & Alignment

  A dropdown menu that demonstrates aligning the popup to the start or end of its trigger and opening it to the side.

• Slarivo Icon Button Actions

  Ghost ellipsis icon button that opens a compact dropdown menu of row actions like rename, duplicate, favorite, and a destructive delete.

• Slarivo Theme Switcher Dropdown

  A dropdown menu that toggles between light, dark, and system color themes using a radio group.

• Slarivo Calendar

  Displays a calendar from which users can select a date or range of dates.

• Slarivo Workspaces

  a flexible, context-based solution to manage and display multiple workspaces in your app. It uses Radix Popover, supports avatars, search, and customizable rendering—perfect for SaaS dashboards with multi-tenant support.

• Slarivo Combobox

  Here is Combobox component

• Slarivo Combobox

  Here is Combobox component

• Slarivo Combobox

  Filters large lists to selectable options based on the matching query.

• Slarivo Combobox

  Filters large lists to selectable options based on the matching query.

• Slarivo Item

  A Item component for revealing contextual actions, options, and navigation, featuring dropdown, menu item, menu-item, avatar.

• Slarivo Base Menu

  A list of actions in a dropdown, enhanced with keyboard navigation. Built on top of Base UI Menu component with shadcn styling.

• Slarivo Multiple Selector

  A Multiple Selector component for choosing one or more values from a structured option set, featuring multi select, multi-select, multiselect, combobox.

• Slarivo Combobox

  An input combined with a list of predefined items to select.

• Slarivo Floating Panel

  A Floating Panel component for arranging mixed content in responsive modular layouts, featuring panel, floating, settings, toggle.

• Slarivo Reshaped Autocomplete

  Renders a TextField and a list of suggested values using Autocomplete.Item compound components. The list is shown when the user focuses the field and hidden once they select a value. Supports filtering, custom item composition with slots, multiline start…

• Slarivo Reshaped Autocomplete

  Renders a TextField and a list of suggested values using Autocomplete.Item compound components. The list is shown when the user focuses the field and hidden once they select a value. Supports filtering, custom item composition with slots, multiline start…

• Slarivo Reshaped Autocomplete

  Renders a TextField and a list of suggested values using Autocomplete.Item compound components. The list is shown when the user focuses the field and hidden once they select a value. Supports filtering, custom item composition with slots, multiline start…

• Slarivo Material UI Autocomplete / Combobox / Multi-select

  A high-fidelity Material Design 3 Autocomplete and Multi-select Combobox built for shadcn/ui. Features a custom physics-based ripple engine, cinematic staggered entrance animations, and a luxurious floating scroll area with smooth fade masks. Built-in…

• Slarivo One Clipboard

  A One Clipboard component for revealing contextual actions, options, and navigation, featuring dropdown, button group, button-group, save.

• Slarivo Combobox

  A Combobox component for choosing one or more values from a structured option set, featuring combobox, multi select, multi-select, multiselect.

• Slarivo The Item one

  A The Item one component for revealing contextual actions, options, and navigation, featuring dropdown, account, user profile, user-profile.

• Slarivo Combobox

  A Combobox component for choosing one or more values from a structured option set, featuring combobox, multi select, multi-select, multiselect.

• Slarivo Labeled Grouped Dropdown Menu

  A dropdown menu with labeled groups of actions and a destructive delete item, triggered by an outline button.

• Slarivo Add Block Dropdown Menu

  A dropdown menu that lets users add a content block, listing options like text, quote, divider and headings each with an icon and description.

• Slarivo Help Dropdown Menu

  An icon-triggered dropdown menu with a labeled help section linking to documentation, support, and contact options.

• Slarivo Select (Radix UI)

  An animated compound select dropdown built on Radix UI primitives with trigger press feedback, chevron rotation, grouped rows, labels, scroll buttons, and smooth panel motion.

• Slarivo Menu

  Dropdown menu that displays a list of actions a user can trigger from a button, built on Base UI with a neobrutalist retro style.

• Slarivo Priority Select with Badge Display

  A controlled select for choosing a priority level that shows the current selection as a colored badge next to the dropdown.

• Slarivo Select With Inline Label

  A select dropdown showing a muted prefix label inside the trigger, left of the selected value.

• Slarivo Select with TanStack Form

  A department select field wired to TanStack Form with Zod validation that surfaces an inline error message when submitted empty.

• Slarivo React Hook Form Select

  A select dropdown bound to React Hook Form with a Zod resolver that validates on submit and shows an inline field error until a department is chosen.

• Slarivo Date of Birth Calendar

  A date-of-birth picker calendar with month and year dropdowns that shows the selected date and the calculated age.

• Slarivo Select in Form Field

  A select dropdown composed with a form field label and description for choosing an option within a form.

• Slarivo Notification Frequency Select

  A labeled select dropdown with helper text and a save button for choosing a notification frequency inside a settings form.

• Slarivo Select with Label

  A select dropdown paired with an accessible field label linked to the trigger for form fields.

• Slarivo Currency Select

  A currency picker select dropdown that lists currencies with their symbol, name, and ISO code, built on Base UI.

• Slarivo Select with Avatar

  A select dropdown user picker that shows each person's avatar, name, and email in both the trigger and the options.

• Slarivo Select with Disabled Items

  A select dropdown where individual options can be marked as disabled so users cannot choose them.

• Slarivo Calendar with Custom Select Dropdown

  A date picker calendar with month and year dropdown navigation powered by a custom select component, letting users jump quickly across a wide range of years.

• Slarivo Select With Description Items

  A select dropdown whose options each show a bold label with a muted description sub-line, while the trigger displays only the chosen label.

• Slarivo Select With Object

  A select dropdown whose options each show a bold label with a muted description sub-line, and whose trigger displays the full two-line item when selected.

• Slarivo Select

  A styled select dropdown for choosing a single option from a list, with a trigger, searchable popup, scroll arrows, grouping, and keyboard navigation.

• Slarivo Calendar with Dropdown Navigation

  A date-picker calendar with dropdown menus to quickly navigate between months and years across a wide date range.

• Slarivo Disabled Select

  A select dropdown rendered in a non-interactive disabled state, useful for showing a locked or read-only status field in a form.

• Slarivo Basic Select

  A minimal single-value select dropdown with a placeholder and a flat list of options.

• Slarivo Dropdown Field (TanStack Form)

  A single-choice form field that opens a dropdown menu radio group, wired to TanStack Form with Zod validation and error display.

• Slarivo Select Field (TanStack Form)

  A grouped select field with labelled option groups, wired to TanStack Form with Zod validation and submit feedback.

• Slarivo React Hook Form Dropdown Field

  A single-choice form field that uses a dropdown menu radio group bound to React Hook Form via Controller, with Zod validation and inline error messages.

• Slarivo Field with Select Dropdown

  A labeled form field pairing a select dropdown with a helper description, shown here as a country picker.

• Slarivo TanStack Form Dropdown

  A visibility dropdown-menu radio group wired to TanStack Form with Zod validation, showing inline field errors on submit and a success toast.

• Slarivo Collaborative Requests Dropdown

  An animated dropdown for reviewing collaboration requests with an avatar group trigger, per-user approve/reject actions, bulk approve/reject, and an all-caught-up empty state.

• Slarivo Drill-down Submenu Dropdown

  An animated dropdown menu with drill-down nested submenus, search filtering, and directional slide transitions between panels.

• Slarivo User Profile Dropdown Menu

  A user profile dropdown menu with avatar, online status indicator, and grouped links for profile, subscription, settings, and sign out.

• Slarivo Dropdown (Radix UI)

  A compound dropdown menu with select and action variants, animated row highlight, checkbox and radio items, submenus, and a scrollable panel built on Radix primitives.

• Slarivo Combobox

  A searchable dropdown select that lets users filter and pick one option from a list, built on a popover and command palette.

• Slarivo Notification Panel

  Opens from the bell, closes on Escape, grouped by day and filtered by kind — and it draws the difference between what you have seen and what you have actually dealt with, which most notification UIs collapse and cannot uncollapse. More at layro.vercel.app.

• Slarivo Multi Select

  A searchable multi-select dropdown with removable animated chips for choosing several options from a list.

• Slarivo Select with Disabled Options

  A select dropdown that groups active options and shows disabled, non-selectable items marked as coming soon, separated by a divider.

• Slarivo Country Combobox

  A searchable country combobox with an outline trigger button, popup search input with icon, empty state, and scrollable list.

• Slarivo Basic Select

  A dropdown select built on Base UI, shown in small, default, and large trigger sizes for choosing a plan.

• Slarivo Combobox

  A Combobox component for choosing one or more values from a structured option set, featuring combobox, multiselect, dropdown, select.

• Slarivo Combobox

  A Combobox component for choosing one or more values from a structured option set, featuring combobox, select, search, user avatar.