SLARIVO / SELECTS
Selects Components
Browse 358 exact locally owned demos. Filter the collection, inspect a focused preview, and unlock its implementation prompt.
- Slarivo Select
Select
- Slarivo Select
Enhanced shadcn/ui select
- Slarivo Select
Here is Select component
- Slarivo Select (Native)
Native select in shadcn/ui style
- Slarivo Select
Here is Select component
- 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 Select
A select menu for choosing a single option from a list, built on Base UI.
- Slarivo Select
Select dropdown built on Radix UI with support for groups, labels, and separators.
- Slarivo Select
Displays a list of options for the user to pick from—triggered by a button.
- Slarivo Select
Enhanced shadcn/ui select
- Slarivo Select
Enhanced shadcn/ui select
- Slarivo Select
Enhanced shadcn/ui select
- Slarivo Select
Enhanced shadcn/ui select
- Slarivo Select
Enhanced shadcn/ui select
- Slarivo Select
Enhanced shadcn/ui select
- Slarivo Select
Enhanced shadcn/ui select
- Slarivo Select
Enhanced shadcn/ui select
- Slarivo Select
Enhanced shadcn/ui select
- Slarivo Select
Enhanced shadcn/ui select
- Slarivo Select
Enhanced shadcn/ui select
- Slarivo Select
Enhanced shadcn/ui select
- Slarivo Select
Enhanced shadcn/ui select
- Slarivo Select
Enhanced shadcn/ui select
- Slarivo Select
Enhanced shadcn/ui select
- Slarivo Select
Enhanced shadcn/ui select
- Slarivo Select
Enhanced shadcn/ui select
- Slarivo Select
Enhanced shadcn/ui select
- Slarivo Select
Enhanced shadcn/ui select
- Slarivo Select
Enhanced shadcn/ui select
- Slarivo Team Access Card
The TeamAccessCard component is a sleek, interactive, and fully customizable team management interface built using Shadcn UI and Framer Motion. It allows users to view, invite, edit, and manage team members within a project or workspace. Each member is displayed with an avatar, name, email, and role selector (Admin, Editor, or Viewer), enhanced with smooth entry animations for a polished user experience. The component also features an Invite Member drawer, enabling quick onboarding of new collaborators by entering their email and selecting a role. Additionally, a delete option allows seamless member removal, making this card ideal for use in admin dashboards, SaaS platforms, or collaborative tools. Designed with accessibility, clean design, and reusability in mind, the TeamAccessCard provides a modern and intuitive way to manage team permissions and access levels.
- Slarivo Select
Here is Select component
- Slarivo Model Selector
Here is Model Selector Component
- Slarivo Calendar With Month and Year Dropdown
Here is shadcn calendar with month and year
- 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 Stacked Bar Calendar
The Stacked Bar Calendar is a visually intuitive calendar component built entirely with Shadcn UI components. Each day is represented as a vertical stack of colored bars, where each bar corresponds to an event, and its height and color indicate the event’s category or importance (low, medium, high). Users can filter events by category using a sleek Shadcn Select component, allowing them to focus on specific event types. Clicking a date opens a detailed view of all events scheduled for that day, with options to remove events via a Trash icon. New events can be added dynamically for any selected date with a title and category. The component leverages Shadcn’s Calendar, Card, Popover, Input, Button, and Select components to provide a fully interactive, responsive, and aesthetically consistent interface for managing and visualizing events.
- Slarivo Digest Frequency
A notification settings card that lets users choose an email digest frequency per category using dropdown selects.
- Slarivo Dropdown Menu
Here is Dropdown Menu component
- Slarivo Wheel Of Time Calendar
The Wheel of Time Calendar is an interactive, visually engaging calendar component built with React and Shadcn UI. It represents the days of a selected month as segments on a circular wheel, allowing users to rotate the wheel for easy navigation and explore events in a unique, non-linear format. Each day segment displays the date number and highlights days with scheduled events, which can be viewed and removed via popovers. Users can seamlessly switch between months and years using intuitive dropdowns powered by Shadcn UI’s Select component, and the wheel dynamically adjusts to the correct number of days for each month. This component combines aesthetic appeal with practical functionality, offering a modern and interactive approach to visualizing calendar events.
- Slarivo Live Preview Style Select
The Live-Preview Style Select is a highly interactive and design-focused dropdown component built with shadcn UI that allows users to see changes in real time as they select options. Unlike traditional selects, choosing a style—such as a gradient, theme, or font—instantly updates a preview pane, providing immediate visual feedback. The component is fully configurable, allowing developers to set custom preview heights, fixed select widths, show optional descriptions, and control spacing for a clean, professional look. By combining a stable, fixed-width select trigger with vertical stacking of labels and descriptions, it ensures a consistent, user-friendly interface where content never shifts or wraps unexpectedly. This makes it ideal for dashboard theming, design systems, style pickers, or any app where instant feedback enhances user decisions.
- Slarivo Dropdown
An accessible listbox dropdown with a highlight that travels between options, full keyboard navigation, and typeahead search.
- Slarivo Combobox
This is combobox component
- Slarivo HeroUI Autocomplete
HeroUI v3 Autocomplete is a searchable select that filters a ListBox of options as you type, supporting single and multiple selection with removable tags, grouped sections, disabled options, descriptions, form validation, controlled state, custom trigger values with avatars, and full-width layouts inside a Surface. Built on the real @heroui/react package with @heroui/styles, it composes with SearchField, ListBox, TagGroup, Label, Description, FieldError and useFilter. A thin re-export of the upstream component so consumers install and render the genuine HeroUI primitive.
- Slarivo Great UI Animated Select
A premium interactive dropdown component with dynamic spring-based menu expanding animations and sequenced staggering list items.
- Slarivo Card
Displays a card with header, content, and footer.
- Slarivo Select
Displays a list of options for the user to pick from—triggered by a button.
- Slarivo Select
Enhanced shadcn/ui select
- Slarivo Select
Enhanced shadcn/ui select
- Slarivo Select
Enhanced shadcn/ui select
- Slarivo Select
Enhanced shadcn/ui select
- Slarivo Select
Enhanced shadcn/ui select
- Slarivo Multiselect
multiselect
- Slarivo Multiselect
multiselect
- Slarivo Interactive Selector
A visually striking, interactive React component showcasing premium camping options with smooth animations, responsive layout
- Slarivo Async Select
Async Select component built with React & shadcn/ui
- 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 Tags Selector
The Tags Selector component is a reusable UI element for selecting and managing tags from a predefined list.
- Slarivo Select
A comprehensive select component with support for single selection, icons, and animations.
- 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 Select (Native)
Native select in shadcn/ui style
- Slarivo Select (Native)
Native select in shadcn/ui style
- Slarivo Select (Native)
Native select in shadcn/ui style
- Slarivo Select (Native)
Native select in shadcn/ui style
- Slarivo Select (Native)
Native select in shadcn/ui style
- Slarivo Select (Native)
Native select in shadcn/ui style
- Slarivo Select (Native)
Native select in shadcn/ui style
- Slarivo Select (Native)
Native select in shadcn/ui style
- Slarivo Select (Native)
Native select in shadcn/ui style
- Slarivo Select (Native)
Native select in shadcn/ui style
- Slarivo Select (Native)
Native select in shadcn/ui style
- Slarivo Select (Native)
Native select in shadcn/ui style
- Slarivo Select (Native)
Native select in shadcn/ui style
- Slarivo Language Selector Dropdown
A polished language switcher dropdown with flags and labels, supporting multiple languages
- Slarivo Form Layout
Here is Form Layout component
- Slarivo AI Input
AI Chats component from the 21st.dev community.
- Slarivo Select
Display a dropdown list of items.
- 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 Select
Displays a list of options for the user to pick from—triggered by a button.
- Slarivo Select
Displays a list of options for the user to pick from—triggered by a button.
- Slarivo Select
Displays a list of options for the user to pick from—triggered by a button.
- Slarivo Select
Displays a list of options for the user to pick from—triggered by a button.
- Slarivo Registration
here is minimalistic registration page
- Slarivo Image Cropper
This Image Cropper component is a highly interactive and user-friendly tool built entirely with shadcn UI and React. It allows users to upload any image and crop it with precision using adjustable zoom and customizable aspect ratios, including square, 4:3, 16:9, or freeform cropping. The component provides a real-time preview of the cropped area and allows users to download the resulting image directly. Its interface leverages shadcn UI elements such as Card, Button, Select, and Slider, ensuring a clean, modern, and responsive design. This makes it ideal for applications requiring image editing features, such as profile picture selection, social media content creation, or visual content management, providing a seamless and professional user experience.
- Slarivo Combobox
Here is Combobox 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 Member Selector
Team Sections component from the 21st.dev community.
- Slarivo dropdown 01
A reusable component for dropdown
- Slarivo Input Modal
Here is Input Modal component
- Slarivo Time picker
A flexible time picker component with 12-hour format, AM/PM selection, and optional current time button, designed for easy time selection in forms and applications.
- 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 Contact Form
Here is Contact Form component
- Slarivo Multiple Selector
Here is Multiple Selector component
- Slarivo Voice Picker
Here is Voice Picker component
- Slarivo Animated Dropdown
A dropdown menu with smooth expand/collapse animations and click-outside handling.
- Slarivo Calendar with localisation
here is calendar component by Shadcn with language changing functionality
- Slarivo spotlight-table
Search Bars component from the 21st.dev community.
- Slarivo Combobox
An input combined with a list of predefined items to select.
- 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 Select
Here is Select component
- Slarivo Select
Here is Select component
- Slarivo Scheduler
This Scheduler component is a modern and interactive date and time picker built entirely with shadcn/ui. It provides a clean interface where users can schedule events by selecting a date from the calendar and choosing a time using dropdowns for hours and minutes. The scheduling interface is neatly wrapped inside a popover, making the component compact and easy to use without cluttering the page. Events are displayed in a structured card layout with options to edit or delete, ensuring flexibility and control over the schedule. By combining the Calendar, Select, Popover, and Card components from shadcn, this scheduler delivers a unique and user-friendly experience that goes beyond the typical date picker — making it well-suited for dashboards, task managers, booking systems, or productivity tools.
- Slarivo Select
Here is Select component
- Slarivo Select
Here is Select component
- Slarivo Select
Here is Select component
- Slarivo Select
Here is Select component
- Slarivo Select
Here is Select component
- Slarivo Select
Here is Select component
- Slarivo Select
Display a dropdown list of items. A recreation of Vercel's Geist design system.
- Slarivo Combobox
Here is Combobox component
- Slarivo Animated Select
Animated select component made using framer-motion
- Slarivo MultiSelect
Use the MultiSelect component to fulfill your requirement.
- Slarivo Multi Selector
Here is advanced multi selector component
- Slarivo Tag Cloud Select
The Searchable Tag Cloud Select is a modern, interactive component designed for apps that need both data-rich visualization and intuitive multi-select functionality. Built entirely with shadcn UI, it displays options as a tag cloud, where each tag’s size reflects its popularity or frequency and its color highlights its category or importance. Users can search through tags quickly and select multiple options, which appear as removable chips for clarity and control. This component is perfect for use cases like filtering blog posts by popular tags, selecting skills on onboarding forms, choosing analytics categories, or browsing keyword trends in dashboards.
- 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 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 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 Input With Select
ChatGPT said: This InputWithSelect component is a reusable form element built with shadcn/ui that combines a numeric/text input and a dropdown select in a single, styled container. Unlike the default number input, it uses Lucide icons for increment and decrement controls, giving a modern, customizable look.
- 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 fluid select dropdown with proximity hover, animated checkmark, grouped options, and spring transitions. Built with Framer Motion and portal rendering.
- Slarivo RuixenTableBasic
This component displays a dynamic, responsive data table showcasing user information in a clean and organized format. Each row represents a distinct user profile containing key details such as name, email, location, account balance, and current status. Additionally, each record includes a set of contextual selectOptions that reflect the user's domain, tools, or preferences
- Slarivo ChronoSelect
The ChronoSelect component is a modern, shadcn-inspired date selection tool that combines accessibility, flexibility, and a clean design. Unlike traditional date pickers, ChronoSelect includes a built-in year selector alongside the calendar view, allowing users to jump across decades without tedious navigation. Its interface uses shadcn primitives like Popover, Select, and Calendar to ensure consistency across your UI, while providing customization options such as adjustable year ranges and placeholder text. With pill-shaped interactions, smooth transitions, and responsive layout, ChronoSelect feels both elegant and practical—ideal for forms, dashboards, booking systems, or any application where quick and intuitive date selection is essential.
- 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 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 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 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 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 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 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 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 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 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 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 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 Audio Show Creator
Audio Show Creator A comprehensive UI component for creating and configuring an audio show from a document. It features options for format, voice selection, engine, and quality, all wrapped in a clean, modal-like card. It uses framer-motion for a smooth entry animation.
- Slarivo Listbox
Here is Listbox component
- Slarivo Accordion
Here is Accordion component
- Slarivo Reshaped Select
Form select rendering Select.Option components over a native select element, in controlled or uncontrolled mode. Supports a start content slot, consistent field icons, four sizes aligned with Button and TextField, faded and headless variants, error and disabled states, custom value rendering and FormControl integration.
- Slarivo IndevuiSelect
Here is modern select component by indevui
- 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 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 Input
Upgaraded shadcn/ui Input
- Slarivo Input
Upgaraded shadcn/ui Input
- Slarivo Dialog
Enhanced shadcn/ui dialog
- Slarivo Dialog
Enhanced shadcn/ui dialog
- Slarivo Interactive Hover Button
A visually engaging button component that responds to hover with dynamic transitions, adapting smoothly between light and dark modes for enhanced user interactivity.
- Slarivo Filters
A Linear inspired component to add / edit filters
- Slarivo AI Input
A modern, animated textarea input component designed for AI chat interfaces. It features auto-resizing, a voice input toggle, and an animated submit button. Features: • Auto-resizing textarea • Voice input toggle • Animated submit button • Press Enter to submit (Shift+Enter for a new line) • Dark mode support • Customizable height limits • Smooth animations • Mobile responsiveness
- Slarivo Highlighter
Highlighter, Particle, CTA
- Slarivo Sidebar Component
Here is Sidebar Component
- Slarivo AI Chat Input
Animated and interactive AI chat input component.
- Slarivo Background Components
Here is Background Components component
- Slarivo Background Components
Here is Background Components component
- Slarivo Background Components
Here is Background Components component
- Slarivo Background Components
Here is Background Components component
- Slarivo Background Components
Here is Background Components component
- Slarivo Background Components
Here is Background Components component
- Slarivo Background Components
Here is Background Components component
- Slarivo Background Components
Here is Background Components component
- Slarivo Background Components
Here is Background Components component
- Slarivo Background Components
Here is Background Components component
- Slarivo Features
Here is Features Component
- Slarivo Team
Here is Team component
- Slarivo Apple Liquid glass switcher
Here is Apple Liquid glass switcher component
- Slarivo AI Input with Suggestions
A sophisticated text input component with selectable action buttons. It features an auto-resizing textarea, customizable actions, and visual feedback. Features: • Customizable action buttons • Auto-resizing textarea • Visual feedback for selected actions • Dark mode support • Keyboard shortcuts • Animated transitions • Mobile responsiveness
- Slarivo Feature Sections
Here is Feature Sections component
- Slarivo Feature Sections
Here is Feature Sections component
- Slarivo Feature Sections
Here is Feature Sections component
- Slarivo Multimodal AI Chat Input
A versatile React component for creating AI chat interfaces. Supports text input and file attachments (images, videos, audio, PDF, etc.) with interactive previews. Includes integrated send and stop buttons, automatic textarea resizing, and optional suggested actions for new conversations. Built using modern hooks and Tailwind CSS for easy styling
- Slarivo Prompt Input dynamic grow
A prompt input that grow on click, with subtle glow, and a onFocus on click ripple effect. shrink when not anymore inFocus
- Slarivo Tree
Here is Tree component
- Slarivo Call to Action
Here is Call to Action components
- Slarivo Choicebox
A larger form of Radio or Checkbox, where the user has a larger tap target and more details.
- Slarivo Choicebox
A larger form of Radio or Checkbox, where the user has a larger tap target and more details.
- Slarivo Tag Selector
A versatile component for selecting and creating multiple tags with search functionality and keyboard navigation support.
- Slarivo Form Layout
Here is Form Layout component
- Slarivo Basic Dropdown
Here is Basic Dropdown component
- Slarivo Feature Spotlight
Feature Spotlight A responsive section component designed to highlight a key product feature. It juxtaposes a detailed text description, including a pre-header, main heading, and call-to-action, with a dynamic visual element. The component includes subtle, continuous animations on floating images to draw user attention and add a modern feel. It is fully theme-adaptive, using shadcn/ui variables for colors and styling.
- Slarivo Toast
Here is Toast component
- Slarivo Cursor Cards
Here is Cursor Cards component
- Slarivo Field
Here is Field component
- 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 Login
Here is Login component
- Slarivo Security Card
Here is Security Card component
- Slarivo Pricing Component
Pricing Component with sleek design and better handling
- Slarivo Cursor
Here is advanced cursor component
- Slarivo Spinner
Here is Spinner component
- 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 Checkbox
Here is modern minimalistic checkbox component
- Slarivo Tabs Component
Here is Tabs component
- Slarivo Profile Selector
Profile Selector Component This component, named ProfileSelector, displays a grid of user profiles for selection. It's built to be data-driven, accepting an array of profiles and handler functions via props, making it extremely reusable for any application requiring a "who's watching?" style interface.
- Slarivo Interactive Hover Button
A button with expanding dot animation, loading state with spinner, and success checkmark. Multi-state interactive component.
- Slarivo Animated Radio
An animated radio button group with a smooth sliding purple glider that moves vertically to highlight the selected option.
- Slarivo Expandable
Here is expandable component
- Slarivo Card Studio
Here is Card component
- Slarivo Tree
Here is Tree component
- Slarivo Color Selector
Interactive color picker component.
- Slarivo AI Prompt Box
An animated AI prompt input with expanding textarea, keyboard shortcuts, model selector, and file attachments.
- Slarivo Executive Impact Carousel
A performance-optimized carousel designed to showcase high-stakes technical solutions. Features a dual-state interaction model (scroll-hover) that highlights system depth and "Smart Work" logic.
- Slarivo Linear Card
Here is linear card component
- Slarivo Switch Button
Here is Switch Button component
- Slarivo Glass Radio Group
Sleek, pill-shaped option selector with frosted glass styling and a glowing highlight on the active choice. Ideal for membership tiers, pricing plans, or mode selection in premium UI designs.
- 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 Table
A simple table component for displaying tabular data.
- Slarivo Dynamic Island
Here is Dynamic Island component
- Slarivo Toast
Here is Toast component
- Slarivo Tree
Here is Tree component
- Slarivo Select
Here is Select component
- Slarivo Select
Here is Select component
- Slarivo Accordion
A fluid accordion with spring animations, collapsible sections, proximity hover effects in grouped mode, and smooth content transitions. Built on Radix UI with Framer Motion.
- Slarivo Response
Here is Response component
- Slarivo Multi Select Calendar Card
The MultiSelectCalendarCard is a modern, interactive date selection component that extends the functionality of a traditional calendar by supporting multiple date selections with an intuitive UI. Built entirely with shadcn/ui, it displays a calendar for picking dates and a dynamic list of selected dates shown as removable chips, giving users clear visibility and control over their choices. Each date can be easily removed from the list with a single click, and the built-in confirmation action ensures selections can be reviewed before submission. This makes the component ideal for use cases like booking systems, availability planners, or event scheduling where users need to select and manage multiple dates efficiently.
- Slarivo Emoji Radio Group
This Emoji Radio Group component transforms a traditional survey input into a fun and engaging experience. Instead of plain numbers or circles, each option is represented by an expressive emoji with a short label, making it instantly relatable for quick feedback collection. When a user selects an option, the card highlights with accent styling and displays a glowing green dot in the corner for clear visual confirmation. Smooth hover animations and responsive sizing add a playful, interactive feel, while Radix underpinnings ensure full accessibility with keyboard navigation and ARIA compliance. This design makes it perfect for customer satisfaction surveys, in-app feedback prompts, or any scenario where you want to capture sentiment in a more human and intuitive way.
- Slarivo Cuisine Selector Chips
This code implements an interactive cuisine selector component. It allows users to select multiple cuisines from a predefined list. The component utilizes a functional approach, leveraging React's useState hook for managing selected items. The core functionality involves toggling the selection state of each cuisine when a button is clicked. The component dynamically updates the UI to reflect the user's choices. It enhances user experience with smooth animations and visual feedback powered by Framer Motion. The visual style includes a checkmark that appears when a cuisine is selected, smoothly animating in and out. The styling uses a dark theme and is responsive. The component addresses the need for a user-friendly and visually appealing way to allow users to select multiple options from a list, particularly useful in applications like food delivery apps, recipe websites, or preference settings. The component iterates through a predefined array of cuisines, creating a button for each. Each button uses Framer Motion's animation capabilities for hover, tap, and selection state changes, providing smooth visual feedback. The selected cuisines are stored in an array managed by the useState hook. The toggleCuisine function updates this array, adding or removing cuisines based on user interaction. The Check icon from the lucide-react library is used to visually indicate selected cuisines. The component's animations are carefully configured to ensure a smooth and engaging user experience. It can be applied in various scenarios, such as filtering options, preference settings, or interactive forms where multiple selections are required. For example, a food delivery app could use this component to let users select their preferred cuisines, a recipe website might use it to filter recipes, or a survey could use it to allow multiple-choice answers.
- Slarivo Interactive Dots
Interactive Dots with props
- Slarivo Animated Card Options
An interactive animated card selector that uses Framer Motion to smoothly reveal a chosen option while fading out the others with randomized stagger effects. Perfect for onboarding flows, preference pickers, or feature selection UIs where visual engagement and clarity are key.
- Slarivo Special Card
Here is Special Card component
- Slarivo Calendar
A date picker component with range and multi-select support.
- Slarivo Hero Modern
Here is Hero Modern component
- Slarivo Rounded Box
Here is Rounded Box component
- Slarivo Inline Edit
An inline text editor with smooth transition animations.
- Slarivo Arc Browser like Color Picker
An intuitive color picker component that generates harmonious color combinations. It features a circular HSL color wheel with dynamic spread control, allowing users to select 1-3 complementary colors simultaneously. The component supports customizable size, spread factors, and luminosity ranges, making it perfect for design systems and color palette generation.
- Slarivo Card
Product Card This interactive card allows users to view product details, select variants like color and size, and add the item to their cart. It's built to be highly reusable and theme-adaptive.
- Slarivo ColorSwatchPicker
A list of color swatches that allows users to select a color from a predefined palette.
- Slarivo Liquid Reveal
LiquidReveal is a React component that animates image loading with a dynamic liquid wipe effect. It uses SVG filters to simulate fluid distortion and waviness, creating a visually engaging reveal. Ideal for portfolios, hero sections, and immersive UI transitions.
- Slarivo Label Selector
Here is Label Selector component by IndevUi
- Slarivo Status Selector
Here is modern Status Selector component
- Slarivo ReUI Filters
ReUI Filters with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Date Selector
ReUI Date Selector with the first 4 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Combobox
ReUI Combobox with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo Model Picker
A dark cockpit-style model and reasoning-effort picker with a three-model matrix, five effort levels, and an animated ULTRA lever.
- Slarivo ReUI Native Select
ReUI Native Select with the first 6 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo Animated Tags
A tag selector where tags animate with blur and spring motion as they move between an available list and a selected list.
- Slarivo AI Model Select
Cursor-style AI model picker with Effort, Context, Fast and Thinking controls plus a hover Edit flyout.
- Slarivo IMG Reveals
LiquidReveal is a React component that animates image loading with a dynamic liquid wipe effect. It uses SVG filters to simulate fluid distortion and waviness, creating a visually engaging reveal. Ideal for portfolios, hero sections, and immersive UI transitions.
- Slarivo Color Picker
A @shadcn-ui compatible color picker using @uiw/react-color
- Slarivo Data Grid Table
Here is Data Grid Table component
- Slarivo Combobox
Here is Combobox component
- Slarivo Combobox
Here is Combobox component
- Slarivo Color Picker
Here is Color Picker component
- Slarivo AI Agent Input
A chat-style AI prompt input with attachments, a model picker, slash-command skill pills, and a one-click "enhance prompt" rewrite state.
- 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 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 Segment Group
A Segment Group component for switching between related views without leaving the current context, featuring segmented control, segmented-control, tabs, filter.
- Slarivo Segment Group
A Segment Group component for choosing one or more values from a structured option set, featuring segmented control, segmented-control, toggle group, toggle-group.
- Slarivo Segment Group
A Segment Group component for choosing one or more values from a structured option set, featuring segmented control, segmented-control, filter, task.
- Slarivo HeroUI Color Picker
HeroUI v3 ColorPicker is a trigger + popover color picker that composes a swatch trigger with an interactive picker surface — color area, sliders, fields and swatch presets — for selecting a color in any format. Built on the real @heroui/react package with…
- Slarivo HeroUI Color Picker
HeroUI v3 ColorPicker is a trigger + popover color picker that composes a swatch trigger with an interactive picker surface — color area, sliders, fields and swatch presets — for selecting a color in any format. Built on the real @heroui/react package with…
- Slarivo HeroUI Color Picker
HeroUI v3 ColorPicker is a trigger + popover color picker that composes a swatch trigger with an interactive picker surface — color area, sliders, fields and swatch presets — for selecting a color in any format. Built on the real @heroui/react package with…
- Slarivo ColorSwatchPicker
A list of color swatches that allows users to select a color from a predefined palette.
- Slarivo ColorSwatchPicker
A list of color swatches that allows users to select a color from a predefined palette.
- Slarivo ColorSwatchPicker
A list of color swatches that allows users to select a color from a predefined palette.
- Slarivo ColorSwatchPicker
A list of color swatches that allows users to select a color from a predefined palette.
- Slarivo ColorSwatchPicker
A list of color swatches that allows users to select a color from a predefined palette.
- Slarivo ColorSwatchPicker
A list of color swatches that allows users to select a color from a predefined palette.
- Slarivo ColorSwatchPicker
A list of color swatches that allows users to select a color from a predefined palette.
- 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 HeroUI Calendar
HeroUI v3 Calendar — date calendar with year picker, controlled state, week/day views, min/max, unavailable dates, multiple selection, read-only, focused value, cell indicators, multiple months, booking example and custom styles.
- Slarivo HeroUI Color Area
HeroUI v3 ColorArea is a 2D color picker surface for adjusting two channels of a color at once (e.g. saturation/brightness) via a draggable thumb. Built on the real @heroui/react package with @heroui/styles, it supports controlled and uncontrolled value,…
- Slarivo HeroUI Color Area
HeroUI v3 ColorArea is a 2D color picker surface for adjusting two channels of a color at once (e.g. saturation/brightness) via a draggable thumb. Built on the real @heroui/react package with @heroui/styles, it supports controlled and uncontrolled value,…
- Slarivo HeroUI Color Area
HeroUI v3 ColorArea is a 2D color picker surface for adjusting two channels of a color at once (e.g. saturation/brightness) via a draggable thumb. Built on the real @heroui/react package with @heroui/styles, it supports controlled and uncontrolled value,…
- Slarivo HeroUI Autocomplete
HeroUI v3 Autocomplete is a searchable select that filters a ListBox of options as you type, supporting single and multiple selection with removable tags, grouped sections, disabled options, descriptions, form validation, controlled state, custom trigger…
- Slarivo HeroUI Autocomplete
HeroUI v3 Autocomplete is a searchable select that filters a ListBox of options as you type, supporting single and multiple selection with removable tags, grouped sections, disabled options, descriptions, form validation, controlled state, custom trigger…
- Slarivo ReUI Native Select
ReUI Native Select with the first 6 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Native Select
ReUI Native Select with the first 6 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Native Select
ReUI Native Select with the first 6 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Native Select
ReUI Native Select with the first 6 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Native Select
ReUI Native Select with the first 6 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Combobox
ReUI Combobox with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Combobox
ReUI Combobox with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Date Selector
ReUI Date Selector with the first 4 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo Combobox
A Combobox component for choosing one or more values from a structured option set, featuring combobox, multi select, multi-select, multiselect.
- Slarivo HeroUI Calendar
HeroUI v3 Calendar — date calendar with year picker, controlled state, week/day views, min/max, unavailable dates, multiple selection, read-only, focused value, cell indicators, multiple months, booking example and custom styles.
- Slarivo HeroUI Calendar
HeroUI v3 Calendar — date calendar with year picker, controlled state, week/day views, min/max, unavailable dates, multiple selection, read-only, focused value, cell indicators, multiple months, booking example and custom styles.
- Slarivo Combobox
A Combobox component for choosing one or more values from a structured option set, featuring combobox, multi select, multi-select, multiselect.
- Slarivo ReUI Date Selector
ReUI Date Selector with the first 4 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Combobox
ReUI Combobox with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Combobox
ReUI Combobox with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Date Selector
ReUI Date Selector with the first 4 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Combobox
ReUI Combobox with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Combobox
ReUI Combobox with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Combobox
ReUI Combobox with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Combobox
ReUI Combobox with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Combobox
ReUI Combobox with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Filters
ReUI Filters with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo Astryx Toggle Button
Astryx (Meta) ToggleButton — pressed/unpressed control with outline/solid icon swap: favorite, bookmark and notifications.
- Slarivo Cool Blob Effect
A fun blob effect in pure css. Uses keyframes and blur filters.
- Slarivo Animated Leaves
The component creates that beautiful expanding leaf animation effect with the blur filters and color mixing.
- Slarivo Inline Combobox
An inline combobox for editor suggestion menus like @mentions, slash commands, and emoji pickers, built for Plate/Slate rich-text editors.
- 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 Task Filters
Filter and search tasks by status, priority, assignees, projects, and tags with a live count of active filters and a clear-all action.
- 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 Filterable Invoices Table
Invoices data table with a client search filter, checkbox row selection, bulk actions (mark as paid, send reminder, download), payment method and due date columns, status badges, and pagination.
- 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 Select in Form Field
A select dropdown composed with a form field label and description for choosing an option within a form.
- Slarivo Pagination with Page Info and Page Size
A pagination control that shows the current page range, numbered page links with ellipsis, and a results-per-page select.
- 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 Social Selector
An animated social platform selector that toggles between X, Bluesky, and Threads with a sliding pill and blur-transitioned handle link.
- 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 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 Autocomplete Field
A form field with an autocomplete search input that filters a list of options as you type and shows an empty state when nothing matches.
- 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 Invite Team Member Form
An invite team member form with an email field, a role select, and submit/cancel actions with a loading and sent confirmation state.
- Slarivo Multi-Field Form
A complete sign-up form combining text inputs, a role select, and a newsletter checkbox with inline validation and a loading submit button.
- 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 Color picker
An example of creating a circular color picker with dots that react to cursor movement with soft springs using Motion for React.
- Slarivo Searchable FAQ
A FAQ section with a search box that filters questions as you type and an animated accordion for answers.
- 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 Searchable FAQ Accordion
A FAQ section with a live keyword search that filters an expandable accordion of questions and answers in real time.
- 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 Advanced Data Table Filter Builder
Build responsive data-table filters with AND/OR logic, multi-select values, searchable popovers, live results, and polished light/dark themes.
- Slarivo Model Picker
A Model Picker component for AI conversations, reasoning states, tool activity, and assistant workflows, featuring ai, chat, popover, select.
- Slarivo Photo Remix Grid
An interactive photo-effects mosaic that slices any image into mixed visual treatments. Shuffle the composition, paint individual tiles, add custom images, adjust grid density, and export the finished artwork.
- Slarivo Filter Token Bar
Linear-style composable filter tokens (field · operator · value) with roving-tabindex keyboard navigation, async option loading, multi/single select, hand-drawn assignee avatars, and light/dark support.
- Slarivo Search Toolbar Page Header
A list-view page header with a title, primary action button, and a toolbar of search input, status and sort filters, and a list/grid view toggle.
- Slarivo Input Form
A multi-field contact/profile form layout combining labeled text inputs, a country select, and cancel/submit actions for collecting name, email, phone, and address data.
- Slarivo Multi Select
A searchable multi-select dropdown with removable animated chips for choosing several options from a list.
- Slarivo Price Range Slider
A dual-thumb price range filter slider that previews a ghost extension when hovering outside the selected range, with animated number values and thumb scaling.
- Slarivo Multi-Select Combobox Form Field
A form field with a multi-select combobox that renders selected values as removable chips, filters options as you type, and validates on submit.
- 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 ReUI Filters
ReUI Filters with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Filters
ReUI Filters with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Filters
ReUI Filters with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Filters
ReUI Filters with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Filters
ReUI Filters with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Filters
ReUI Filters with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Filters
ReUI Filters with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.
- 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.