SLARIVO / ICONS

Icons Components

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

• Slarivo Chip

  Small informational badges for displaying labels, statuses, and categories.

• Slarivo Toggle

  A two-state button that can be toggled on or off.

• Slarivo Interactive Icon Cloud

  An interactive 3D tag cloud component

• Slarivo Badge

  A label that emphasizes an element that requires attention, or helps categorize with other similar elements.

• Slarivo Icons

  shadcn/ui icons

• Slarivo Time With Icon

  This component is a dynamic time input designed for modern, intuitive forms. It features a left-aligned icon that visually represents the time of day: a sun for daytime hours, a moon for nighttime, and a clock as a default when no time is set. The icon updates automatically as the user selects a time, providing immediate visual feedback. Built with shadcn/ui’s Input and Label, it maintains clean spacing and alignment.

• Slarivo File Attachment

  File/image chip for AI chat input. Renders file icons by extension, image thumbnails, image-only mode, and a hover-revealed remove button. Self-contained port from 21st.dev Agent Elements.

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Icon Picker

  A Component responsible for making all lucide react icons available for selection and returning the icon name.

• Slarivo Item

  Here is Item component

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Tooltip

  Enhanced shadcn/ui tooltip

• Slarivo Orbiting Circles

  A collection of circles which move in orbit along a circular path

• Slarivo Loading Spinner

  Loading Spinners I can't find the original developers. If you know them, please share their information in an issue.

• Slarivo Theme Switch

  Here is Theme Switch component

• Slarivo Feature Block Animated Card

  Feature Block Animated Card with logos

• Slarivo Portfolio Hero

  Animated Portfolio Hero Section - Bold Name with Profile Image Overlay A striking, modern portfolio hero component featuring animated blur-in text effects and a profile image overlay. Perfect for developers, designers, and creatives who want to make a bold first impression.

• Slarivo Features 2

  features section

• Slarivo How It Works

  How It Works Section Step-by-step process layout with icons and concise explanations. Guides users from query entry to store contact in a structured flow. Ideal for onboarding, tutorials, or service explanation pages.

• Slarivo Flip Card

  A Stylish and Animated Flip Card

• Slarivo Theme Switch Button

  The ⁠ThemeSwitchButton is an animated icon button designed to toggle the application’s theme between light and dark modes. When pressed, the icon smoothly transitions (e.g., sun to moon), providing visual feedback to the user. It is customisable, accessible, and ideal for prominent placement in user interfaces where theme switching is required.

• Slarivo Features 5

  features section

• Slarivo Menubar

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

• Slarivo Banner

  he Banner component is a flexible notification element for showing messages, alerts, or announcements. It supports multiple variants (success, warning, info, premium, etc.), different sizes, optional icons, action buttons, and a closable option. It also includes an autoHide feature to dismiss the banner automatically after a set time and an optional shimmer shade effect for extra visual emphasis.

• Slarivo Button witn Icon

  Here is button with icon

• Slarivo Category List

  An interactive and theme-adaptive list component used to display and navigate through different categories or features. Each item provides visual feedback on hover, revealing more details and an icon, making it ideal for guiding users through key sections of an application.

• Slarivo Button

  An enhanced button component with various animated hover effects and icon support. Features - Multiple animation variants - Icon support (left/right placement) - Gooey effect animations - Ring hover effects - Link hover animations - Expandable icon transitions - Fully customizable styles - Dark mode compatible

• Slarivo Radar Effect

  A rotating radar animation with concentric circles and floating icons. Great for tech or security themed sections.

• Slarivo Animated Card

  Animated Card

• Slarivo Star Rating

  A customizable star rating component that allows users to rate with interactive star icons.

• Slarivo Icon 3D Hover

  A 3D animated card component with a rotating cube icon and smooth text fill effect that triggers on hover.

• Slarivo Feature Modern

  Here is Feature component

• Slarivo Icons

  Extension of Shadcn icons with Prism UI logo, chevron right, book, and component icons.

• Slarivo Integration Showcase

  Integration Showcase This component displays a title, subtitle, an illustration, and a responsive grid of integrations. It's designed to be easily populated with your own data.

• Slarivo Connect With Us

  a simple gradient connect with us section for your websites, cool icons with pretty funky animations

• Slarivo Bookmark Icon Button

  A toggle-able bookmark button with animated icon and counter effects, perfect for favoriting or bookmarking content.

• Slarivo Dark Grid

  Here is Dark Grid component

• Slarivo Animated Menu

  A React component featuring an animated menu with Rive icons, inspired by @guerriero_se's UI experiment.

• Slarivo Social Media

  Interactive social media icon row with a smooth hover effect that highlights the active icon, changes its background color, and reveals a matching label below. Ideal for minimalist portfolios, landing pages, or personal websites to elegantly showcase social links.

• Slarivo System Theme Icon

  Icon for system theme

• Slarivo Feature 73

  Feature cards in grid layout with Featured card at the top.

• Slarivo Feature Card

  Feature Card

• Slarivo Light Theme Icon

  Icon for light theme

• Slarivo Dark Theme Icon

  Icon for dark theme

• Slarivo Features 3

  features section with chained cards

• Slarivo Toggle

  A two-state button that can be either on or off.

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Animated hero

  Animated hero with text and two shadcn/ui buttons

• Slarivo Bento Grid

  A skewed grid layout with Title, description and a header component

• Slarivo Display Cards

  A visually appealing stacked card layout with hover animations and grayscale effects. Features: • Stacked card layout • Hover animations • Grayscale effects • Custom icons • Responsive design • Dark mode support • Customizable styles • Accessible markup Notes: • Built with Tailwind CSS for responsive design • Uses CSS Grid for stacking cards • Implements smooth hover animations • Supports custom icons from any library • Includes grayscale hover effects • Maintains consistent spacing • Supports dark mode • TypeScript support with proper types

• Slarivo Feature Section with hover effects

  Feature Section with hover effects

• 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 AI prompt Box

  AI prompt Box, AI chat Input, AI chat box, with search, with think, with thinking, with canvas, with audio recording

• Slarivo Dock

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

• Slarivo Menu Toggle Icon

  Animated menu toggle icon morphing smoothly between hamburger and close states.

• Slarivo Feature 108

  A versatile section with 3 features inside a tabs component

• Slarivo Accordion

  Enchanced shadcn/ui accordion

• Slarivo Accordion

  Enchanced shadcn/ui accordion

• Slarivo Accordion

  Enchanced shadcn/ui accordion

• Slarivo Accordion

  Enchanced shadcn/ui accordion

• Slarivo Sidebar

  Sidebar

• Slarivo Spinner

  Spinner Loaders component from the 21st.dev community.

• Slarivo Use Mobile

  use-mobile hook

• Slarivo Animated Beam

  An animated beam of light which travels along a path. Useful for showcasing the "integration" features of a website.

• Slarivo Grid Feature Cards

  Minimal Features Section using Grid Feature Cards

• Slarivo Empty State

  Empty state card with shadcn/ui buttons. Inspired by @AndyRyanWeir

• Slarivo Modern Mobile Menu

  Mobile Menu, Mobile Nav, Mobile Navbar, Mobile navigation, Modern Mobile Menu, Mobile Dock, Dock, Bottom Nav, Navigation, Menu

• Slarivo Lucide Icon Drawer

  Icon Drawer with Lucide and Anime.js

• Slarivo Switch Button

  Here is Switch Button component

• Slarivo Hybrid Tabs

  The Icon + Label Hybrid Tabs component combines compactness with clarity by showing only icons for inactive tabs and expanding the active tab to reveal both the icon and its label. This approach saves horizontal space while still giving users descriptive context when they need it. Smooth transitions powered by Framer Motion make the tab expansion feel natural and engaging, while shadcn UI ensures a clean, accessible base structure. With its modern, space-efficient design, this component is especially useful for dashboards, mobile-friendly interfaces, or any application where both clarity and compactness matter.

• Slarivo Animated Weather Icons

  12 continuously animated weather icons — each is a living micro-scene, not a static SVG. Sun rays rotate, rain drops fall, lightning flashes randomly, snowflakes drift sideways, wind paths draw themselves, fog layers breathe, rainbow arcs pulse in sequence. All framer-motion driven, zero CSS keyframes. Import individually or use the full set.

• Slarivo Order state

  E-commerce order state

• Slarivo Toggle theme

  Here is toogle theme component.

• Slarivo Interactive Animated Arrow Icon

  Interactive Animated Arrow Icon

• Slarivo Dynamic Toolbar

  A dynamic toolbar with animated tool selection and smooth transitions.

• Slarivo Animated Logo Rolodex

  This code creates a visually appealing animated logo rolodex using React, Framer Motion, and Tailwind CSS. It showcases a rotating display of logos, each with a unique background color. The component solves the problem of dynamically displaying multiple logos in an engaging manner, ideal for showcasing brand partnerships, sponsors, or team members. Here's how it works: 1. **Logo Data:** The `DivOrigami` component passes an array of logo elements (`LogoItem` components) to the `LogoRolodex` component. 2. **Rotation Logic:** `LogoRolodex` uses `setInterval` to increment an index, cycling through the logo array. `useEffect` with a cleanup function ensures the interval is cleared when the component unmounts. 3. **Framer Motion Animation:** Two `motion.div` elements are used to create the flipping card effect. `AnimatePresence` ensures smooth transitions when the index changes. Each `motion.div` displays the current logo, with one transitioning out (`rotateX: -180deg`) while the next transitions in (`rotateX: 0deg`). The `clipPath` property creates the half-card effect, creating the illusion of a flipping card. 4. **Styling:** Tailwind CSS is used for styling, providing a clean and efficient way to manage the component's visual appearance. The `twMerge` helper function combines class names seamlessly. 5. **Logo Items:** The `LogoItem` component renders each individual logo with a styled background and icon. This component can be applied in various scenarios, including: * **Website headers:** Displaying featured partners or sponsors. * **About Us sections:** Showcasing team members or collaborators. * **App onboarding:** Presenting key features or integrations. The code leverages several key technologies: * **React:** For building the user interface. * **Framer Motion:** For creating smooth and engaging animations. * **Tailwind CSS:** For rapid and responsive styling. * **React Icons:** For providing easily integrated logo icons. * **`setInterval` and `useEffect`:** For managing the animation loop and cleanup. The animation is smooth and visually engaging, enhancing user experience by presenting information in a dynamic and memorable way.

• Slarivo Card

  Shipment Card – Real-time delivery update. Displays live order status with tracking option for better customer experience.

• Slarivo Transaction List

  Here is modern minimalistic Transaction List component

• Slarivo GSAP Draggable Rope

  An engaging interactive pendulum that swings naturally with GSAP physics, allowing users to grab and drag the hanging element to interrupt and redirect its motion. Perfect for gaming interfaces, educational physics demonstrations, or creative landing pages that want to showcase interactive storytelling. It can be customized with different icons, sizes, and physics settings to fit various design needs while maintaining smooth, responsive animations across devices.

• Slarivo Icon Bar

  Icons component from the 21st.dev community.

• Slarivo Maximize Icon

  Animated maximize (fullscreen/expand) icon that expands its four corners on hover, view, or tap.

• Slarivo Figma Icon

  A Figma brand logo rendered as an inline SVG icon component that accepts all standard SVG props.

• Slarivo Discord Icon

  A Discord logo SVG icon component that inherits the current text color for easy theming and sizing.

• Slarivo Message Circle Off Icon

  An animated message circle off icon that shakes and draws its slash on hover, for muted or disabled chat states.

• Slarivo Astryx Toggle Button

  Astryx (Meta) ToggleButton — pressed/unpressed control with outline/solid icon swap: favorite, bookmark and notifications.

• Slarivo Facebook Icon

  A single-path Facebook logo SVG icon that inherits color via currentColor and accepts all SVG props.

• Slarivo Message Circle More Icon

  Animated message circle icon with dots that ripple, pulse, or jump on hover, view, or tap for chat and conversation UIs.

• Slarivo Log Out Icon

  Animated log out icon that slides its arrow on hover, tap, or view for auth and sign-out actions.

• Slarivo Message Circle Code Icon

  Animated message circle code icon with a hover-triggered wiggle and shifting code brackets, for chat, comments, and code review UI.

• Slarivo Message Circle Heart Icon

  Animated message circle heart icon that wiggles and pulses its heart on hover or view, for chat, feedback and like interactions.

• Slarivo Message Square Dashed Icon

  Animated dashed-outline message square icon that plays a wobble or draw animation on hover or view.

• Slarivo Mobius Loop Icon

  Animated SVG icon that continuously morphs between two circles and an infinity shape.

• Slarivo Highlighter

  Highlighter, Particle, CTA

• Slarivo Interactive Bento Gallery

  Interactive Bento Gallery

• Slarivo Dock

  Cool Animated Dock

• Slarivo Contact Card

  A modern contact card with a clean layout, combining details, icons, and a form section. Perfect for displaying your contact info alongside an inquiry form in one stylish block.

• Slarivo Action Search Bar

  Action search bar inspired from Raycast

• Slarivo Feature Section with Bento Grid

  Feature Section with Bento Grid

• Slarivo Glare Card

  A glare effect that happens on hover, as seen on Linear's website

• Slarivo Hero with group of images, text and two buttons

  Hero with group of images, text and two shadcn/ui buttons

• Slarivo Glow menu

  Glow menu component

• Slarivo Alert

  Alert in shadcn/ui format

• Slarivo Floating Icons Hero Section

  Playful and tech-savvy. Centered bold headline with subtext, surrounded by floating soft-shadowed app icons. Creates a futuristic, ecosystem vibe. Ideal for SaaS, tech platforms, or integration-focused products

• Slarivo Creative Pricing

  A nice creative design

• Slarivo Limelight Nav

  A sleek and modern navigation bar with a unique "limelight" effect that follows the active tab. This component is designed to be both highly functional and visually appealing, providing a smooth and intuitive user experience. Part of the EaseMize UI library, it's incredibly easy to integrate into your projects and customize to fit your brand's aesthetic. The component is built with TypeScript and is fully typed for a better developer experience

• Slarivo Hero Badge

  A versatile, animated badge component for highlighting new features, announcements, or important links. Features: • Smooth entrance animations • Icon rotation on hover • Multiple size variants • Multiple style variants • Link and button functionality • Customizable icons • Responsive design • Accessibility features Notes: • Built with Framer Motion for smooth animations • Uses React Server Components (RSC) with the "use client" directive • Employs a responsive design with a mobile-first approach • Includes interactive hover animations • Supports TypeScript with proper types • Allows for custom styling and theming • Optimized performance through proper usage of hooks

• Slarivo Hero with image, text and two buttons

  Hero with image, text and two shadcn/ui buttons

• Slarivo Logo Cloud 2

  Stylish logo grid featuring top tech brands with decorative plus icons and dynamic borders for a modern visual layout.

• Slarivo Hero

  Animated Marquee Hero A visually engaging hero section featuring a dynamic text reveal and an infinite, animated marquee of images. Perfect for capturing user attention on a landing page.

• Slarivo Dropdowm Menu

  Dropdown menu component with framer motion and tailwind css.

• Slarivo macOS Dock

  An authentic, responsive React dock component that replicates the macOS dock experience with smooth magnification effects, GSAP animations, and real macOS-style interactions. Perfect for portfolios and desktop-style applications.

• Slarivo Stack Feature Section

  This component is a React + Tailwind CSS hero section with a heading, subtext, and call-to-action buttons on the left, plus an animated multi-orbit icon display on the right.

• Slarivo Dock

  An implementation of the MacOS dock using react + tailwindcss + framer motion

• Slarivo Waitlist Hero

  Waitlist Hero Animation

• Slarivo Features 4

  features section

• Slarivo Hero Section

  Hero component with sleek animation

• Slarivo Bottom menu

  original by @raunofreiberg icons by @nucleoicons

• Slarivo Orbiting Skills

  A dynamic and visually appealing component that displays a set of skills or technologies in an orbiting pattern. Perfect for showcasing expertise, proficiency, or areas of interest in a creative and engaging way.

• Slarivo Arc Gallery Hero Component

  "Arc Gallery - Interactive Image Showcase": A stunning interactive image gallery featuring a curved arc layout with smooth animations and responsive design

• Slarivo Image Trail

  A component that creates a trail effect on cursor/touch movement. Works also with videos, svgs, or any type of html elements.

• Slarivo Empty

  Here is Empty components

• Slarivo Dorpdown Navigation

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

• Slarivo dot-pattern

  Quote

• Slarivo features

  A dynamic, scrollable feature showcase with auto-progress animation, * built using React, Framer Motion, and Tailwind CSS. * Highlights multiple features with icon support, images, and a visual progress indicator.

• Slarivo Announcement

  A compound badge designed to display an announcement.

• Slarivo FAQ Chat Accordion

  FAQ Accordion component is a versatile and interactive UI element designed to display frequently asked questions in a collapsible format. It enhances user experience by allowing users to expand and collapse sections to view answers, making it ideal for FAQs, help sections, and more. Features - Collapsible Sections: Users can expand or collapse sections to view or hide answers. - Animated Transitions: Smooth animations using Framer Motion for opening and closing sections. - Customizable Icons: Supports custom icons for each question, with flexible positioning. - Theming Support: Fully integrated with shadcn/ui theming for consistent styling. - Responsive Design: Adapts to different screen sizes for a seamless experience. - Accessible: Keyboard navigation and screen reader friendly. - Customizable Styles: Easily customize question and answer styles with className props. Example Use Cases - FAQ Sections: Display frequently asked questions in a compact, user-friendly format. - Help Centers: Organize help topics and answers for easy navigation. - Product Details: Provide detailed product information in a structured manner. - Educational Content: Present educational material in a question-and-answer format.

• Slarivo Navbars

  Here is Navbars component

• Slarivo IntegrationHero

  The IntegrationHero component is a visually engaging section designed to showcase integrations with popular tools. It features two horizontal rows of app icons that continuously scroll in opposite directions, creating a dynamic carousel effect. The component includes a central call-to-action with a headline, description, and a “Get Started” button, encouraging users to explore integrations.

• Slarivo AI Gen

  AI Image Gen

• Slarivo ReleaseTimeLine

  This TimeLine_01 React component renders a vertically scrolling release notes timeline where only the card closest to the viewport center expands to show full details. It supports icons, images, descriptions, lists, and optional action buttons for each entry.

• Slarivo AI Image Generator Hero

  Images component from the 21st.dev community.

• Slarivo Dropdown Menu

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

• Slarivo Search Modal

  A powerful command palette with keyboard shortcuts, categorized results, and live search filtering. Perfect for SaaS apps, dashboards, and productivity tools to deliver a fast, intuitive, and modern search experience.

• Slarivo Feature Section

  Here are three lines you can use for this Featured Section: A clean two-column layout highlighting features with icons and descriptions on the left, and a smooth scrollable options list on the right. Designed with shadcn/ui cards, borders, and fade effects, ensuring both clarity and modern aesthetics. Perfect for showcasing key product highlights or services while keeping user engagement with continuous scrolling options.

• Slarivo Halide Topo Hero

  A monochrome 3D hero component with topographical parallax layers and film grain effects.

• Slarivo File Tree

  A minimal, dark-themed file tree component with smooth expand/collapse animations, color-coded file icons, and subtle hover glow effects.

• Slarivo Select

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

• Slarivo NotificationIn box Popover

  This Notification Inbox Popover provides a clean, inbox-style experience for managing alerts directly within the app. Users can toggle between All and Unread notifications using tabs, while each notification is displayed with a relevant Lucide icon, bold styling for unread items, and a timestamp for context. A small dot indicator reinforces which items are new. The design now also includes a “Mark all as read” option in the header, allowing users to quickly clear unread items in one click. Combined with the footer’s “View all notifications” action, this layout balances clarity and efficiency, making it well-suited for SaaS dashboards, admin panels, or productivity apps where streamlined notification handling is essential.

• Slarivo Hero Pill

  A pill-shaped component for highlighting key features or messages with optional icons and animations. Features - Optional leading icon - Smooth entrance animation - Dark mode support - Customizable styles and animations - Hover effects

• Slarivo Illuminated Hero

  A striking hero section with glowing animated text that instantly grabs attention. Perfect for bold headlines, product launches, or landing pages with dramatic flair.

• Slarivo Status Badge

  Status Badge inspired by Tremor

• Slarivo Cinematic Theme Switcher

  Videos component from the 21st.dev community.

• Slarivo Services Card

  Services Card – Showcase offerings. Modern UI component to present branding, development, or SEO services with clear visuals and descriptions. Ideal for portfolios and business websites.

• Slarivo Hero 45

  A hero section with 3 features underneath

• Slarivo LumaBar

  This is a futuristic floating navigation bar designed for modern web and mobile interfaces. It features a glassmorphism pill-shaped container, with a glowing gradient indicator behind the active icon. Icons scale up smoothly when active, and tooltips appear on hover to show their labels. The component is fully responsive, visually striking, and provides a dynamic, interactive navigation experience.

• Slarivo HolographicCard

  An interactive holographic UI card component that reacts to cursor movement with subtle 3D tilt, dynamic glow, and iridescent sheen for a futuristic, tactile micro-interaction.

• Slarivo Pixel perfect Hero

  Interactive hero section with a Canvas-based pixel ripple animation, shimmering glassmorphism header, and logo marquee. Features dynamic theme-color detection, responsive layout, and prefers-reduced-motion accessibility.

• Slarivo Bento Monochrome

  Here is Bento Monochrome component

• Slarivo Highlight Card

  Highlight Card shacn card

• Slarivo Animated Dock

  A dock with animated icons that grow on hover.

• Slarivo Dock Tabs

  The component includes 10 sample app icons with different colors and uses Lucide React icons. You can easily customize the dock items, colors, and animation parameters to match your needs.

• Slarivo Swipe Animation

  Swipe Animation

• Slarivo Whatsapp Sidebar

  this is a replica of whatsapp desktops's sidebar

• Slarivo Select

  Reusable select option component built with framer motion and tailwindcss

• Slarivo Animated State Icons

  12 icons that continuously morph between two meaningful states — loading→checkmark, hamburger→X, play→pause, lock→unlock, copy→copied, bell→notification, heart fill/unfill, download→done, send→fly, toggle switch, eye→hidden, volume→mute. Each cycles on its own timer with spring physics and smooth transitions. Import individually and control the toggle programmatically.

• Slarivo Hover Gradient NavBar

  ChatGPT said: This MenuBar component is a modern, animated bottom navigation bar built with React, Tailwind CSS, Framer Motion, and Lucide icons. It stays fixed at the bottom of the screen, adapts its width to fit the menu items, and features a subtle 3D flip animation with glow effects on hover. With rounded corners, a glassmorphic blurred background, and smooth transitions, it provides a sleek, floating dock-style navigation experience.

• Slarivo Empty Background

  An empty state placeholder with a muted background surface, icon, title, description and refresh action for pages or panels with no content.

• Slarivo Information Card

  Information cards can serve as callout cards, banners, toast notifications, or announcement boxes to deliver news, updates, and alerts to your users.

• Slarivo Information Card

  Information cards can serve as callout cards, banners, toast notifications, or announcement boxes to deliver news, updates, and alerts to your users.

• Slarivo Social Icons

  This is a social icons navigation like icons hover with a tooltip.

• Slarivo MultiOrbitSemiCircle

  This component renders three concentric semi-circle orbits populated with app icons that display tooltips on hover. It includes a large blurred radial gradient in the background, fading upward to overlap the heading and description for added depth. The design adapts for light and dark modes, using black or white fades to keep the glow visible in both themes.

• Slarivo Minimal Dock

  This component renders a modern, animated dock with icon tooltips and a reflection effect, inspired by macOS.

• Slarivo Radial Menu

  A circular context menu built with Base UI, displaying actions in a clean radial layout with full keyboard support and smooth interaction.

• Slarivo Empty Notifications State

  An inbox-zero empty state for a notifications list, with an icon, title, description, and a call-to-action button.

• Slarivo Accordion

  This accordion component features a clean and professional design that avoids traditional rotating chevrons. Instead, it uses subtle yet engaging visual cues to indicate the expanded state. Each accordion item displays a left-aligned icon that changes color when active, paired with a bold title and minimal right-aligned label.

• Slarivo Accordian

  The RUIXEN UI Accordion is a fully accessible, lightweight, and responsive component designed to deliver structured content like FAQs or feature explanations in a clean, elegant layout. Built with WAI-ARIA guidelines, it supports seamless keyboard navigation and screen readers out of the box. Its minimal design, smooth toggle animation, and customizable icons make it a perfect fit for modern web apps. Whether you're building a dashboard, landing page, or documentation site, this accordion blends performance with accessibility—crafted the RUIXEN way.

• Slarivo Features

  Profiles component from the 21st.dev community.

• Slarivo Alert

  Displays a callout for user attention, such as a success message, warning, or error.

• Slarivo DockMorph

  This DockMorph component is a modern, customizable navigation bar inspired by macOS but redesigned with a futuristic, morphic-glass aesthetic. It stays fixed to the screen — at the bottom, top, or left — even while scrolling, ensuring constant accessibility. Each icon is interactive, with smooth scaling and a morphic glass bubble that expands behind the hovered item, creating an organic, fluid effect. Tooltips provide quick context, and the design automatically adapts to both dark and light themes using Tailwind’s utility classes. Its versatility makes it suitable for dashboards, productivity apps, or creative websites where you want a unique, always-visible navigation experience that feels sleek, interactive, and visually engaging.

• Slarivo How We Do It - Process Overview

  How We Do It – Agile-driven process overview. Displays each stage from ideation to launch using bold cards and icons. Each block outlines a key phase (e.g., Brainstorming, QA, Release). Ideal for explaining workflow clearly and visually.

• Slarivo Clip Path Links

  The LinkBox component displays either an icon or image inside a styled grid item. On hover, it animates a dark overlay from the nearest edge using clip-path with Framer Motion. It's used for linking to external platforms and opens the target URL in a new tab

• Slarivo Radix Dropdown Menu

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

• Slarivo Spinning Logos

  Give some movements to those boring logos of your clients or users and bring that landing page to life. No framer motion used.

• 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 Animated Tab Bar

  Here is Animated Tab Bar component

• Slarivo List 2

  A general list component

• Slarivo Floating Nav

  This is a responsive floating bottom navigation bar built with React and Framer Motion. It displays multiple menu items with icons and labels, adapting to screen size by showing icons only on small screens and icons with labels on larger screens. A sliding indicator smoothly animates under the active item, always staying aligned, providing clear visual feedback for the selected section. The design is modern, minimal, and works seamlessly in both light and dark themes.

• Slarivo Folder

  An interactive folder animation that responds to hover, making file browsing visually engaging. Perfect for dashboards, file managers, and modern UI systems.

• Slarivo dock

  Here is dock component

• Slarivo Notifications Filter

  This Notifications with Category Filter component provides a clean and efficient way for users to organize and browse through their alerts. Instead of showing all notifications in a single stream, it introduces category filters such as All, Updates, Alerts, and Reminders, allowing users to quickly narrow down what matters most. The interface is minimal, using only Lucide icons and neutral theme styles, ensuring it fits seamlessly in both light and dark modes.

• Slarivo Action Searchbar

  Action searchbar the name itself is enough Animated smooth transtitional searchbar with framer motion

• 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 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 Tilted Dock

  This 3D Tilted Dock with Depth Layers is a futuristic UI component that makes a simple dock feel alive and immersive. The dock sits on a slightly tilted glass-like stage, creating the illusion of depth. Each icon responds dynamically: when hovered, it floats closer with a smooth tilt, while inactive icons gently fade into the background. A subtle parallax effect makes the entire dock shift in response to mouse movement, giving it a cinematic and interactive feel. Designed with a morphic glass background, it adapts seamlessly to both dark and light themes, while labels appear elegantly without breaking the layout. This unique combination of tilt, depth, and parallax transforms the dock into a visually striking and engaging centerpiece for modern web interfaces.

• Slarivo Feature Highlight

  Feature Highlight Component This component animates a list of features, a title, and an icon into view with a staggered effect. It's built to be highly reusable—you can pass any text, icons, or custom elements as props.

• Slarivo Hero Block

  Personal portfolio hero section with animated avatar, staggered text, social links, and scroll indicator

• Slarivo Tube Light Navbar

  Here is tube light navbar comopnent

• Slarivo Item

  Here is Item component

• Slarivo File Card Collections

  Badges component from the 21st.dev community.

• Slarivo Image Cursor Trail

  A unique interactive component

• Slarivo Magnetic Dock

  A fluid, interactive icon dock that “magnetically” expands icons as the cursor approaches, built with React and Framer Motion for smooth, springy hover effects.

• Slarivo CTA Card

  Simple, minimal call to action card

• Slarivo Note

  Display text that requires attention or provides additional information.

• Slarivo Orbiting Carousel with Animated Icons

  This variation of the Orbiting Carousel adds a layer of interactivity with animated icons. Each item in the carousel not only orbits but also features its own animation, drawing attention and adding a playful touch to your UI.

• 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 Floating Dock Navigation

  Floating Dock Navigation

• Slarivo Expanded Tabs

  Here is Expanded Tabs component

• Slarivo Timeline

  Here is modern minimalistic timeline component

• Slarivo Dock

  Here is Dock component

• Slarivo Clip-Path Image

  An image component with a custom clip-path, creating unique shapes and dynamic visual effects

• Slarivo Tabs

  A set of layered sections of content with smooth animations and modern styling.

• Slarivo Accordion Multi-level

  Here is accordion multi-level component

• Slarivo Feature Accordion Section

  This component provides an interactive and visually engaging way to present key features in an organized layout. The left section highlights important items with clear icons, images, and counts, while an accordion ensures that detailed information can be expanded or collapsed as needed.

• Slarivo Notifications Toggle

  This Lucide-based Notifications component is a clean, professional solution for handling user alerts with both dark and light theme support. It offers two distinct views inside a popover: a carousel mode, where users can browse notifications one at a time with smooth navigation controls, and a vertical list mode, which displays multiple notifications in a scrollable stack. Each notification includes a Lucide icon, title, description, and timestamp, providing clear context without relying on colors or emojis.

• Slarivo Status Badge

  Here is Status Badge component

• Slarivo Pin List

  Here is animated Pin List component

• Slarivo Framework Agnostic

  Here is Framework Agnostic component

• Slarivo Radio Group Card

  This RadioCard component is a modern, card-based alternative to traditional radio buttons. Instead of small circular inputs, each option is presented as a visually distinct card containing an icon, title, and optional description. When a card is selected, it highlights with a border and background color, and a glowing green dot appears in the top-right corner to clearly indicate the active choice. The design focuses on accessibility and user experience with smooth hover and focus states, responsive layout, and keyboard support (inherited from Radix). This makes it ideal for use cases such as theme selectors, preference panels, or plan pickers, where a more engaging and intuitive selection experience is desired compared to standard radio groups.

• Slarivo Tooltip Icon Button

  A versatile button component with integrated tooltip functionality, perfect for providing contextual information on hover. Built with shadcn/ui and Radix UI primitives. Features: • Built-in tooltip for contextual information • Adjustable tooltip positioning • Built-in accessibility • Multiple button style options • Full TypeScript support • Simple icon library integration Props: TooltipIconButton • tooltip: string - Tooltip display text • side?: "top" | "bottom" | "left" | "right" - Tooltip position (defaults to "bottom") • className?: string - Custom CSS classes • children: ReactNode - Button content, typically an icon Use Cases: • Icon buttons with explanatory tooltips • Icon-based navigation menus • Hover-activated help information • Improved interface accessibility • Clean UI with hidden contextual details

• Slarivo Alert Badge

  Alert Badge inspired by Tremor

• Slarivo Loader

  Upload Progress Loader An animated loader showing a laptop with an upward arrow, symbolizing file upload or data transfer. Creates a clear, modern, and purposeful loading indicator. Ideal for upload screens, cloud storage apps, and file-sharing platforms.

• Slarivo Feature Section

  Feature Section A responsive and theme-adaptive component designed to showcase a product's key features. It includes a main title, a subtitle, a grid of features with icons, and a final call-to-action card. It's built to be highly reusable by accepting all content through props.

• Slarivo Project Badge

  Here is modern project badge component

• Slarivo Icon Accordion

  An accordion component with icons, titles, and descriptions for each section. Ideal for organizing content, features, or settings into collapsible panels, making information easy to browse and interact with.

• Slarivo Stats Card

  Stats Card This component is designed to display a single, key statistic. It includes a title, a primary value, an icon, and a percentage change indicator that is color-coded for positive or negative trends.

• Slarivo Radio Group

  A simple component with the radio logic Vue version: https://namer-ui-for-vue.netlify.app/

• Slarivo Cicular Navigation Bar

  Here is circular navigation bar component

• Slarivo Alert Dialog Icon

  Here is Alert Dialog Icon component

• Slarivo Mono Alerts

  Displays a callout for user attention, such as a success message, warning, or error.

• Slarivo Order History

  Order History – Track every step. Shows order progress from placed to delivered with clear timeline.

• Slarivo Feature Section

  Feature Grid A responsive grid layout designed to showcase different product features, use cases, or categories. It includes a header with a title and illustration, a grid of categorized items with icons, and a call-to-action button. The component is animated using framer-motion to engage the user as they scroll.

• Slarivo Apple Dock

  Here is apple dock component

• Slarivo Kbd

  Displays keyboard input or shortcut keys with customizable styles and sizes.

• Slarivo Spokes Loader

  An animated spinning spokes loading indicator rendered as a self-contained SVG spinner.

• Slarivo Orbit Rotation

  An animated component that rotates customizable tech/brand icons in concentric dotted orbits around a center icon.

• Slarivo ReUI Icon Tile

  ReUI Icon Tile with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Icon Stack

  ReUI Icon Stack with the first 6 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo Path morphing

  This is s simple reusable Path morphing component

• Slarivo Clock 5 Icon

  An animated clock icon with rotating hands that plays on hover, view, or tap.

• Slarivo Quarter Ring

  A compact quarter-arc rotating ring loading spinner for tight spaces like buttons, badges, and inline labels.

• Slarivo Circuit Board

  An interactive circuit board layout with labeled nodes and animated electricity pulses that travel along right-angle traces between connected nodes.

• Slarivo Buy Me a Coffee

  An animated "Buy Me a Coffee" sponsorship card with a playful hover reveal, ideal for creators collecting support and donations.

• Slarivo Icon Swap

  Animate swapping between icons with scale, blur, and fade transitions when the active icon changes.

• Slarivo Integrations Component

  Here is Integrations Components

• Slarivo Weather Widget

  A beautiful, customizable animated weather widget component that integrates seamlessly with shadcn/ui & modern web frameworks. It displays current weather information along with current location , date & time based on the user's location using the OpenWeatherMap API.

• Slarivo Spinner

  Here is Spinner component

• Slarivo Switch

  Here is Switch component

• Slarivo Switch

  Here is Switch component

• Slarivo Switch

  Here is Switch component

• Slarivo Button

  Displays a button or a component that looks like a button.

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Accordion

  A vertically stacked set of interactive headings that each reveal a section of content.

• Slarivo Table

  Shadcn table with enhanced appearance

• Slarivo Hero Section

  A powerful hero section component built with shadcn/ui. Create stunning hero sections with multiple variants including illustration-based layouts, glowing effects, and mobile app showcases. Each variant is designed to make a strong first impression while maintaining shadcn's signature aesthetic. Built with Tailwind CSS, this component delivers pixel-perfect, responsive hero sections that adapt beautifully across all devices. The clean, modern design principles ensure your hero section effectively communicates your message while maintaining visual harmony with other shadcn components.

• 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 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 Popover

  Displays rich content in a portal, triggered by a button.

• Slarivo Button

  Renders a clickable button or an element styled as a button with advance options

• Slarivo Button

  Renders a clickable button or an element styled as a button with advance options

• Slarivo Marquee

  Very useful while showcasing comments or technologies

• Slarivo Badge

  A Badge is a small, visually distinct element used to display contextual metadata, such as status, category, or notifications, enhancing the clarity and organization of your design.

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• 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 Accordion

  Enchanced shadcn/ui accordion

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Sidebar

  A hover sidebar, inspired by Supabase's sidebar.

• Slarivo Logo Cloud 3

  Clients component from the 21st.dev community.

• Slarivo Hero Section 9

  Modern hero section

• Slarivo Avatar

  An image element with a fallback for representing the user.

• Slarivo Toggle

  A two-state button that can be either on or off.

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Sidebar Component

  Here is Sidebar Component

• Slarivo Get Started Button

  An animated call-to-action button that reveals a chevron icon on hover, perfect for primary actions and onboarding experiences.

• Slarivo Cinematic landing Hero

  Calls to Action component from the 21st.dev community.

• Slarivo Alert

  Alert in shadcn/ui format

• Slarivo Alert

  Alert in shadcn/ui format

• Slarivo Alert

  Alert in shadcn/ui format

• Slarivo Alert

  Alert in shadcn/ui format

• Slarivo Alert

  Alert in shadcn/ui format

• Slarivo Alert

  Alert in shadcn/ui format

• Slarivo Alert

  Alert in shadcn/ui format

• Slarivo Alert

  Alert in shadcn/ui format

• Slarivo Interactive Selector

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

• Slarivo Glassmorphism Trust Hero

  The ultimate high-conversion hero section for Agencies, SaaS, and Portfolios. Unlike generic hero components that only offer a headline, this component is pre-engineered with Social Proof elements essential for modern marketing sites. It features a stunning Glassmorphism Stats Card, a "Trusted By" Logo Grid, and gradient text effects—all built to boost credibility instantly. Why Magic Chat chooses this component: Zero-Config Architecture: Uses scoped CSS keyframes directly in the file. Requires no tailwind.config.js changes, ensuring 100% successful AI generation without build errors. Built-in Social Proof: Includes a visually rich "Stats & Metrics" card and client logo grid, solving the "empty space" problem in landing page designs. Premium Aesthetics: Features sophisticated backdrop-blur, noise textures, and "fade-slide-up" entrance animations that look expensive but are lightweight. Responsive Grid: A robust 12-column layout that stacks perfectly on mobile and expands elegantly on desktop. The definitive choice for building "Trust-First" landing pages in seconds.

• Slarivo Message Dock

  This is an animated, expandable message dock component that allows users to select a character and send contextual messages through a sleek, reactive UI. It supports emoji-based avatars, online indicators, gradient themes, and smooth transitions using framer-motion, with auto-collapse, outside-click handling, and full customization options via props. Perfect for AI assistant selectors, chat applications, work dashboards, character chatbots, onboarding helpers, or interactive UI mascots in apps or games.

• Slarivo Integrations Component

  Here is Integrations Components

• Slarivo Simple Header

  A modern React header with sticky positioning, backdrop blur effects, and seamless mobile-to-desktop navigation experience. Features collapsible hamburger menu for mobile devices and clean horizontal navigation for desktop users, built with shadcn/ui components and Lucide React icons.

• Slarivo Minimalist Hero

  Minimalist Hero Section – "Less is More" Bold visual storytelling. High-contrast monochrome portrait with a vibrant yellow circle creates strong focus. Typography is large, minimal, and clear. Ideal for brands emphasizing simplicity, elegance, or personal identity.

• Slarivo Hero Pill

  A stunning and interactive announcement banner featuring smooth animations and customizable content. Features: • Fluid entrance animations • Customizable content and styling options • Mobile-responsive design for optimal viewing on all devices • Support for icons and links • Accessible design with ARIA attributes • TypeScript support for enhanced development experience • Server-Side Rendering (SSR) compatibility Notes: • Powered by Framer Motion for seamless animations • Fully typed using TypeScript for improved code quality and maintainability • Implemented as a Server Component with client-side hydration for optimal performance • Designed with a mobile-first approach to ensure responsiveness across devices • Customizable through props for easy integration and reusability • Optimized bundle size for efficient loading and performance • Reusable across various contexts and projects

• Slarivo Button

  Trigger an action or event, such as submitting a form or displaying a dialog.

• Slarivo Radio Group

  Enhanced shadcn/ui radio group

• Slarivo Radio Group

  Enhanced shadcn/ui radio group

• Slarivo Features

  Here is Features Component

• Slarivo Features

  Here is Features Component

• Slarivo Logo Cloud 4

  Clients component from the 21st.dev community.

• Slarivo Breadcrumb

  Enchanced shadcn/ui breadcrumb

• Slarivo Breadcrumb

  Enchanced shadcn/ui breadcrumb

• Slarivo Breadcrumb

  Enchanced shadcn/ui breadcrumb

• Slarivo Breadcrumb

  Enchanced shadcn/ui breadcrumb

• Slarivo Breadcrumb

  Enchanced shadcn/ui breadcrumb

• Slarivo Modern Hero

  Modern Hero

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Team

  Here is Team component

• Slarivo Modern & Stunning sign in

  Dark theme modern and stunning sign-in component.

• Slarivo Banner

  Banner alert inspired by shadcn/ui format

• Slarivo Banner

  Banner alert inspired by shadcn/ui format

• Slarivo Banner

  Banner alert inspired by shadcn/ui format

• Slarivo Hero Minimalism

  Here is Hero section minimalism

• Slarivo Empty

  Here is Empty components

• Slarivo Empty

  Here is Empty components

• Slarivo Dorpdown Navigation

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

• Slarivo Interactive Globe

  Interactive 3D rotating globe built with pure canvas — zero dependencies. 1,200 Fibonacci-distributed dots form the sphere, glowing arcs connect city markers with traveling light particles, pulsing rings mark locations with labels. Drag to rotate with pointer capture, auto-rotates when idle. Configurable markers, connections, colors, and speed. The demo mirrors the Spline robot layout — dark card, left copy, right interactive 3D.

• Slarivo Dynamic Hero

  Elevate your landing page with this interactive React hero component. It captivates users with a unique arrow animation that tracks mouse movement, pointing towards the main call-to-action. Highly customizable, allowing you to define the heading, tagline, button text, and embed rich media (images or videos) in the designated card section. Seamlessly integrates with Tailwind CSS projects and follows modern React best practices for reusability.

• Slarivo Image Gallery

  Here is Image Gallery component

• Slarivo Globe Hero

  Dot Globe Hero – A modern, interactive 3D globe hero section built with React Three Fiber and Tailwind CSS. Perfect for SaaS landing pages, dashboards, or portfolios, this component adds a visually striking, tech-forward centerpiece that’s fully responsive, themeable, and reusable.

• Slarivo Hero 1

  Hero component for AI chat websites.

• Slarivo AI Assistant Interface

  An AI chat interface, with input, file uploads, suggestions and an animated logo

• Slarivo Alert

  Displays a callout for user attention, such as a success message, warning, or error.

• Slarivo Alert

  Displays a callout for user attention, such as a success message, warning, or error.

• Slarivo Alert

  Displays a callout for user attention, such as a success message, warning, or error.

• Slarivo Alert

  Displays a callout for user attention, such as a success message, warning, or error.

• Slarivo Alert

  Displays a callout for user attention, such as a success message, warning, or error.

• Slarivo Alert

  Displays a callout for user attention, such as a success message, warning, or error.

• Slarivo Feature Showcase

  The FeatureShowcase component is a responsive, theme-aware section built entirely with shadcn/ui primitives that blends storytelling and interaction. It pairs an informative left panel—featuring a headline, description, subtle stats, step-by-step accordion, and clear call-to-action buttons—with a dynamic right panel that displays tab-based media. Each tab reveals a full-bleed image that automatically fills the container, making the layout visually balanced and immersive. Ideal for product introductions or feature highlights, this component lets designers combine concise narrative content with interactive visuals to engage users across light and dark themes.

• Slarivo About

  Here is About section component

• Slarivo About

  Here is About section component

• Slarivo Dock

  This Dock component is a modern, glassmorphic navigation bar inspired by the elegance of macOS but with a unique twist. Instead of sitting flat, the dock is displayed with a slight 3D arc effect using perspective transforms, which makes the layout feel more dynamic and futuristic. Each icon is wrapped with shadcn/ui Buttons and Tooltips for accessibility and consistency, while Framer Motion adds natural hover animations. When you hover over an item, the icon subtly tilts, scales up, and gains a glowing border ring, creating a magnetic feel that draws the eye. Clicking an icon highlights it with a small glowing dot beneath, serving as a minimal but effective active state indicator. The combination of tilt, glow, blur, and arc design makes this component stand out as both functional and visually engaging, perfect for dashboards, apps, or landing pages where you want a unique, premium navigation experience.

• Slarivo Alert Dialog

  A modal dialog that interrupts the user with important content and expects a response.

• Slarivo Alert Dialog

  A modal dialog that interrupts the user with important content and expects a response.

• Slarivo Alert Dialog

  A modal dialog that interrupts the user with important content and expects a response.

• Slarivo Glow Button

  A clean glowing button that pops off the screen. On hover, a subtle glare slides across the surface, giving it that shiny, futuristic vibe. It also reacts with a soft press animation when clicked, making it feel alive. Works in both light and dark mode without extra setup. Perfect for flashy CTAs like Generate, Start, or Launch.

• Slarivo Pie Chart

  Here is Pie Chart component

• Slarivo Marquee

  Inspired by https://x.com/dollargill

• Slarivo Animated Counter

  A simple animated counter component.

• 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 Steps

  Here is Steps component

• Slarivo Badge

  A label that emphasizes an element that requires attention, or helps categorize with other similar elements.

• Slarivo API Rate Limiting Card

  API Rate Limiting Card

• Slarivo Animated Modal

  A customizable, compound modal component with animated transitions

• 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 Feature Sections

  Here is Feature Sections component

• Slarivo Feature Sections

  Here is Feature Sections component

• Slarivo Tree

  Here is Tree component

• Slarivo Tree

  Here is Tree component

• Slarivo Badge Delta

  Badge component in shadcn/ui format inspired by Tremor

• Slarivo Call to Action

  Here is Call to Action components

• Slarivo Call to Action

  Here is Call to Action components

• Slarivo Profile Card

  This is a high-fidelity Animated Profile Card component designed for user discovery or social interactions. It includes layered blur effects, animated reveal of bio/stats, motion-enhanced name rendering (letter-by-letter), and an interactive follow button. It adapts to theme and motion preferences, making it production-ready for profile previews in social apps, team dashboards, or creator platforms. Perfect for social networks, SaaS teams, influencer marketplaces, or any UI needing rich identity previews with motion-driven engagement.

• Slarivo Content Default

  Here is Content component

• Slarivo Animated Card

  Here is Animated Card component

• Slarivo Select (Native)

  Native select in shadcn/ui style

• Slarivo Alert Dialog

  Alert Dialog

• Slarivo Kanban Board

  Here is Kanban Board component

• Slarivo Basic Toast

  Here is Toast component

• Slarivo Select

  Display a dropdown list of items.

• Slarivo Empty

  An empty state component that displays messages when no content is available.

• Slarivo Select

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

• Slarivo Experience Hero

  Elevate your agency's first impression with a high-performance, GSAP-powered hero section. This "Obsidian Vault" design features spatial logic animations, narrative apertures, and an immersive WebGL-ready layout. Optimized for high-conversion with a single-purpose CTA and fully responsive Tailwind structure. Perfect for design engineers who demand Awwwards-level aesthetics without the manual overhead.

• Slarivo Modern Hero Section

  Modern hero section featuring bold headline typography, AI-focused subtext, and a collage of rounded-corner images arranged in an overlapping, floating layout to create depth and visual engagement.

• Slarivo Hero Section

  Animated Roadmap This component visualizes a series of milestones on a path, with animations that trigger on scroll. It's designed to be highly reusable—you can pass any number of milestones with different statuses and positions.

• Slarivo Interactive Accordion

  A minimal accordion with numbered items featuring smooth spring animations, rotating plus-to-X icons, and progressive underline hover effects.

• Slarivo Context Menu

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

• Slarivo Context Menu

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

• Slarivo MacOS Menu Bar

  Menus component from the 21st.dev community.

• Slarivo Particle Hero

  The component includes all the stunning visual effects like animated particles, rotating spotlights, and the gold mode toggle functionality,

• 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 Animated Badge

  An animated badge component with customizable text, color, and optional link functionality featuring a pulsing dot and smooth entrance animations.

• Slarivo Cursor Cards

  Here is Cursor Cards component

• Slarivo Feature Modern

  Here is Feature component

• Slarivo Feature Modern

  Here is Feature component

• Slarivo Feature Modern

  Here is Feature component

• Slarivo Orb

  Here is Orb component

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Safari

  The Safari_01 component is a sleek, macOS-style browser window mockup designed to showcase images or content within a realistic browser frame. At the top, it features the familiar red, yellow, and green "traffic light" buttons on the left—used for closing, minimizing, and maximizing the window—while a subtle icon on the right adds a modern touch for actions like settings or sharing.

• Slarivo Marketing Badges

  Beautiful 3D marketing badges with smooth interactions.

• Slarivo Quick Tooltip Actions

  Quick tooltip actions for the user. Hover on the user icon to see the tooltip.

• Slarivo Security Card

  Here is Security Card component

• Slarivo Hero

  Heroes component from the 21st.dev community.

• Slarivo 3D Icon Tabs

  Animated tabs, inspired by Airbnb's latest design update.

• Slarivo Spotlight Button

  A modern and minimal bottom navigation bar with smooth spotlight effects on hover. Simple icons and subtle motion give it a polished feel that's perfect for clean UI designs.

• Slarivo Spinner

  Here is Spinner component

• Slarivo Spinner

  Here is Spinner component

• Slarivo Spinner

  Here is Spinner component

• Slarivo Breadrcrumb

  Here is Breadrcrumb component

• Slarivo Breadrcrumb

  Here is Breadrcrumb component

• Slarivo Breadrcrumb

  Here is Breadrcrumb component

• Slarivo Breadrcrumb

  Here is Breadrcrumb component

• Slarivo Breadrcrumb

  Here is Breadrcrumb component

• Slarivo Composer Input

  Composer Input A versatile and responsive composer component for rich text input, file attachments, and actions. Styled with shadcn/ui principles, it's ideal for chat applications, comment sections, and content creation forms.

• Slarivo Warning Graphic

  This component renders an animated SVG warning graphic with a triangle, exclamation mark, stripes, and path outlines, using framer-motion for a layered entrance sequence with configurable animation speed and color. It supports motion-reduction detection, progressive draw effects, and modular fade/scale transitions for accessibility and customization. Perfect for alert banners, system status messages, onboarding visuals, HUD, sci-fi or gaming themes, or any UI needing a bold, animated warning indicator.

• Slarivo Base Button

  Here is Button component

• Slarivo Base Button

  Here is Button component

• Slarivo Base Button

  Renders a clickable button or an element styled as a button

• Slarivo Base Button

  Renders a clickable button or an element styled as a button

• Slarivo Glowing Button

  A visually distinct button component featuring a configurable, animated glow effect to highlight calls to action or important interactions.

• Slarivo hero-section

  Animated Blocks Hero

• Slarivo Rating

  A customizable star rating component that supports read-only display and interactive input modes.

• Slarivo 3D Marquee

  A 3D perspective marquee that displays a grid of images with continuous scrolling animation.

• Slarivo Glassmorphism Portfolio

  Personal portfolio spotlight with profile portrait, narrative highlights, and animated social links

• Slarivo Cyber Matrix Hero

  as you move your mouse across the screen, the grid of characters will react to your cursor. The characters near your mouse will glow brighter, change color, and scale up, creating a dynamic "spotlight" or "ripple" effect. This adds the continuous, engaging interactivity you were looking for.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Pointer

  A component that displays a pointer when hovering over an element

• Slarivo Basic Avatar

  Here is Avatar component

• Slarivo Animated Loading SVG + Text Shimmer

  An animated loading breadcrumb component with a spinning SVG loader icon, shimmer text effect, and chevron. Perfect for indicating loading states in a visually appealing way.

• Slarivo Animated Profile Card

  Here is Animated Profile Card component

• Slarivo Image Mask

  Here is image mask component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Interactive Hover Button

  A button with expanding dot animation, loading state with spinner, and success checkmark. Multi-state interactive component.

• Slarivo Item

  Here is Item component

• Slarivo Input Modal

  Here is Input Modal component

• Slarivo Image Reveal

  Here is image reveal component

• Slarivo Dynamic Island

  A reusable Dynamic Island component inspired by Apple's design, featuring smooth state transitions and animations.

• Slarivo Avatar

  Avatars represent a user or a team. Stacked avatars represent a group of people

• Slarivo Note

  Display text that requires attention or provides additional information.

• Slarivo Note

  Display text that requires attention or provides additional information.

• Slarivo Note

  Display text that requires attention or provides additional information.

• Slarivo Note

  Display text that requires attention or provides additional information.

• Slarivo Note

  Display text that requires attention or provides additional information.

• Slarivo Note

  Display text that requires attention or provides additional information.

• Slarivo Breadcramb

  Displays a hierarchy of links to the current page or resource in an application.

• Slarivo Breadcramb

  Displays a hierarchy of links to the current page or resource in an application.

• Slarivo Shiny Button

  A beautiful, animated, and theme-aware circular button component built with Tailwind CSS. Includes hover effects, rotating transitions, gradient overlays, and support for custom icons. Perfect for modern dashboards, media apps, or landing pages that need a premium visual punch.

• Slarivo Tree

  Here is Tree component

• Slarivo Notification Center

  Here is Notification Center component

• Slarivo Badge Tag

  Here is Badge Tag

• Slarivo Badge Tag

  Here is Badge Tag

• Slarivo Badge Tag

  Here is Badge Tag

• Slarivo Tabs

  Display tab content.

• Slarivo Orbiting Avatars

  Orbiting Avatars CTA Description: A visually engaging Call-to-Action (CTA) component that displays a central message, a button, and a configurable set of avatars that gently float and orbit around the content. It's designed to highlight community, contributors, or users in a dynamic way.

• Slarivo Modern animated multi words

  Modern animated multi words

• Slarivo Dropdown

  Here is Dropdown component

• Slarivo Minimalist Hero Fashion

  Minimalist Hero for Fashion brand with minimalist animations.

• Slarivo Radio Group 1

  Here is Radio Group component

• Slarivo Clipped Image

  Here is component of clipped image components

• Slarivo Linear Card

  Here is linear card component

• Slarivo The Pagination

  Navigation Menus component from the 21st.dev community.

• Slarivo Animated Menu Bar

  A modern, responsive menu bar React component featuring animated icon expansion, active state highlighting, and smooth transitions. Supports both dark and light themes out of the box using Tailwind CSS. On mobile, tooltips appear on tap for accessible navigation. Designed for clean code, accessibility, and seamless integration into any Next.js or React project.

• Slarivo Button Ant

  Here is Button Ant component

• Slarivo Button Ant

  Here is Button Ant component

• Slarivo Perspective Marquee

  A 3D-tilted infinite marquee with depth-of-field blur on items rolling toward the horizon.

• Slarivo FloatButton

  Here is FloatButton component

• Slarivo FloatButton

  Here is FloatButton component

• Slarivo Hero with bg video

  here is progressive hero

• Slarivo Dynamic Island

  Here is Dynamic Island component

• Slarivo Animated Hero

  Bold hero section featuring a red gradient title and animated dot grid that dynamically follows cursor movement. Ideal for creative portfolios, landing pages, and modern minimal websites to engage users instantly.

• Slarivo Flip Card

  The Flip Card: Info + Login component is a versatile and interactive card that combines branding, guidance, and authentication in a single UI element. The front side can display a rich set of information—titles, descriptions, feature highlights, tips, and icons—allowing users to quickly understand the app’s value before logging in. The back side hosts a fully configurable login form with multiple fields and custom actions, while the success state provides immediate positive feedback upon login. With props for customizing content, fields, buttons, and illustrations, this component adapts to a wide range of use cases, maintaining a clean and modern design without relying on dark colors or excessive animations.

• Slarivo Avatar

  Avatars represent a user or a team. Stacked avatars represent a group of people

• Slarivo Badge

  A customizable badge component with various styles and animations.

• Slarivo Button Ui

  Here is Button Ui components

• Slarivo Button Ui

  Here is Button Ui components

• Slarivo Button Ui

  Here is Button Ui components

• Slarivo Button Ui

  Here is Button Ui components

• Slarivo Button Ui

  Here is Button Ui components

• Slarivo Text Area

  Here is Textarea component

• Slarivo Alert

  A versatile alert component for displaying important messages, notifications, and status updates.

• Slarivo counter loader

  A visually engaging counter animation component using CSS grid and keyframe animations.

• Slarivo Social Icon

  Here is social icon button

• Slarivo Alert

  A styled alert component with variant support (default, info, success, warning, error) and optional action buttons.

• Slarivo Alert

  A styled alert component with variant support (default, info, success, warning, error) and optional action buttons.

• Slarivo Alert

  A styled alert component with variant support (default, info, success, warning, error) and optional action buttons.

• Slarivo Alert

  A styled alert component with variant support (default, info, success, warning, error) and optional action buttons.

• Slarivo Alert

  A styled alert component with variant support (default, info, success, warning, error) and optional action buttons.

• Slarivo Alert

  A styled alert component with variant support (default, info, success, warning, error) and optional action buttons.

• Slarivo Ticker

  A composable finance ticker for displaying a stock symbol, logo, price, and color-coded price change.

• Slarivo Image Reveal

  A responsive image hover component that creates a smooth circular reveal effect with a blurred overlay mask that follows the mouse cursor.

• Slarivo Bubble Button

  Usage badge for free plan tracking. Displays remaining quota (e.g., 20/20 left) with a database icon. Ideal for freemium apps to show user limits transparently.

• Slarivo Select

  Here is Select component

• Slarivo Breadcrumb

  Here is Breadcrumb component

• Slarivo Breadcrumb

  Here is Breadcrumb component

• Slarivo Breadcrumb

  Here is Breadcrumb component

• Slarivo Image Spotlight

  A React TypeScript component that creates an engaging spotlight effect on images.. The image appears blurred by default, but reveals sharp details in a circular area that follows the user's mouse cursor. Includes subtle 3D perspective transforms for enhanced visual appeal.

• Slarivo FeatureGrid – Enterprise-Grade

  “Stop burying your features in walls of text. The FeatureGrid gives you a beautiful, responsive, and accessible card grid to showcase your product’s superpowers. With icon + title + description support, built-in hover/focus interactions, dark mode compatibility, and theme-aware design, it’s perfect for SaaS landing pages, dashboards, or enterprise websites. Just pass an array of features, and get a Fortune-500-ready grid out of the box.” ⚡ Why this works: Pain-point hook: “Stop burying your features in walls of text.” Promise: “Beautiful, responsive, accessible card grid.” Feature highlights: Icons, hover/focus, dark mode, shadcn theme. Credibility boost: “Fortune-500-ready” → makes it aspirational + premium. Use cases: SaaS landing pages, dashboards, enterprise websites.

• Slarivo Chip

  A compact, interactive element for displaying status, categories, or filters with optional icons and dismissible functionality.

• Slarivo Workout Card

  Workout Card Description: A container component to display a "Workout of the Day" session, complete with a title, duration, and an animated list of exercises.

• Slarivo Response

  Here is Response component

• Slarivo Dropdown Menu

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

• Slarivo Icon Set

  Icon Set Grid Clean, minimal collection of social and productivity icons arranged in a grid layout. Enhances navigation and quick access to platforms. Ideal for dashboards, portfolios, or landing pages.

• Slarivo Bar Visualizer

  Here is Bar Visualizer component

• Slarivo Accordion

  Here is Accordion component

• Slarivo Accordion

  Here is Accordion component

• Slarivo Accordion

  Here is Accordion component

• Slarivo Accordion

  Here is Accordion component

• Slarivo Accordion

  Here is Accordion component

• Slarivo Accordion

  Here is Accordion component

• Slarivo Shadcn Accordion

  Accordions are one of those components you don’t think much about until your page gets too long. When used well, they make content easier to scan, reduce visual noise, and help users focus on what they actually care about.

• Slarivo Heart Favorite

  Animated heart icon for like/favorite actions

• Slarivo Pixel Logo Grid

  A "trusted by" showcase with character. 14 brand logos arranged in a 5-column grid with a centered headline. Each card runs a canvas-driven pixel shimmer in the brand's actual signature color on hover , Slack purple, Stripe violet, Spotify green. Muted at rest, full color on touch. Tailwind 4 + shadcn tokens, light & dark mode out of the box.

• Slarivo Vertical accordion

  here is interactive vertical accordion

• Slarivo EmptyState – Beautiful, Accessible ‘No Data’ States

  “Stop leaving your users in the void. The EmptyState component gives you elegant, accessible, and responsive UI for no-data moments. With built-in icons, customizable CTAs, and dark mode support, it turns empty screens into clear guidance and actionable UX. Perfect for dashboards, search pages, and error states.” ⚡ Why this works: Problem framing: “Stop leaving users in the void” → instantly relatable. Solution promise: “Elegant, accessible, responsive UI for no-data moments.” Feature highlights: Icons, CTA, dark mode, flexible usage. Use cases: Dashboards, search results, error/config screens.

• Slarivo App Menu Bar

  The AppMenuBar component is a versatile, fully-featured navigation menu designed for modern web applications. It combines a clean, horizontal menubar layout with intuitive nested menus, allowing users to easily access projects, teams, calendar events, notifications, and files. Each menu item is enhanced with clear Lucide icons, and nested submenus are implemented using MenubarSub, ensuring that hover interactions are smooth and the parent menu stays open when navigating into submenus. The component supports multiple levels of navigation without closing unexpectedly, maintains consistent spacing between icons and text, and leverages subtle hover effects for better visual feedback. Its modular structure makes it highly customizable, making it ideal for dashboards, admin panels, or collaborative tools where organized and accessible

• Slarivo HeroUI Accordion

  HeroUI v3 Accordion — a collapsible content panel built with the real @heroui/react package. Default and surface variants, single or multiple expanded, controlled and default-expanded keys, custom indicator, disabled items, hidden separators, grouped FAQ layout and custom styles. Works in light and dark themes.

• Slarivo HeroUI Accordion

  HeroUI v3 Accordion — a collapsible content panel built with the real @heroui/react package. Default and surface variants, single or multiple expanded, controlled and default-expanded keys, custom indicator, disabled items, hidden separators, grouped FAQ layout and custom styles. Works in light and dark themes.

• Slarivo HeroUI Accordion

  HeroUI v3 Accordion — a collapsible content panel built with the real @heroui/react package. Default and surface variants, single or multiple expanded, controlled and default-expanded keys, custom indicator, disabled items, hidden separators, grouped FAQ layout and custom styles. Works in light and dark themes.

• Slarivo HeroUI Accordion

  HeroUI v3 Accordion — a collapsible content panel built with the real @heroui/react package. Default and surface variants, single or multiple expanded, controlled and default-expanded keys, custom indicator, disabled items, hidden separators, grouped FAQ layout and custom styles. Works in light and dark themes.

• Slarivo Statistics Card 12

  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 Button

  Here is Button component

• Slarivo Avatar Notifications

  This Avatar Notifications with Blinking Indicator component is a refined and modern way to handle user alerts. Instead of relying on plain badges, it introduces a subtle status dot at the top-right corner of the notification icon. When there are new messages, the dot blinks green to draw attention, and when there are none, it switches to a calm static gray state. The popover is neatly centered below the icon, keeping the interaction natural and balanced. Each notification is presented with an avatar, sender name, message, and timestamp, making it easy to recognize at a glance.

• Slarivo Activity Stats Card

  Activity Stats Card A visually polished card component to display a key metric with an icon, title, and subtext. It features a count-up animation for the primary metric and is built to be easily customized through props.

• Slarivo Empty

  A composable empty-state block for when there's no data to show — no results, no events, an empty folder, cleared filters. Ships Empty plus EmptyHeader, EmptyMedia (with a stacked 'icon' variant), EmptyTitle, EmptyDescription and EmptyContent, so you can drop in an icon or illustration, a title, supporting copy and call-to-action buttons. Dependency-free (just cva + cn).

• Slarivo Empty

  A composable empty-state block for when there's no data to show — no results, no events, an empty folder, cleared filters. Ships Empty plus EmptyHeader, EmptyMedia (with a stacked 'icon' variant), EmptyTitle, EmptyDescription and EmptyContent, so you can drop in an icon or illustration, a title, supporting copy and call-to-action buttons. Dependency-free (just cva + cn).

• Slarivo Empty

  A composable empty-state block for when there's no data to show — no results, no events, an empty folder, cleared filters. Ships Empty plus EmptyHeader, EmptyMedia (with a stacked 'icon' variant), EmptyTitle, EmptyDescription and EmptyContent, so you can drop in an icon or illustration, a title, supporting copy and call-to-action buttons. Dependency-free (just cva + cn).

• Slarivo How It Works Timeline

  A vertical timeline that stacks numbered onboarding steps down the page, each with a bordered icon circle, a connecting line, a bold title, and supporting copy.

• Slarivo Tag Input

  Here is tag input component

• Slarivo Hero

  Apple Glow Hero Gradient-glow typography highlighting innovation and intelligence. Perfect for impactful hero sections where bold visuals meet futuristic branding.

• Slarivo Admonition

  Here is Admonition component

• Slarivo Admonition

  Here is Admonition component

• Slarivo Hero Modern

  Here is Hero Modern component

• Slarivo Workout Summary Card

  Workout Summary Card This component is designed to display a detailed summary of a physical activity. It's built with props for easy customization of content, including the main activity, detailed stats, and header actions.

• Slarivo Accordion

  A vertically stacked set of interactive headings that each reveal an associated section of content.

• 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 Radio Group Card Vertical Demo

  Here is radio group card vertical demo component

• Slarivo Default

  Here is according default component

• 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 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 Breadcrumb

  A navigation aid that shows users their current location within a website or application hierarchy

• Slarivo Accordion

  Here is Accordion component

• Slarivo Accordion

  Here is Accordion component

• Slarivo Accordion

  Here is Accordion component

• Slarivo Accordion

  Here is Accordion component

• Slarivo Accordion

  Here is Accordion component

• Slarivo Accordion

  Here is Accordion component

• Slarivo Accordion

  Here is Accordion component

• Slarivo Url Input

  This component is a smart URL input field that enhances the user experience by automatically displaying the website’s favicon next to the entered address. As the user types or pastes a URL, the component detects the domain, fetches its favicon, and shows it inline inside the input box. If the favicon isn’t available, it falls back to a clean Lucide Globe icon, ensuring a polished look. By combining shadcn/ui inputs with dynamic favicon fetching, this component makes forms feel more interactive and visually informative.

• Slarivo Icon Label Subtext Button

  The IconLabelSubtextButton is a custom shadcn/ui-based React component designed for actions that need extra context beyond a single label. Unlike a standard button, it combines an icon, a primary label, and a secondary subtext in a compact and accessible design. This makes it ideal for use cases like downloads (with file size info), uploads (with format hints), or exports (with row counts). It supports multiple variants (default, outline, ghost) and sizes (sm, md, lg) to adapt to different layouts. The button also has built-in states for loading (with a spinner) and success (with a check icon), plus an optional badge for notifications and an optional tooltip for additional context. By leveraging Tailwind utilities and shadcn/ui primitives, this component stays consistent with modern UI patterns while being flexible, reusable, and user-friendly.

• Slarivo Card

  Card component from Interfaces DS — a flexible card shell with header, action, content, and footer slots.

• Slarivo Interfaces Button

  A versatile button component from Interfaces DS with six visual variants and six size combinations per variant.

• Slarivo Heart Button

  An interactive like button with animated heart icon, counter, and celebration effects when reaching maximum likes.

• Slarivo Button

  Here is animated interactive button component

• Slarivo Breadcrumb

  Here is Breadcrumb component

• Slarivo Smart Breadcrumb

  The SmartBreadcrumb component is a modern, fully configurable breadcrumb navigation solution for React projects. It supports dynamic routes, optional icons using Lucide React, ellipsis handling for long paths, and customizable separators, making it ideal for dashboards, analytics pages, or complex web apps. Each breadcrumb item can be a clickable link or the current page indicator, and the component includes smooth hover transitions and a clean, responsive design. With props to control icon visibility, maximum visible items, separator style, and overall styling, SmartBreadcrumb provides a flexible, reusable, and visually appealing way to guide users through multi-level navigation paths.

• Slarivo Accordion - Plus - Minus

  Accordion - Plus - Minus

• Slarivo Model Selector

  Here is Model Selector Component

• Slarivo Collapsible

  Here is Collapsible component

• Slarivo Breadcrumb

  Here is Breadcrumb component

• Slarivo Button

  A fluid button with primary, secondary, tertiary, and ghost variants. Supports sizes, leading/trailing icons, icon-only mode, and animated loading state.

• Slarivo Flexnative Tabs

  Composable tabs primitive from the Flexnative UI registry with 10 pattern variants: basic, underline (line), vertical, disabled, leading icons, count badges, in-card, preview/code switch, pricing toggle, and custom pill triggers. Built on Radix Tabs.

• Slarivo Flexnative Tabs

  Composable tabs primitive from the Flexnative UI registry with 10 pattern variants: basic, underline (line), vertical, disabled, leading icons, count badges, in-card, preview/code switch, pricing toggle, and custom pill triggers. Built on Radix Tabs.

• Slarivo Image Masking

  Here is image masking component

• Slarivo Infinity Brand

  Here is smooth component of inifiity brands

• Slarivo Radio Group

  Here is Radio Group component

• Slarivo Icon Pagination

  This Icon-Based Contextual Pagination component transforms traditional pagination into an interactive, visually intuitive experience. Instead of showing just numbers, each page is represented by an icon or mini preview, giving users a clear visual cue of the content. The active page is highlighted with scale, color, and border effects, making it instantly recognizable. For large numbers of pages, the component intelligently uses ellipsis (...) to keep the interface compact while still showing nearby pages and first/last pages. Hovering over an icon displays a tooltip, providing additional context for that page. Navigation is made easy with previous and next arrows, and a built-in onChange callback allows the parent app to track the current page. Fully light and dark theme compatible, this component is ideal for modern dashboards, creative apps, or any interface where a visual, intuitive pagination system enhances user experience.

• Slarivo tech-curosr

  stylish following tech cursor component for modern UIs, built with accessibility and animation in mind.

• Slarivo Accordion Space

  Here is Accordion component

• Slarivo Accordion Space

  Here is Accordion component

• Slarivo Folder Interaction

  An animated folder with interactive open/close mechanics.

• Slarivo Button

  A button component with 7 variants (default, outline, secondary, destructive, destructive-outline, ghost, link), 10 sizes (xs–xl + icon sizes), loading state with built-in spinner, and render-as-child support via asChild prop.

• Slarivo Button

  A button component with 7 variants (default, outline, secondary, destructive, destructive-outline, ghost, link), 10 sizes (xs–xl + icon sizes), loading state with built-in spinner, and render-as-child support via asChild prop.

• Slarivo Hover Brand Logo

  An interactive horizontal banner that animates the displayed brand name as you hover over its icon.

• Slarivo Flip Coin Button

  Here is flip coin button component

• Slarivo Pixel Image

  Here is Pixel Image components

• Slarivo Custom Alert

  This Custom Animated Alert component is a modern alternative to the standard ShadCN alert, designed with motion-based transitions and default props for usability. By default, it displays a title and description so developers don’t need to pass in content every time, making it immediately functional out of the box. Each alert variant—success, error, warning, or info—is represented with a clear Lucide icon, ensuring quick recognition. The alert appears with a smooth fade and scale animation, and users can dismiss it using the close button for a clean experience.

• Slarivo Folder Components

  A folder icon component with a frosted glass front flap, stacked document peek, and smooth spring hover animation that fans the papers open. Pick from 6 color themes via the prop. Drop it into any React or Next.js project and install directly via the shadcn CLI.

• Slarivo Orbiting Circles with Globe

  Full-display orbiting rings of integration icons circling a center particle globe rendered on canvas.

• Slarivo incident Chart

  here is incident component example

• Slarivo Menubar

  A horizontal menu bar component for navigation and actions.

• Slarivo Accordion

  Here is Accordion component

• Slarivo Button

  Here is Button component

• Slarivo Button

  Here is Button component

• Slarivo Pricing Card Triple

  Here is Pricing Card Triple component

• 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 HeroUI AlertDialog

  HeroUI AlertDialog for critical confirmations, with status icons, placements, backdrop variants, sizes, custom icons, dismiss behavior, controlled state and custom trigger examples. Uses the real @heroui/react component with bundled @heroui/styles CSS.

• Slarivo HeroUI AlertDialog

  HeroUI AlertDialog for critical confirmations, with status icons, placements, backdrop variants, sizes, custom icons, dismiss behavior, controlled state and custom trigger examples. Uses the real @heroui/react component with bundled @heroui/styles CSS.

• Slarivo HeroUI AlertDialog

  HeroUI AlertDialog for critical confirmations, with status icons, placements, backdrop variants, sizes, custom icons, dismiss behavior, controlled state and custom trigger examples. Uses the real @heroui/react component with bundled @heroui/styles CSS.

• Slarivo HeroUI AlertDialog

  HeroUI AlertDialog for critical confirmations, with status icons, placements, backdrop variants, sizes, custom icons, dismiss behavior, controlled state and custom trigger examples. Uses the real @heroui/react component with bundled @heroui/styles CSS.

• Slarivo HeroUI AlertDialog

  HeroUI AlertDialog for critical confirmations, with status icons, placements, backdrop variants, sizes, custom icons, dismiss behavior, controlled state and custom trigger examples. Uses the real @heroui/react component with bundled @heroui/styles CSS.

• Slarivo HeroUI AlertDialog

  HeroUI AlertDialog for critical confirmations, with status icons, placements, backdrop variants, sizes, custom icons, dismiss behavior, controlled state and custom trigger examples. Uses the real @heroui/react component with bundled @heroui/styles CSS.

• Slarivo HeroUI AlertDialog

  HeroUI AlertDialog for critical confirmations, with status icons, placements, backdrop variants, sizes, custom icons, dismiss behavior, controlled state and custom trigger examples. Uses the real @heroui/react component with bundled @heroui/styles CSS.

• Slarivo HeroUI AlertDialog

  HeroUI AlertDialog for critical confirmations, with status icons, placements, backdrop variants, sizes, custom icons, dismiss behavior, controlled state and custom trigger examples. Uses the real @heroui/react component with bundled @heroui/styles CSS.

• Slarivo HeroUI AlertDialog

  HeroUI AlertDialog for critical confirmations, with status icons, placements, backdrop variants, sizes, custom icons, dismiss behavior, controlled state and custom trigger examples. Uses the real @heroui/react component with bundled @heroui/styles CSS.

• Slarivo Chip

  Small informational badges for displaying labels, statuses, and categories.

• Slarivo Multi-Platform Download Grid

  A responsive download section with cards for every platform — iOS, Android, web, desktop, and browser extensions — so users can quickly grab the right app.

• Slarivo Project Selector

  Here is modern project selector component

• Slarivo Shift Card

  Here is Shift Card component

• Slarivo Toggle Group

  Here is Toggle Group component

• Slarivo Geode

  Here is Geode component

• Slarivo MacOS dock

  MacOS dock smooth animation you can use

• Slarivo Badge

  A badge component with 8 semantic variants (default, secondary, outline, destructive, error, info, success, warning), 3 sizes, icon support, and render prop for polymorphism. Built on Base UI's useRender hook.

• Slarivo Spinner

  A simple animated loading spinner built on the Lucide Loader2 icon.

• Slarivo Spinner

  A simple animated loading spinner built on the Lucide Loader2 icon.

• Slarivo Spinner

  A simple animated loading spinner built on the Lucide Loader2 icon.

• Slarivo Generic Tool

  Render a simple tool row for custom tools. Provide title/subtitle and toggle the shimmer with isPending. Optional left icon. Self-contained port from 21st.dev Agent Elements.

• Slarivo HeroUI Button

  HeroUI Button with primary, secondary, tertiary, outline, ghost, danger and danger-soft variants, three sizes (sm/md/lg), icons and icon-only mode, pending/loading state, full-width, disabled state, social sign-in buttons and a render-prop children API. Works in both light and dark themes.

• Slarivo HeroUI Button

  HeroUI Button with primary, secondary, tertiary, outline, ghost, danger and danger-soft variants, three sizes (sm/md/lg), icons and icon-only mode, pending/loading state, full-width, disabled state, social sign-in buttons and a render-prop children API. Works in both light and dark themes.

• Slarivo HeroUI Button

  HeroUI Button with primary, secondary, tertiary, outline, ghost, danger and danger-soft variants, three sizes (sm/md/lg), icons and icon-only mode, pending/loading state, full-width, disabled state, social sign-in buttons and a render-prop children API. Works in both light and dark themes.

• Slarivo HeroUI Button

  HeroUI Button with primary, secondary, tertiary, outline, ghost, danger and danger-soft variants, three sizes (sm/md/lg), icons and icon-only mode, pending/loading state, full-width, disabled state, social sign-in buttons and a render-prop children API. Works in both light and dark themes.

• Slarivo ButtonGroup

  common button group

• Slarivo Toggle Group

  Here is Toggle Group component

• Slarivo Boxy App Icons

  A React component built with Tailwind CSS that renders a grid of six interactive SVG icons representing popular applications (PayPal, GitLab, Instagram, Telegram, Spotify, and Discord). Each icon features a 3D hexagonal design with a smooth hover effect that triggers a vertical lift and color change specific to each app's branding (e.g., Instagram's gradient, Spotify's green). The component maintains the original SVG structure and styling from the provided code, ensuring visual consistency with hover transitions for an engaging user experience. Ideal for use in social media links, app showcases, or navigation menus.

• Slarivo Core Features

  highly reusable and is styled with Tailwind CSS for a modern look. For icons, I'm using lucide-react, a very popular and lightweight icon library. Everything is bundled into a single file so you can easily drop it into any React project.

• Slarivo Streak Badge

  Stats & KPIs component from the 21st.dev community.

• Slarivo Features Grid

  A responsive grid of product feature cards with icons, titles and descriptions for landing page sections.

• Slarivo Legends

  Here is legends component

• Slarivo Vertical Volume Slider with Mute Toggle

  A sleek vertical volume control component featuring a rotated range slider with smooth visual feedback. Includes an interactive volume icon that toggles between normal and muted states, automatically remembering the previous volume level. Perfect for media players, audio applications, or any interface requiring intuitive volume control with a modern vertical design.

• Slarivo Amazing Button Component

  Amazing Button Component

• Slarivo Menu

  Here is Context Menu component

• Slarivo Menu

  Here is Context Menu component

• Slarivo Menu

  Here is Context Menu component

• Slarivo Icon Grid Button

  The Button with Embedded Icon Grid is a shadcn/ui component designed for compact action menus or mini pickers, like emoji selectors or quick actions. When clicked, the button opens a grid of icons, each representing a distinct action that can be executed individually. The component supports configurable sizes (sm, md, lg) and ensures the grid closes automatically when clicking outside, maintaining a clean interface. Its design leverages shadcn/ui primitives for accessibility and consistent styling, making it highly reusable, visually appealing, and practical for dashboards, messaging interfaces, or any interface requiring quick, icon-based actions.

• Slarivo Textarea with icon

  Here is textarea with icon component

• Slarivo With Icon

  Here is notifications component

• Slarivo Input Bar

  Chat composer with auto-resizing textarea, attachment chips for staged images/files, send/stop button, and slot-based left/right toolbar actions for mode pickers, model selectors, etc. Self-contained port from 21st.dev Agent Elements.

• Slarivo One Button

  Buttons component from the 21st.dev community.

• Slarivo One Button

  Buttons component from the 21st.dev community.

• Slarivo One Button

  Buttons component from the 21st.dev community.

• Slarivo One Button

  Links component from the 21st.dev community.

• Slarivo One Button

  Buttons component from the 21st.dev community.

• Slarivo Flexnative Tabs

  Additional tab patterns from the Flexnative UI registry, companion to flexnative-tabs: an account/password settings form in a card, vertical icon-with-title triggers, and a compact icon-only view switcher. Same tabs primitive (no Radix dependency).

• 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 Listbox

  Here is Listbox component

• Slarivo Listbox

  Here is Listbox component

• Slarivo Listbox

  Here is Listbox component

• Slarivo Field Components

  Here is Field Components

• Slarivo Field Components

  Here is Field Components

• Slarivo Field Components

  Here is Field Components

• Slarivo Onboarding Card

  Product Onboarding Card This component provides a structured layout for a feature or step in a process, guiding the user with a clear title, description, and call-to-action.

• Slarivo Achievement badge

  This is achievement badge

• Slarivo BeUI Swipeable List

  Lists component from the 21st.dev community.

• Slarivo Reshaped Link

  Navigation link for use within text that respects line breaks and text flow. Works with both href and onClick (rendering an anchor or button tag), offers underline and plain variants, primary/positive/critical/warning/inherit colors, a disabled state and an optional icon for standalone usage.

• Slarivo Rich Navigation Menu

  A feature-rich navigation menu with multi-column dropdown panels, icons, and descriptions for building site headers.

• Slarivo File Upload

  A drag-and-drop file upload surface with animated accepted-file-type icons, an animated border beam, and a compact list of selected files.

• Slarivo NovaQRButton

  Ruixen Nova is a modern, glowing UI button component designed for sleek and high-performance web interfaces. With animated radial and conic gradients, this button brings a soft, dynamic glow effect that draws user attention without being distracting. Built using React and Tailwind CSS, it supports full customization including color, speed, and element type (as prop), making it highly flexible for any design system. Perfect for call-to-actions, modals, or hero sections, Ruixen Nova blends beauty with functionality and elevates your interface with a premium, futuristic feel.

• Slarivo Priority Selector

  Here is priority selector icon by indev ui

• Slarivo Sketchbook Reveal Card

  A scroll-triggered reveal card that hand-draws a wobbling SVG border, animates a lightbulb icon, text lines, and a button into view as you scroll.

• Slarivo Scroll Pagination

  This Icon-Based Contextual Pagination component transforms traditional pagination into an interactive, visually intuitive experience. Instead of showing just numbers, each page is represented by an icon or mini preview, giving users a clear visual cue of the content. The active page is highlighted with scale, color, and border effects, making it instantly recognizable. For large numbers of pages, the component intelligently uses ellipsis (...) to keep the interface compact while still showing nearby pages and first/last pages. Hovering over an icon displays a tooltip, providing additional context for that page. Navigation is made easy with previous and next arrows, and a built-in onChange callback allows the parent app to track the current page. Fully light and dark theme compatible, this component is ideal for modern dashboards, creative apps, or any interface where a visual, intuitive pagination system enhances user experience.

• Slarivo Card

  Interactive Card A visually engaging card component that features an icon group with hover animations, a step indicator, title, and description. It's designed to be reusable and adapt seamlessly to light and dark themes.

• Slarivo List Item

  An animated list item with smooth entrance and exit effects.

• Slarivo The Button Group

  This is a button group component

• Slarivo Card

  Flexible container component for grouping related content and actions.

• Slarivo Arc Preloader Hero

  A cycle of short declarative beats- Quiet, Sharp, Calm, Crafted - fades through a calm white surface, then a curved black curtain rises from below to reveal the landing. The boundary stays a single smooth arc the whole way up, never a flat slide.

• Slarivo BeUI Bouncy Accordion

  Accordions component from the 21st.dev community.

• Slarivo Reshaped Menu item

  Building block for menus and navigation that renders its main area from children and works with both href and onClick. Supports critical and neutral colors, selected and disabled states, three sizes, startSlot/endSlot composition, built-in icon support and a MenuItem.Aligner utility for aligning with surrounding text.

• Slarivo Reshaped Menu item

  Building block for menus and navigation that renders its main area from children and works with both href and onClick. Supports critical and neutral colors, selected and disabled states, three sizes, startSlot/endSlot composition, built-in icon support and a MenuItem.Aligner utility for aligning with surrounding text.

• 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 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 Reshaped Tabs

  Compound Tabs.List / Tabs.Item / Tabs.Panel component with matching ids, per-item icons and full composition control. Supports pills, pills-raised and borderless variants, row or column direction, three sizes, controlled and uncontrolled selection, equal-width items, flexible panel placement and native radio form submission via the name prop.

• Slarivo Reshaped Tabs

  Compound Tabs.List / Tabs.Item / Tabs.Panel component with matching ids, per-item icons and full composition control. Supports pills, pills-raised and borderless variants, row or column direction, three sizes, controlled and uncontrolled selection, equal-width items, flexible panel placement and native radio form submission via the name prop.

• Slarivo Animated File Tree Primitives

  Composable, unstyled file-tree primitives with an animated hover highlight, spring folder expand and collapse, and an animated open/close folder icon swap.

• Slarivo Alert

  Here is Alert component

• Slarivo Context Menu

  Here is Context Menu component

• Slarivo Context Menu

  Here is Context Menu component

• Slarivo Toggle Basic

  Here is Toggle component

• Slarivo Menu

  Here is Menu component

• Slarivo Menu

  Here is Menu component

• Slarivo Menu

  Here is Menu component

• Slarivo Checkbox

  Here is Checkbox component

• Slarivo Checkbox

  Here is Checkbox component

• Slarivo The Item one

  Here is The Item components

• Slarivo The Item one

  Here is The Item components

• Slarivo The Item one

  Here is The Item components

• Slarivo The Item one

  Here is The Item components

• Slarivo One Clipboard

  Buttons component from the 21st.dev community.

• Slarivo Flexnative Breadcrumb

  A Breadcrumb navigation from the Flexnative UI registry with 9 variants: basic links, leading home icon, custom slash separator, dot separator, ellipsis collapse, dropdown for hidden levels, responsive collapse, asChild custom link, and an end-of-trail page switcher. Built on Radix (Slot + dropdown-menu).

• Slarivo HeroUI Tag Group

  HeroUI v3 TagGroup — selectable tags with sizes, variants, disabled, selection modes, controlled state, error message, prefix, removable tags and list-data management.

• Slarivo Dynamic Button

  An animated button that smoothly resizes its width to fit new content and crossfades its label and icon whenever the action or state changes. Built with motion/react, it uses a spring width transition, a coordinated vertical fade for content swaps, and an active-press scale. Supports primary and secondary variants, an optional icon, content or full width, and respects reduced-motion preferences.

• Slarivo Floating Dock

  A macOS-style dock navigation where icons magnify on hover, with a separate collapsible menu on mobile.

• Slarivo Scroll Area File Explorer

  A scrollable file explorer list with type icons, size badges, sticky column headers, and a custom scroll area.

• Slarivo Shop Navigation Menu

  An e-commerce navigation menu with dropdown panels for collections and accessories, featuring featured imagery, category icons, and quick links.

• Slarivo Pill Breadcrumb

  A compact breadcrumb navigation with a rounded pill container, a home icon, and chevron separators for showing the current page path.

• Slarivo Underlined Navigation Menu

  A horizontal navigation menu with icons where the active and hovered items are highlighted by an animated underline.

• Slarivo Breadcrumb with Avatar

  A breadcrumb navigation trail whose items include small avatar images alongside the label, ideal for showing organization and user context in an app header.

• Slarivo Button Breadcrumb

  A breadcrumb navigation where each item is rendered as a button, with icons and the current page highlighted as a secondary button.

• Slarivo Access Restricted Empty State

  An empty state that tells users they lack permission to view content, with request-access and go-back actions.

• Slarivo Feature Hero

  A centered hero section with heading, subtext, and a grid of icon-based feature cards highlighting product capabilities.

• Slarivo File Tree

  A compound file tree with nested folder rows, extension-aware icons, keyboard navigation, hover highlighting, and single or multi-select for browsing file structures.

• Slarivo Dock Nav

  An Apple-style dock navigation bar with animated expanding icons and labels that appear on hover.

• Slarivo Comparison Slider with Highlights

  Split-layout before/after image comparison slider with a draggable divider and a sidebar of feature highlights and icons.

• Slarivo Invoice Empty State

  An empty state placed inside a data table that prompts users to create or import their first invoice.

• Slarivo How It Works Steps

  A three-step "how it works" section with numbered, icon-badged cards explaining a process from setup to results.

• Slarivo Analyzing Image

  An animated image-scanning loader that sweeps a highlight bar across a picture icon to indicate image analysis in progress.

• Slarivo Tool Calls Section

  An expandable section that shows AI agent tool usage as a collapsible timeline with stacked category icons and per-call inputs and outputs.

• Slarivo Update Available Banner

  An update notification banner with an icon, message, and Later and Update now action buttons that can be dismissed and reopened.

• Slarivo Steps Breadcrumb

  A breadcrumb navigation that displays a horizontal sequence of icon steps connected by short lines to show progress through a multi-stage flow.

• Slarivo Border Beam Button

  Animated border beam effect for React, sized for a compact button. The small preset wraps an icon button with a tight traveling glow around its border.

• Slarivo indevuiLabel

  Here is modern label by indevui

• Slarivo Toggle Button

  Here is Toggle Button component

• Slarivo Animated Vercel-like Button

  A clean, Vercel-inspired button component that shows an animated spinner when loading. Includes smooth state transitions and icon support.

• Slarivo Magic Keyboard Component

  A sleek, responsive keyboard component built with React and Tailwind CSS that replicates the look and feel of a physical keyboard. This component features Lucide React icons for arrow keys and maintains the original design's aesthetics with smooth hover and active states.

• Slarivo Benefit Showcases

  A lightweight, animated React section that presents a headline, subtitle, and a responsive grid of benefit cards with accessible SVG icons and staggered entrance animations.

• Slarivo Suggestions

  Quick prompt chips for AI chat input — text-only or with icons. Self-contained port from 21st.dev Agent Elements.

• Slarivo Mode Selector

  Standalone mode selector pill button with built-in popover. Bring your own icons or omit them; renders a non-interactive label when given a single mode. Self-contained port from 21st.dev Agent Elements.

• Slarivo Points Badge

  Badges component from the 21st.dev community.

• Slarivo Breadcrumbs

  This is a breadcrumbs component

• Slarivo Checkbox

  A selectable control for binary choices, form options, indeterminate states, labels, and validation messaging.

• Slarivo DateField

  Date input field with labels, descriptions, and validation built on React Aria DateField.

• Slarivo HeroUI Separator

  HeroUI v3 Separator — horizontal/vertical divider with content, variants, on-surface usage and a custom render-function API.

• Slarivo Feature Service Section

  A marketing services section pairing a headline and CTA with a grid of icon service cards, one highlighted as active.

• Slarivo Integrations Logo Row

  A horizontal row of overlapping circular integration logos with edge fade masks, a heading, and a call-to-action button.

• Slarivo Sidebar Light

  Lightweight sidebar navigation with nested items, icons, and active route highlighting.

• Slarivo Accordion

  A vertically stacked set of collapsible sections built on Base UI's Accordion primitive. Supports single or multiple open items, controlled or uncontrolled state, a custom trigger icon, smooth height-animated panels, and nesting. Ships Accordion, AccordionItem, AccordionTrigger and AccordionPanel (also exported as AccordionContent).

• Slarivo Accordion

  A vertically stacked set of collapsible sections built on Base UI's Accordion primitive. Supports single or multiple open items, controlled or uncontrolled state, a custom trigger icon, smooth height-animated panels, and nesting. Ships Accordion, AccordionItem, AccordionTrigger and AccordionPanel (also exported as AccordionContent).

• Slarivo indevuiTabs

  here is modern indev ui tabs component

• Slarivo Outline With Icon

  Here is outline with icon component.

• Slarivo Activity Dropdown

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

• Slarivo Verified Badge

  Badges component from the 21st.dev community.

• Slarivo BeUI Animated Badge

  Badges component from the 21st.dev community.

• Slarivo Tooltip

  Accessible tooltip built on React Aria, from HeroUI v3. Shows informative text when users hover over or focus an element. Supports an optional arrow indicator, four placements (top/bottom/left/right), custom open/close delays, controlled offset, a disabled state, custom non-button triggers (avatars, chips, icons), custom-styled content, and a render-prop escape hatch. Compound API: Tooltip / Tooltip.Trigger / Tooltip.Content / Tooltip.Arrow, with delay, closeDelay, trigger, isDisabled, showArrow, offset and placement props.

• Slarivo Astryx Button

  Button triggers actions with a clear visual hierarchy, from Meta's Astryx design system. Variants: primary, secondary, ghost, destructive; sizes sm/md/lg; disabled and loading states; leading icon and trailing endContent slots for badges or counts.

• Slarivo Astryx Breadcrumbs

  Breadcrumbs show the user's location in a hierarchy and let them navigate back up, from Meta's Astryx design system. Compose BreadcrumbItem children with links, icons, or onClick handlers; supports custom separators and a subtler supporting variant.

• Slarivo Astryx Breadcrumbs

  Breadcrumbs show the user's location in a hierarchy and let them navigate back up, from Meta's Astryx design system. Compose BreadcrumbItem children with links, icons, or onClick handlers; supports custom separators and a subtler supporting variant.

• Slarivo Astryx Toggle Button

  Astryx (Meta) ToggleButton — pressed/unpressed control with outline/solid icon swap: favorite, bookmark and notifications.

• Slarivo Reshaped Alert

  Prominent message related to the entire page or a specific area. Renders a title, an optional icon and a children slot; supports an actions slot, four status colors (critical, warning, positive, primary), inline layout direction and bleed.

• Slarivo Reshaped Alert

  Prominent message related to the entire page or a specific area. Renders a title, an optional icon and a children slot; supports an actions slot, four status colors (critical, warning, positive, primary), inline layout direction and bleed.

• Slarivo Reshaped Alert

  Prominent message related to the entire page or a specific area. Renders a title, an optional icon and a children slot; supports an actions slot, four status colors (critical, warning, positive, primary), inline layout direction and bleed.

• Slarivo Reshaped Breadcrumbs

  Renders Breadcrumbs.Item elements separated by chevron icons; an item without onClick or href becomes the active current page. Supports primary color, per-item icons and disabled state, collapsing long paths with defaultVisibleItems and an expand button, custom separators and custom item content.

• Slarivo Reshaped Breadcrumbs

  Renders Breadcrumbs.Item elements separated by chevron icons; an item without onClick or href becomes the active current page. Supports primary color, per-item icons and disabled state, collapsing long paths with defaultVisibleItems and an expand button, custom separators and custom item content.

• Slarivo Infinite Grid

  A draggable, infinitely-scrolling grid canvas that renders custom items in an expanding spiral with momentum-based panning and inertia.

• Slarivo Button

  A polymorphic button built on Base UI's useRender. Ships 8 visual variants (default, secondary, outline, ghost, link, destructive, destructive-outline) and a full set of sizes including icon sizes (xs–xl). Has a built-in loading state that overlays an inline spinner and hides the label, a render prop for rendering as any element or as a child, and focus-visible / pressed styling out of the box.

• Slarivo Button

  A polymorphic button built on Base UI's useRender. Ships 8 visual variants (default, secondary, outline, ghost, link, destructive, destructive-outline) and a full set of sizes including icon sizes (xs–xl). Has a built-in loading state that overlays an inline spinner and hides the label, a render prop for rendering as any element or as a child, and focus-visible / pressed styling out of the box.

• Slarivo Button

  A polymorphic button built on Base UI's useRender. Ships 8 visual variants (default, secondary, outline, ghost, link, destructive, destructive-outline) and a full set of sizes including icon sizes (xs–xl). Has a built-in loading state that overlays an inline spinner and hides the label, a render prop for rendering as any element or as a child, and focus-visible / pressed styling out of the box.

• Slarivo Button

  A polymorphic button built on Base UI's useRender. Ships 8 visual variants (default, secondary, outline, ghost, link, destructive, destructive-outline) and a full set of sizes including icon sizes (xs–xl). Has a built-in loading state that overlays an inline spinner and hides the label, a render prop for rendering as any element or as a child, and focus-visible / pressed styling out of the box.

• Slarivo Button

  A polymorphic button built on Base UI's useRender. Ships 8 visual variants (default, secondary, outline, ghost, link, destructive, destructive-outline) and a full set of sizes including icon sizes (xs–xl). Has a built-in loading state that overlays an inline spinner and hides the label, a render prop for rendering as any element or as a child, and focus-visible / pressed styling out of the box.

• Slarivo Section CTA

  A chip-style call-to-action link with a Motion-powered sliding label and rotating icon chips that animate on hover and focus.

• Slarivo Not Found Page

  Animated 404 not found page with a subtly moving icon, customizable copy, and reduced-motion support.

• Slarivo Animated Toggle

  A toggle switch with spring animations and default, morph, and icon variants for on/off states.

• Slarivo Scroll Loop Inception

  A scroll section where the page falls into itself: your landing renders inside its own browser window, and scrolling dives through level after level on an exponential zoom path that wraps seamlessly, so the descent never ends. The browser bars stay hidden until the dive starts, copy rotates per level, and it is one transform driven by scroll. Inspired by the inception scroll moment on the Forge landing page by ui8.ai (ui8.ai/forge), taken further into an endless loop.

• Slarivo IndevuiToggle

  Here is indevui toggle component

• Slarivo File Tree

  Collapsible file and folder tree with colored language-specific icons for 24+ file types, path highlighting, and configurable expand/collapse. Zero dependencies — just React and Tailwind. Available in jalco/ui - more variants: https://ui.justinlevine.me/docs/components/file-tree

• Slarivo Animated Highlight Text

  inline highlights whose SVG icons draw themselves in on hover, with a pointer cursor and an image tooltip per word.

• Slarivo Image Mouse Trail

  An interactive hero section that reveals a trail of images following the cursor as the mouse moves across the container.

• Slarivo Reshaped Toast

  Notification system driven by the useToast hook (show/hide) and ToastProvider for scoped render regions. Toasts support an icon, title, text and 1-2 actions, five colors (inverted default plus neutral/primary/positive/critical), configurable position, timeout and width, vertical action layout, a custom startSlot and fully custom children layouts for banners.

• Slarivo Reshaped Toast

  Notification system driven by the useToast hook (show/hide) and ToastProvider for scoped render regions. Toasts support an icon, title, text and 1-2 actions, five colors (inverted default plus neutral/primary/positive/critical), configurable position, timeout and width, vertical action layout, a custom startSlot and fully custom children layouts for banners.

• Slarivo Reshaped Toast

  Notification system driven by the useToast hook (show/hide) and ToastProvider for scoped render regions. Toasts support an icon, title, text and 1-2 actions, five colors (inverted default plus neutral/primary/positive/critical), configurable position, timeout and width, vertical action layout, a custom startSlot and fully custom children layouts for banners.

• Slarivo Menu Icon

  Animated hamburger menu icon that morphs its three lines into a close (X) shape on interaction.

• Slarivo Tag

  Rounded outlined tag with a colored icon, six built-in pastel color variants, size options, and an animated stacked group layout.

• Slarivo Reshaped Button

  Renders its children as button content and works with both href and onClick. Supports solid, outline, ghost and faded variants, neutral/primary/critical/positive colors, four sizes with fullWidth, loading and disabled states, start/end icons, icon-only mode, rounded shape, raised elevation and a Button.Group compound component.

• Slarivo Icon Breadcrumb

  A breadcrumb navigation trail that uses an icon for the home link instead of a text label.

• Slarivo Reshaped Toggle button

  Button that maintains a pressed/selected state, built on top of Button and defaulting to the outline variant. Inherits Button props (color, size, icons), supports a distinct selectedColor for the active state, controlled and uncontrolled modes via checked/defaultChecked, and a disabled flag.

• Slarivo Chevrons Up Down Icon

  Animated chevrons icon that morphs between up and down directions on trigger.

• Slarivo Theme Switch

  Light/dark theme toggle for the Dali Agents console at daliagents.com, with five switch variants used across the Dali Agents UI.

• Slarivo Theme Switch

  Light/dark theme toggle for the Dali Agents console at daliagents.com, with five switch variants used across the Dali Agents UI.

• Slarivo Basic Avatar

  Here is Avatar component

• Slarivo Base Badge

  A customizable badge component built with Base UI and useRender hook for composition.

• Slarivo Switch

  Here is Switch component

• Slarivo Switch

  Here is Switch component

• Slarivo Switch

  Here is Switch component

• Slarivo Switch

  Here is Switch component

• Slarivo Combobox

  Here is Combobox component

• Slarivo FloatButton

  Here is FloatButton component

• Slarivo Segment Group

  Here is Segment Group component

• Slarivo Base Avatar

  An easily stylable avatar component built with Base UI components.

• Slarivo Keyboard Input

  Display keyboard input that triggers an action.

• Slarivo Keyboard Input

  Display keyboard input that triggers an action.

• Slarivo Kbd

  Displays keyboard input or shortcut keys with customizable styles and sizes.

• Slarivo Kbd

  Displays keyboard input or shortcut keys with customizable styles and sizes.

• Slarivo Keyboard Shortcuts

  Display keyboard shortcuts with proper key symbols.

• 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 Reshaped Tabs

  Compound Tabs.List / Tabs.Item / Tabs.Panel component with matching ids, per-item icons and full composition control. Supports pills, pills-raised and borderless variants, row or column direction, three sizes, controlled and uncontrolled selection, equal-width items, flexible panel placement and native radio form submission via the name prop.

• Slarivo Reshaped Tabs

  Compound Tabs.List / Tabs.Item / Tabs.Panel component with matching ids, per-item icons and full composition control. Supports pills, pills-raised and borderless variants, row or column direction, three sizes, controlled and uncontrolled selection, equal-width items, flexible panel placement and native radio form submission via the name prop.

• Slarivo The Item one

  Here is The Item components

• Slarivo The Item one

  Here is The Item components

• Slarivo The Item one

  Here is The Item components

• Slarivo Toggle

  A two-state toggle button built on Base UI's Toggle primitive. Ships default and outline variants, three sizes (sm, default, lg), controlled or uncontrolled pressed state via pressed / defaultPressed, disabled styling, and springy pressed feedback. Works as a single button or grouped into a formatting toolbar. Re-exports TogglePrimitive for advanced composition.

• Slarivo Todo Tool

  Render task list with status icons (pending / in_progress / completed) and an optional shimmer 'Updating to-dos...' streaming state. Self-contained port from 21st.dev Agent Elements with inline SVG icons + shimmer keyframes.

• Slarivo HeroUI Switch

  HeroUI v3 Switch — toggle with sizes, label position, icons, descriptions, disabled/selected states, groups, render props and custom styles.

• Slarivo HeroUI Switch

  HeroUI v3 Switch — toggle with sizes, label position, icons, descriptions, disabled/selected states, groups, render props and custom styles.

• Slarivo HeroUI ListBox

  HeroUI v3 ListBox — an accessible, keyboard-navigable list of selectable options with single and multiple selection, sections with headers, per-item labels, descriptions, avatars and keyboard-shortcut hints, disabled items, custom selection indicators, controlled selection state, custom render functions, and windowed virtualization for large datasets. A thin re-export of the genuine @heroui/react package with @heroui/styles, so consumers install and render the real HeroUI primitive.

• Slarivo Reshaped Avatar

  Displays a masked image when src is passed, with initials or icon fallbacks when the image is not available. Supports color tokens with a faded variant, any numeric size with automatic typography scaling, and a squared shape.

• Slarivo Reshaped Badge

  Renders its children as text content for communicating an object's status. Comes in multiple colors with faded and outline variants, three sizes, a rounded notification-bubble mode, start/end icons, onClick/href interactions, a dismiss button and a Badge.Container compound component for corner positioning.

• Slarivo Astryx Toggle Button

  Astryx (Meta) ToggleButton — pressed/unpressed control with outline/solid icon swap: favorite, bookmark and notifications.

• Slarivo Astryx Toggle Button

  Astryx (Meta) ToggleButton — pressed/unpressed control with outline/solid icon swap: favorite, bookmark and notifications.

• Slarivo Astryx Toggle Button

  Astryx (Meta) ToggleButton — pressed/unpressed control with outline/solid icon swap: favorite, bookmark and notifications.

• Slarivo HeroUI Toggle Button

  HeroUI v3 ToggleButton — a two-state button that stays pressed/selected when toggled, for like, bookmark, mute and similar on/off actions. Supports default and ghost variants, sm/md/lg sizes, icon-only mode, controlled selection via isSelected/onChange, render-prop children for per-state content, and disabled state, with full React Aria toggle semantics and accessibility. A thin re-export of the genuine @heroui/react package with @heroui/styles, so consumers install and render the real HeroUI primitive.

• Slarivo ReUI Icon Tile

  ReUI Icon Tile with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Icon Tile

  ReUI Icon Tile with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Icon Stack

  ReUI Icon Stack with the first 6 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Icon Stack

  ReUI Icon Stack with the first 6 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Icon Stack

  ReUI Icon Stack with the first 6 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Icon Tile

  ReUI Icon Tile with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Icon Tile

  ReUI Icon Tile with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Icon Tile

  ReUI Icon Tile with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Icon Tile

  ReUI Icon Tile with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Icon Tile

  ReUI Icon Tile with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Icon Stack

  ReUI Icon Stack with the first 6 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Icon Stack

  ReUI Icon Stack with the first 6 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo AI Chat Input

  Interactive AI chat input component with animated diagnostics.

• Slarivo Documentation Link Card

  A compact card with a labeled icon header and a body containing descriptive text plus a link, ideal for documentation or resource callouts.

• Slarivo Icon Link Card

  A compact card with an icon badge, title, description and a call-to-action link, useful for summaries, feature highlights or navigation shortcuts.

• Slarivo Swap

  A component that swaps between two states with click or hover activation and fade, rotate, flip, or scale transitions.

• Slarivo Tabs With Icons

  A tabbed interface with an icon beside each tab label for switching between account settings sections like details, profile, password, and team.

• Slarivo Label with Icon Prefix

  A form field with a label that shows an icon before its text, paired with an accessible input.

• Slarivo Pagination with Icon and Label

  A pagination component with labeled Previous and Next controls using chevron icons.

• Slarivo Icon Only Badge

  Round icon-only badges shown across default, secondary, and outline variants.

• Slarivo Breadcrumb with Icons

  A breadcrumb navigation trail with a leading icon on each item to reinforce the section it points to.

• Slarivo Favicon Badge

  Circular website favicon badge with optional label text, spring entrance animation, and automatic favicon resolution from a domain or URL.

• Slarivo Prompt Bar

  Barre de prompt avec contour metallique anime et menus interactifs.

• Slarivo Elevate Navbar

  A Elevate Navbar component for communicating actions, objects, states, and visual meaning compactly, featuring icon, chart, form, click and selection states.

• Slarivo Tabs with Icons

  A tabs component with icon-labeled triggers switching between card panels for dashboard overview, analytics, and settings views.

• Slarivo Icon with Title Tabs

  A tabbed interface where each trigger stacks an icon above its label, with a distinct visual content panel below each tab.

• Slarivo Icon Only Tabs

  Compact icon-only tab triggers for switching between grid, list, and row content views.

• Slarivo Card Split Accordion

  An animated card split accordion that smoothly expands to reveal detailed information.

• Slarivo Swap

  A component that swaps between two states with click or hover activation and fade, rotate, flip, or scale transitions.

• Slarivo ReUI Icon Tile

  ReUI Icon Tile with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Icon Tile

  ReUI Icon Tile with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.