SLARIVO / TOGGLES

Toggles Components

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

• Slarivo Toggle

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

• Slarivo Toggle Switch

  Here is Toggle Switch component

• Slarivo Toggle

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

• Slarivo Toggle Button

  Here is Toggle Button component

• Slarivo Toggle Switch

  Toggle Switch Sleek, animated switch for toggling preferences or modes. Smooth transitions make it ideal for dark/light mode, settings, or feature activation.

• Slarivo Toggle Basic

  Here is Toggle component

• Slarivo Toggle Group

  A set of two-state buttons that can be toggled on or off..

• Slarivo Toggle

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

• Slarivo Toggle

  Here is Toggle component

• Slarivo Toggle Group

  A set of two-state buttons that can be toggled on or off.

• Slarivo Switch

  A control that allows the user to toggle between checked and not checked.

• Slarivo Theme Toggle

  Cool Toggles with framer motion animations that you can copy-paste into your apps.

• Slarivo Toggle

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

• Slarivo Toggle

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

• Slarivo Sky Toggle

  Playful toggle switch with a bright yellow sun over blue skies and fluffy clouds. Ideal for weather apps or light/dark mode themes.

• Slarivo Toggle Group

  A set of two-state buttons that can be toggled on or off.

• Slarivo Toggle Group

  A set of two-state buttons that can be toggled on or off.

• Slarivo animated-theme-toggle

  ToggleTheme is an interactive theme switcher for React/Next.js applications that allows users to toggle between light and dark modes. It features a smooth, animated icon transition between sun and moon using Framer Motion, enhancing the visual feedback.

• Slarivo Toggle Theme

  Animated Theme Switcher Component - Offer users seamless, visually engaging control over light, dark, and system themes. Built with next-themes and framer-motion, this component enhances UI personalization with elegant transitions.

• Slarivo theme

  Theme Toggle, Themed, Light, Dark & System

• Slarivo Animated Theme Toggler

  AnimatedThemeToggler — React Theme Toggle Button with Smooth Icon Transitions A lightweight React component that toggles between light and dark modes with animated sun and moon icons using Framer Motion. It detects and syncs the current theme state with the DOM, supports persistent theme preference via localStorage, and uses the new View Transitions API to animate smooth page background transitions based on the toggle button's position. Features: Clean React hooks-based logic Animated icon transitions using framer-motion Theme persistence and live updates View Transitions API clip-path reveal animation Tailwind CSS compatible styling with customizable classes Accessible button with ARIA labels Perfect for modern React/Next.js projects looking to add a polished theme toggle with smooth UI and excellent UX.

• Slarivo Switch [react-aria-components]

  A switch allows a user to turn a setting on or off. There is no native HTML element with switch styling. <input type="checkbox"> is the closest semantically, but isn't styled or exposed to assistive technology as a switch. Switch helps achieve accessible switches that can be styled as needed.

• Slarivo Switch

  Choose between a set of options.

• Slarivo Toolbar

  A text editor toolbar component with toggles

• Slarivo Pricing Module

  The PricingModule component is a fully configurable, responsive pricing section built with shadcn/ui, Lucide icons, and Tailwind CSS. It allows users to easily toggle between monthly and yearly billing, updating prices instantly for a seamless and dynamic experience. Designed for modern SaaS and product websites, it combines clarity, flexibility, and style — giving teams the ability to showcase multiple pricing tiers with detailed features and highlights. Each pricing card is modular, allowing you to define the name, description, icon, pricing options, user limits, and features through props. The component also includes a recommended plan highlight, making it easy to emphasize the most popular or valuable tier. With clean transitions, adaptive theming for light and dark modes, and accessible UI components, the PricingModule serves as a polished and production-ready pricing layout for any digital platform.

• Slarivo Liquid Toggle

  A smooth, fluid toggle switch with gooey animation effects

• Slarivo Swipe Animation

  Swipe Animation

• Slarivo Pricing Component

  A modern three-tier pricing table with monthly/annual toggle, dark/light mode support, and glass morphism design effects.

• Slarivo Cinematic Glow Toggle

  A hyper-realistic, dark-mode toggle switch featuring spring physics, glossy reflections, and a neon emerald glow state built with Framer Motion.

• Slarivo bluetooth key

  a keyboard key for bluetooth toggle

• Slarivo Theme Switcher

  Component that allows users to switch between light and dark themes.

• Slarivo Star Wars Toggle Switch

  BB-8 Themed Star Wars Toggle Switch Playful Star Wars-inspired toggle switch featuring BB-8 rolling across a scenic desert with twin suns. Smooth sliding animation mimics BB-8's movement. Perfect for sci-fi-themed apps, games, or websites requiring a creative dark/light mode toggle.

• Slarivo Animated Theme Toggle Button

  A modern React component that lets users switch between light and dark color modes with a visually engaging animated transition. This button supports both horizontal and vertical reveal animations using the View Transitions API for ultra-smooth theme changes. The icon updates instantly to show the current mode (sun for light, moon for dark), and the UI state is synchronized across the app to reflect user preference. Built with accessibility and performance in mind, the component works seamlessly in any Tailwind CSS + Framer Motion project, and is easy to customize for diagonal or cross-line transitions. Features: Animated theme transitions (horizontal, vertical, extendable for more) Sun & moon icon with Framer Motion effects Accessible and focus-friendly Synchronizes with global theme state Easy to plug into any React/Next.js app Perfect for clean, user-friendly dark mode toggles in modern web apps.

• Slarivo Toggle

  A collection of customizable toggle switch components built with React and Tailwind CSS. Features - Minimal and Orange toggle variants - Dark mode support - Smooth transitions and animations - Fully accessible with keyboard navigation - TypeScript support with proper types - Follows shadcn/ui component patterns Variants Minimal Toggle A simple toggle switch with green accent colors and dark mode support. Features a sliding circle indicator and smooth transitions. Orange Toggle A more elaborate toggle with orange accent colors and hover effects. Includes a floating animation and custom border styling.

• Slarivo Switch

  Here is Switch component

• Slarivo Bouncy Toggle

  Micro interaction clean toggle switch with bouncy effect and press effect.

• Slarivo switch

  this is switch

• Slarivo Material Design 3 Switch

  The definitive Google Material Design 3 (M3) Switch component for React & Tailwind CSS. This implementation captures the exact tactile feel of Android toggles using Spring Physics (overshoot animation) and Morphing Handle logic. It goes beyond visual replication by including a built-in Synthetic Audio Engine (Web Audio API) for real-time haptic feedback (mechanical thud or plastic click). Key Features: True M3 Physics: Custom cubic-bezier spring curves for the signature "overshoot" effect. Haptic Audio: Zero-dependency sound generation (no mp3 assets required). Smart Morphing: Handle changes size and shape based on state (Unchecked, Checked, Pressed). Advanced Customization: Support for Custom Icons (React Nodes), Destructive variants, and Compact sizes. Accessibility: Enforced 48px touch targets meeting WCAG AAA standards. A "Holy Grail" component for developers who want the premium feel of native mobile toggles without installing heavy UI libraries.

• Slarivo Toggle

  Displays a boolean value.

• Slarivo Switch

  A switch component made with Framer Motion and Tailwind CSS.

• Slarivo Credit Card

  An animated credit card component with reveal/hide functionality and smooth transitions. Features - Animated card reveal - Toggle visibility of sensitive information - Smooth spring animations - Multiple color variants - Perspective 3D effects - Masked card number display - Responsive design - Dark mode support

• Slarivo Toggle Group

  A set of two-state buttons that can be toggled on or off..

• Slarivo Toggle Group

  A set of two-state buttons that can be toggled on or off..

• Slarivo Toggle Group

  A set of two-state buttons that can be toggled on or off..

• Slarivo Switch

  Here is Switch component

• Slarivo Music Toggle btn

  Here is Music Toggle btn

• Slarivo Toggle Switch

  Here is Toggle Switch component

• Slarivo Switch

  Here is Switch component

• Slarivo Segmented Button Group

  The SegmentedButtonGroup component is a clean and flexible button group built entirely with shadcn UI. It visually splits a single button into multiple segments, allowing users to toggle between options like “Day / Week / Month” or priority levels. Each segment acts as an individual button, with the active segment highlighted while others remain outlined, creating a clear and intuitive selection interface. The component dynamically supports any number of segments, maintains rounded corners on the first and last buttons for a seamless appearance, and provides callbacks for handling user selection. Its simple yet elegant design makes it ideal for dashboards, filters, and interactive toggle controls in modern web applications.

• Slarivo Switch

  Toggle switch component built on Radix UI with smooth animation and focus states.

• Slarivo Animated Theme Toggle

  Smooth dark/light mode toggle with sun-to-moon SVG morph animation. Built with Framer Motion and next-themes integration.

• Slarivo Elastic Toggle Switch

  Toggle switch with elastic spring animation

• Slarivo Toggle

  Displays a boolean value.

• Slarivo Toggle

  Displays a boolean value.

• Slarivo Toggle

  Displays a boolean value.

• Slarivo Switch

  Toggle Switch Sleek, animated switch for toggling preferences or modes. Smooth transitions make it ideal for dark/light mode, settings, or feature activation.

• Slarivo Framer Motion Switch

  A smooth animated toggle switch built with Framer Motion. The thumb morphs and slides with a liquid animation effect.

• Slarivo Toggle Group

  A set of toggle buttons that work together as a single control, built on Base UI's ToggleGroup primitive. Supports single or multiple selection, horizontal and vertical orientation, default and outline variants with three sizes, and an optional ToggleGroupSeparator between items. The Toggle and Separator primitives are inlined so the component ships as a single self-contained file.

• Slarivo Toggle Group

  A set of toggle buttons that work together as a single control, built on Base UI's ToggleGroup primitive. Supports single or multiple selection, horizontal and vertical orientation, default and outline variants with three sizes, and an optional ToggleGroupSeparator between items. The Toggle and Separator primitives are inlined so the component ships as a single self-contained file.

• Slarivo Toggle Group

  A set of toggle buttons that work together as a single control, built on Base UI's ToggleGroup primitive. Supports single or multiple selection, horizontal and vertical orientation, default and outline variants with three sizes, and an optional ToggleGroupSeparator between items. The Toggle and Separator primitives are inlined so the component ships as a single self-contained file.

• Slarivo Toggle Group

  A set of toggle buttons that work together as a single control, built on Base UI's ToggleGroup primitive. Supports single or multiple selection, horizontal and vertical orientation, default and outline variants with three sizes, and an optional ToggleGroupSeparator between items. The Toggle and Separator primitives are inlined so the component ships as a single self-contained file.

• Slarivo Toggle Group

  A set of toggle buttons that work together as a single control, built on Base UI's ToggleGroup primitive. Supports single or multiple selection, horizontal and vertical orientation, default and outline variants with three sizes, and an optional ToggleGroupSeparator between items. The Toggle and Separator primitives are inlined so the component ships as a single self-contained file.

• Slarivo Toggle Group

  A set of toggle buttons that work together as a single control, built on Base UI's ToggleGroup primitive. Supports single or multiple selection, horizontal and vertical orientation, default and outline variants with three sizes, and an optional ToggleGroupSeparator between items. The Toggle and Separator primitives are inlined so the component ships as a single self-contained file.

• Slarivo Toggle Group

  A set of toggle buttons that work together as a single control, built on Base UI's ToggleGroup primitive. Supports single or multiple selection, horizontal and vertical orientation, default and outline variants with three sizes, and an optional ToggleGroupSeparator between items. The Toggle and Separator primitives are inlined so the component ships as a single self-contained file.

• Slarivo Toggle Group

  A set of toggle buttons that work together as a single control, built on Base UI's ToggleGroup primitive. Supports single or multiple selection, horizontal and vertical orientation, default and outline variants with three sizes, and an optional ToggleGroupSeparator between items. The Toggle and Separator primitives are inlined so the component ships as a single self-contained file.

• Slarivo Custom Colors

  Here is custom colors component

• Slarivo Shamayim Toggle Switch

  A celestial-themed toggle switch with a smooth animation and mirroring option. Credit: https://codepen.io/nicolasjesenberger/pen/NWOyxyO https://dribbble.com/shots/14326768-Kn-bz-Skeuomorphic-UI-Sample-for-Figma

• Slarivo Switch

  A toggle switch component built on Base UI Switch with animated thumb.

• Slarivo Switch

  A toggle switch component built on Base UI Switch with animated thumb.

• Slarivo Switch

  A toggle switch component built on Base UI Switch with animated thumb.

• Slarivo Switch

  A toggle switch component built on Base UI Switch with animated thumb.

• Slarivo Switch

  A toggle switch component built on Base UI Switch with animated thumb.

• Slarivo Switch

  A fluid animated switch with draggable thumb, smooth pill morphing on hover/press, and accessible keyboard support.

• Slarivo Switch

  A control that allows the user to toggle between checked and not checked with smooth animations and multiple variants.

• Slarivo Switch

  A fluid animated switch with draggable thumb, smooth pill morphing on hover/press, and accessible keyboard support.

• Slarivo Switch

  A fluid animated switch with draggable thumb, smooth pill morphing on hover/press, and accessible keyboard support.

• Slarivo With Description

  Here is description component

• Slarivo Toggle Group

  Here is Toggle Group component

• Slarivo Toggle Group

  Here is Toggle Group component

• Slarivo Toggle Group

  Here is Toggle Group component

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Pricing

  A dynamic pricing section with animated cards, confetti effects, and monthly/yearly toggle. Features: • Animated pricing cards using Framer Motion • Interactive monthly/yearly pricing toggle with a confetti effect • Responsive design using a mobile-first approach • Dynamic price updates with NumberFlow animations • Industry-specific content customization • Popular plan highlighting • Dark mode compatibility

• 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 Menu Toggle Icon

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

• Slarivo AI Input With Search

  A modern chat input component with a web search toggle and file upload functionality. This component features an animated search toggle, file attachment support, and smooth transitions. Features: • Animated search toggle button • File upload support • Auto-resizing textarea • Dark mode compatibility • Keyboard shortcuts • Framer Motion animations for enhanced user experience • Mobile responsiveness

• Slarivo Pricing

  a dynamic, responsive pricing table with animated monthly/yearly toggle, tooltips for feature descriptions, and an optional highlight effect for popular plans. Each card displays plan info, price, and a CTA button, making it perfect for showcasing product tiers in a modern SaaS landing page.

• Slarivo Animated Slideshow

  - Animated hover slider

• Slarivo Pricing Table

  A feature comparison pricing table component with animated pricing, interval switching, and plan selection. Features - Animated price transitions with NumberFlow - Monthly/Yearly interval toggle - Interactive plan selection - Feature comparison matrix - Responsive design - Dark mode support - Popular plan highlighting - Customizable styling

• Slarivo Theme Switch

  Here is Theme Switch component

• Slarivo Pricing Interaction

  A reusable pricing selector component that supports three plans (Free, Starter, Pro) with toggles between monthly and annual pricing, and highlights the selected plan dynamically.

• Slarivo Pricing Cards

  Here is Pricing Cards components

• Slarivo Pricing 2

  Pricing block with 2 cards and a switch for monthly/annual billing

• Slarivo Pricing

  A responsive, theme-adaptive pricing section with an interactive starfield background and a toggle for monthly/annual plans. Animated pricing cards with Framer Motion Interactive monthly/yearly pricing toggle with confetti effect Responsive design with mobile-first approach Dynamic price updates with NumberFlow animations Popular plan highlighting Dark mode compatible

• 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 Toggle Group

  Here is Toggle Group component

• Slarivo Theme Switch

  Theme Switch

• Slarivo Toggle Group

  Here is Toggle Group component

• Slarivo Toggle Group

  Here is Toggle Group component

• Slarivo Toggle Group

  Here is Toggle Group component

• Slarivo Privacy Settings Switches

  A privacy settings card listing labeled toggle switches with icons for controlling app permissions like location, camera, and tracking.

• Slarivo Video Call Controls Bar

  A video call control bar with mic, camera, and screen-share toggles that swap icons and turn red when disabled, plus a leave-call button and an animated in-call status indicator.

• Slarivo Toggle Group

  Here is Toggle Group component

• Slarivo Feature Toggle Switch Cards

  A responsive two-column grid of feature toggle cards, each with an icon, title, description, and a switch for enabling or disabling settings.

• Slarivo Collapsible

  Collapsible

• Slarivo Curtain Theme Toggle

  A high-end, interactive theme toggle component with a satisfying curtain-style transition animation. Supports standalone icon, full navigation app bar integration, and global Tailwind CSS dark mode syncing.

• Slarivo Active effect

  Here is active effect component

• Slarivo With label

  Here is label component

• Slarivo Theme Toggle

  Toggles component from the 21st.dev community.

• Slarivo Switch

  An accessible toggle switch built on Base UI's Switch primitive. Animated thumb with a springy press/scale interaction, two sizes (default and sm), controlled or uncontrolled usage via checked / defaultChecked, disabled state, and easy accent recoloring through the data-checked:* utilities. Re-exports SwitchPrimitive for advanced composition.

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

  Here is Switch component

• Slarivo 8-bit Toggle Group

  Pixel-art toggle group from 8bitcn.com — single or multiple selection with retro pixel borders on each item.

• Slarivo Mask View Transition Theme Toggle

  A smooth, premium theme switch animation using the View Transitions API and a custom GIF mask to transition between light and dark modes.

• Slarivo Toggle Switch Glass

  A glass-style toggle switch with smooth, tactile animations and light/dark mode support.

• Slarivo 8-bit Collapsible

  Pixel-art collapsible panel from 8bitcn.com — toggle to reveal/hide content with retro styling.

• Slarivo Toggle Group

  Toggles component from the 21st.dev community.

• Slarivo HeroUI Switch

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

• Slarivo Figma Vector Editor

  Figma's vector-editing chrome rebuilt for the web, in two parts. FigmaFrame draws the 'selected layer' look around any element: a thin accent border that animates open, four corner handles that pop in one by one, and a live W×H dimension badge tracked with a ResizeObserver. VectorEditor is a live SVG bezier point editor: every anchor is a draggable dot and every bezier handle a draggable diamond joined by a thin tangent arm — drag anchors to move, drag handles to reshape, hold Alt to break a tangent into a corner, with Figma-style mirroring modes (none / angle / angle-length). Includes a lossless SVG path parser/serializer (M/L/H/V/C/S/Q/T/Z, multi-subpath with holes) so you can drop in any path, edit it, and read the new d string back. Zero dependencies, pure pointer math through the live screen CTM.

• Slarivo Switch

  Compact Base UI switch with a sliding gradient track and spring-eased thumb, for toggling a single setting on or off.

• Slarivo Animated Toggle

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

• Slarivo IndevuiToggle

  Here is indevui toggle component

• Slarivo 8-bit Switch

  Pixel-art toggle switch from 8bitcn.com — hard-edge pixel border with on/off thumb states. Wraps Radix Switch primitive.

• Slarivo 8-bit Toggle

  Pixel-art toggle button from 8bitcn.com — pressed state with retro pixel border. Wraps shadcn/ui Toggle.

• Slarivo indevuiSwitch

  Here is switch component by indevui

• Slarivo One Toogle

  Toggles component from the 21st.dev community.

• Slarivo Menu Toggle

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

• Slarivo Accordion 05

  Accordion with hiding title

• Slarivo FAQ monocrhome

  Here is FAQ monochrome section

• Slarivo Cinematic Theme Switcher

  Videos component from the 21st.dev community.

• Slarivo lever-switch

  this a animated lever switch can be toggled on and off just like a lever or gear of a machine

• Slarivo argent-loop-infinite-slider

  A high-performance, seamless infinite slider designed for luxury retail and premium product discovery. This component utilizes a "frictionless" motion logic to create an unending stream of items, reflecting a sense of boundless opportunity and "smart-work" automation. The visual architecture is optimized for high-contrast "Silver" accents—aligning with a premium metal aesthetic—and smooth, heavy-easing transitions that command user attention without being intrusive.

• Slarivo Modern Pricing Table

  A clean, responsive pricing section with a segmented Monthly/Yearly toggle, animated price transitions, feature comparison table, and full dark mode support. Built with Tailwind, ShadCN UI, and Framer Motion — perfect for modern SaaS apps.

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

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

• Slarivo RuixenPricing_04

  This pricing component presents three tailored plans—Starter, Developer, and Enterprise—each designed to suit different project scales and team needs. It highlights key features like dark mode support, premium UI components, and priority support in a clear, structured format. Visually engaging and easy to scan, it's perfect for promoting tiered offerings in a modern SaaS or UI library product.

• Slarivo Custom Checkbox

  The CustomCheckbox component is a versatile and customizable checkbox element designed for React applications. It supports multiple styles, including default, gradient shadow, transformer, and animated variants. Each variant offers unique visual effects, such as gradient shadows or animations, to enhance user interaction. The component utilizes forwardRef for better integration with React's ref system and is styled using Tailwind CSS classes. This component is ideal for creating interactive and visually appealing checkbox elements in modern web applications.

• Slarivo Animated Menu

  Animated Menu bar with test transitions on hover easy transitions .

• Slarivo Theme Toggle

  Theme Toggle

• Slarivo Pricing Container

  Pricing Container

• Slarivo Flip Gallery

  Flip animation

• Slarivo Docks

  This minimal and responsive theme toggle component lets users effortlessly switch between Light and Dark modes while offering quick access to settings. Designed with accessibility and clarity in mind, it features clean icons, smooth interactions, and full keyboard support. Perfect for dashboards, web apps, or portfolios, it enhances user experience and gives instant control over personalization. Built with React and TailwindCSS, it's easy to integrate, style, and extend as needed.

• Slarivo Pricing Component

  Pricing Component with sleek design and better handling

• Slarivo Bookmark Icon Button

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

• Slarivo Animated Modal

  A modal with arc-shaped appear trajectory

• Slarivo Side Panel Video

  Here is Video Side Panel component

• Slarivo Theme Button

  Theme Button, Light, Dark, System

• Slarivo Pricing Table

  A comprehensive pricing section component featuring four customizable pricing tiers with support for monthly/annual billing toggles, credit selection dropdowns, feature lists with checkmarks and info icons, and an optional student discount banner. Perfect for SaaS products, subscription services, and tiered product offerings. Fully theme-compatible and responsive.

• Slarivo book slider

  click to scroll

• Slarivo Toggle

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

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

  Easily manage a boolean state with useToggle.

• Slarivo Aurora Pricing

  creative pricing section called "Aurora Pricing." It features three pricing cards with a subtle, animated aurora effect in the background. When you hover over a card, it lifts up, and its aurora becomes more vibrant. It also includes an interactive toggle to switch between monthly and yearly pricing, with the prices smoothly animating between the two states.

• Slarivo Meeting Scheduler

  Meeting Scheduler This component provides a comprehensive interface for scheduling events, featuring a responsive calendar for date range selection, time inputs, and additional options, all packaged in a clean, modern card layout.

• Slarivo Switch Button

  Here is Switch Button component

• Slarivo Glass Account Settings Card

  Account management card with subscription overview and billing actions in glassmorphic style

• Slarivo Pricing table

  pricing table

• Slarivo Toggle Switch

  Draggable mechanical switch with realistic physics, LED status glow, and cross-fade text labels.

• Slarivo Animated Theme Toggler

  Animated Theme Toggler: a sun↔moon morph toggle with spring physics and a soft switch-click sound. Sun rays shrink and rotate away while a masked circle swells into a crescent moon. Zero deps beyond motion/react.

• Slarivo Switch

  Toggle switch component built on Radix UI with smooth animation and focus states.

• Slarivo Toggle theme

  Here is toogle theme component.

• Slarivo Header 02

  Header with search and sheet and toggle

• Slarivo Interactive Pricing Component

  This React component displays pricing plans with features, allowing users to select a plan and billing cycle (monthly or annual). It addresses the need for a visually appealing and interactive way to present pricing information to potential customers. The component dynamically renders pricing cards, highlighting popular plans and showcasing features with checkmarks or 'X' icons. Users can toggle between monthly and annual billing, and optionally view a comparison table of all features across plans. The component leverages React's useState hook for managing component state (billing cycle and active tab). It uses a custom UI component library for styling and visual elements (Card, Button, Switch, Badge) and Lucide-React for icons. Data for pricing plans is passed as props, allowing for easy customization and reusability. The component includes a built-in feature comparison table (optional) that displays all features across plans, allowing for side-by-side comparison. Example scenarios include SaaS applications, e-commerce platforms, or any application requiring clear and interactive pricing presentation. Developers can easily customize the plans, billing options, and UI elements to match their specific design and branding requirements. The component is well-structured, using TypeScript for type safety and readability. The component handles different button variants for different plans, adding flexibility to the design. The annual discount is also dynamically calculated and displayed.

• Slarivo Bento Pricing Component

  A responsive pricing section displaying multiple subscription plans in a bento-style grid layout, featuring a monthly/yearly billing toggle, highlighted "most popular" plan, and custom grid spanning for cards.

• Slarivo Popover

  A popover is an overlay element positioned relative to a trigger.

• Slarivo Day Picker

  An animated day picker calendar component.

• Slarivo Pricing Card

  Simple Pricing Card

• Slarivo Battery Indicator

  Interactive battery component with themes and animations

• Slarivo Status Cycle Button

  A cycle status button component made with framer motion and tailwind css.

• Slarivo Animated Toggle Layout Container

  - Container toggling and animating between multiple layouts, useful for your ecommerce store and large lists to enhance user experience.

• Slarivo Skeuomorphism in the Dark Button

  Here is CodePen Home Skeuomorphism in the Dark component

• Slarivo Collapsible

  Here is Collapsible component

• Slarivo Dashboard Configuration

  Dashboard Configuration Toggle widget visibility and manage your dashboard layout settings.

• Slarivo Toggle

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

• Slarivo Toggle

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

• Slarivo Toggle

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

• Slarivo Toggle

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

• Slarivo Toggle

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

• Slarivo Toggle

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

• Slarivo Premium Pricing

  Highlights the premium nature - "enterprise-grade" and "premium" positioning Emphasizes the unique visual appeal - "transforms ordinary pricing tables into an immersive visual experience" Lists key technologies - Framer Motion, glassmorphism design Mentions specific features - gradient animations, floating particles, interactive effects Identifies target use cases - SaaS platforms, subscription services, premium products Addresses practical benefits - responsive design, cross-device compatibility Uses compelling language - "stunning", "immersive", "seamlessly" This enhanced description will help potential users: Quickly understand the component's premium positioning Visualize the advanced animations and effects Identify if it fits their specific use case Understand the technical capabilities Feel confident about the quality and professionalism The description is now more likely to attract users looking for high-quality, animated pricing components for their premium applications. features : "Three pricing tiers (Starter, Professional, Enterprise)", "Monthly/Yearly billing toggle with savings display", "Animated gradient backgrounds with moving particles", "Interactive hover effects with scale and glow animations", "Responsive design for all screen sizes", "Glassmorphism design with backdrop blur", "Popular plan highlighting with badges", "Feature lists with animated check icons", "Call-to-action buttons with hover animations", "Additional features showcase section", "FAQ/CTA section with animated background"

• Slarivo Tilt Card

  Interactive 3D tilt card with perspective hover effect and spotlight.

• Slarivo Toggle nav

  here is toggle nav component

• Slarivo Scheduler

  Here is notification scheduler component

• Slarivo Collapsible

  here is collapsible demo by indev ui

• Slarivo ChecklistButton

  The ChecklistButton component is a highly flexible and reusable UI element built with shadcn UI. It allows users to mark actions as complete with a smooth label-to-check animation powered by Framer Motion. Designed for configurability, it supports custom labels, icons, done states, and even resettable toggling, making it useful for task management, approvals, subscriptions, or interactive workflows. Developers can easily attach callbacks (onDone) for backend actions, while its consistent styling ensures it blends seamlessly into any shadcn-based project. Combined with the demo page showcasing multiple configurations, this component provides both utility and polish, making it a valuable addition to modern web applications.

• Slarivo Bookmark Toggle List

  A list of article rows where each row has a bookmark toggle button, with a live count of how many items are saved.

• 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 With Icon

  Here is notifications component

• Slarivo Reshaped Switch

  Toggle form field that takes a name and an optional children label, with an onChange handler. Supports a reversed label position, three sizes, controlled and uncontrolled modes via checked/defaultChecked, and a disabled state.

• Slarivo Pricing Section with Frequency Toggle

  Interactive three-tier pricing section with a monthly/yearly toggle, animated price numbers, and a highlighted popular plan.

• Slarivo Grouped Notification Toggles

  A notification settings card that groups toggle switches by category like security, social, and billing.

• Slarivo Notification Channel Matrix

  A settings card with a switch matrix table for toggling each notification type across email, push, and SMS channels.

• Slarivo Beui Switch

  This is Switch component.

• Slarivo pricing section

  Pricing Sections component from the 21st.dev community.

• Slarivo Toggle Basic

  Here is Toggle component

• Slarivo Toggle Basic

  Here is Toggle component

• Slarivo Toggle Basic

  Here is Toggle component

• 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 Growth Plans

  A three-tier SaaS pricing section with a monthly/yearly billing toggle and animated prices.

• Slarivo Settings Page Skeleton

  Animated loading skeleton placeholder for a settings page with a header, action button, tab row, and grouped toggle/list rows.

• Slarivo Role Filter Chips

  Role filter chips built from toggle buttons, each with a count badge and a live running total of matching results.

• Slarivo Formatting Toolbar

  A rich-text formatting toolbar with toggle buttons that applies strikethrough, inline code, blockquote, and link styles with a live markdown preview.

• Slarivo Toggle Button

  Here is Toggle Button component

• Slarivo Impossible Checkbox

  Here is Impossible Checkbox component

• Slarivo Apple play button

  Here is Apple play button component

• Slarivo BeUI Theme Toggle

  Buttons component from the 21st.dev community.

• Slarivo Theme Switcher

  Toggles component from the 21st.dev community.

• Slarivo Theme toggle buttons

  Theme toggle buttons

• Slarivo Theme Switcher

  Component that allows users to switch between light and dark themes.

• Slarivo Theme Switcher

  Here is Theme Switcher component

• Slarivo Vertical Theme Wipe Toggle

  VerticalThemeWipeToggle — Top/Bottom Reveal Animated Theme Switch A modern React theme toggle button offering a visually dramatic full-page transition using the View Transitions API. Seamlessly reveal your dark or light mode with a vertical wipe animation that moves from either the top or bottom of the screen, creating a cinematic experience for users. No theme context or extra dependencies needed—this pure DOM implementation plugs into any Tailwind or Framer Motion app with ease. Features: Directional vertical animation: top→bottom or bottom→top with a simple prop Hardware-accelerated, native-page transitions (View Transitions API) Compatible with React, Tailwind CSS, and motion UI No next-themes or global context required—just DOM and localStorage Accessible, fast, and flicker-free Easily extendable for line/diagonal/horizontal effects Use Cases: Perfect for dashboards, admin panels, landing pages, or any web app wanting a premium-feeling, full-screen theme swap effect.

• Slarivo Horizontal Theme Wipe Toggle

  HorizontalThemeWipeToggle — Animated React Theme Switch Button with Vertical Line Reveal Switch between light and dark modes with a visually striking page-wide vertical wipe animation using the native View Transitions API. This button supports both left-to-right and right-to-left transitions for a buttery-smooth, full-page theme swap. Built for React with zero context dependencies and perfect integration with Tailwind and Framer Motion for all icon/label UI.

• Slarivo Theme toggle buttons

  Here is Theme toggle buttons

• Slarivo Hotel Card UI Component

  This code implements a reusable UI component for displaying hotel information, along with a theme toggle. The `HotelCard` component takes hotel data as props (image URL, hotel name, location, rating, etc.) and renders a visually appealing card. It leverages styling and layout features to create a clean and responsive design. The component uses image placeholders, handles different screen sizes responsively, and includes interactive elements like hover effects. A theme toggle button dynamically switches between light and dark themes using the `next-themes` library. The `HotelCard` component is designed to be easily integrated into any application that displays hotel listings or travel information. The application renders a list of sample hotel cards using data stored in an array. It uses a functional component approach and JSX for UI rendering. The `useTheme` hook from `next-themes` manages the theme state. Lucide React provides the icons. This is useful for showcasing hotels in travel websites, travel apps, or hotel booking platforms. It could also be integrated with a backend system to fetch hotel data dynamically.

• Slarivo ReUI Switch

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

• Slarivo Cinematic Studio Switch

  A hyper-realistic toggle component featuring volumetric god rays, skeuomorphic metal textures, and spring-based physics.

• Slarivo Icon Swap

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

• Slarivo Theme Switcher Dropdown

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

• Slarivo Theme Switch

  Here is Theme Switch component

• Slarivo Theme Switch

  Here is Theme Switch component

• Slarivo Switch

  Choose between a set of options.

• Slarivo Switch

  Choose between a set of options.

• Slarivo Switch

  Choose between a set of options.

• Slarivo Switch

  Choose between a set of options.

• Slarivo Light Pull Theme Switcher

  Pull down to change theme

• Slarivo Base Button

  Here is Button component

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

  Here is Switch component

• Slarivo Switch

  Here is Switch component

• Slarivo Switch

  Here is Switch component

• Slarivo Industrial Switch

  A heavy-duty, drag-and-toggle industrial breaker switch featuring spring physics, status LEDs, and metallic grip states.

• Slarivo Switch

  A Switch component for switching settings, modes, preferences, and binary states, featuring toggle, form control, form-control, settings.

• Slarivo Switch

  A Switch component for switching settings, modes, preferences, and binary states, featuring toggle, form control, form-control, control.

• Slarivo Switch

  A Switch component for switching settings, modes, preferences, and binary states, featuring toggle, form control, form-control, control.

• Slarivo Switch

  A Switch component for switching settings, modes, preferences, and binary states, featuring toggle, form control, form-control, settings.

• Slarivo Switch

  A Switch component for switching settings, modes, preferences, and binary states, featuring toggle, form control, form-control, shadcn/ui.

• Slarivo Switch

  A Switch component for switching settings, modes, preferences, and binary states, featuring toggle, card, integration, settings.

• Slarivo Switch

  A Switch component for switching settings, modes, preferences, and binary states, featuring toggle, form control, form-control, shadcn/ui.

• Slarivo Switch

  A Switch component for switching settings, modes, preferences, and binary states, featuring toggle, card, settings, label.

• Slarivo Switch

  A Switch component for switching settings, modes, preferences, and binary states, featuring toggle, form control, form-control, label.

• Slarivo Switch

  A Switch component for switching settings, modes, preferences, and binary states, featuring toggle, label, form control, form-control.

• Slarivo Switch

  A Switch component for switching settings, modes, preferences, and binary states, featuring toggle, form control, form-control, shadcn/ui.

• Slarivo Switch

  A Switch component for switching settings, modes, preferences, and binary states, featuring toggle, form control, form-control, shadcn/ui.

• Slarivo Login Card

  A Login Card component for switching settings, modes, preferences, and binary states, featuring settings, toggle, slider, card.

• Slarivo Login Card

  A Login Card component for switching settings, modes, preferences, and binary states, featuring theme toggle, theme-toggle, toggle, card.

• Slarivo FloatButton

  A FloatButton component for calls to action, controls, and interactive commands, featuring floating action button, floating-action-button, button group, button-group.

• Slarivo Toggle Switch

  A Toggle Switch component for switching settings, modes, preferences, and binary states, featuring toggle, form control, form-control, label.

• Slarivo Toggle Switch

  A Toggle Switch component for switching settings, modes, preferences, and binary states, featuring toggle, form control, form-control, checkbox.

• Slarivo Switch

  A Switch component for switching settings, modes, preferences, and binary states, featuring toggle, form control, form-control, control.

• Slarivo Switch

  A Switch component for switching settings, modes, preferences, and binary states, featuring toggle, form control, form-control, accessibility.

• Slarivo Switch

  A fluid animated switch with draggable thumb, smooth pill morphing on hover/press, and accessible keyboard support.

• Slarivo Toolbar

  A container for grouping related actions into a single keyboard-navigable bar, built on Base UI's Toolbar primitive. Ships Toolbar, ToolbarButton, ToolbarLink, ToolbarInput, ToolbarGroup and ToolbarSeparator. Each part uses the render prop so it can…

• Slarivo The Dialog

  A The Dialog component for switching settings, modes, preferences, and binary states, featuring settings, toggle, notification, shadcn/ui.

• Slarivo The Item one

  A The Item one component for switching settings, modes, preferences, and binary states, featuring toggle, list, clean, shadcn/ui.

• Slarivo Floating Panel

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

• Slarivo Toggle Group

  A Toggle Group component for switching settings, modes, preferences, and binary states, featuring toggle group, toggle-group, segmented control, segmented-control.

• Slarivo Toggle Group

  A Toggle Group component for switching settings, modes, preferences, and binary states, featuring toggle group, toggle-group, toggle, button group.

• Slarivo Navbar

  A Navbar component for helping users move through pages, sections, and application areas, featuring navbar, search, theme toggle, theme-toggle.

• Slarivo Switch

  An accessible toggle switch built on Base UI's Switch primitive. Animated thumb with a springy press/scale interaction, two sizes (default and sm), controlled or uncontrolled usage via checked / defaultChecked, disabled state, and easy accent recoloring…

• Slarivo Switch

  An accessible toggle switch built on Base UI's Switch primitive. Animated thumb with a springy press/scale interaction, two sizes (default and sm), controlled or uncontrolled usage via checked / defaultChecked, disabled state, and easy accent recoloring…

• Slarivo Switch

  An accessible toggle switch built on Base UI's Switch primitive. Animated thumb with a springy press/scale interaction, two sizes (default and sm), controlled or uncontrolled usage via checked / defaultChecked, disabled state, and easy accent recoloring…

• Slarivo Switch

  An accessible toggle switch built on Base UI's Switch primitive. Animated thumb with a springy press/scale interaction, two sizes (default and sm), controlled or uncontrolled usage via checked / defaultChecked, disabled state, and easy accent recoloring…

• Slarivo Toggle Button

  A Toggle Button component for switching settings, modes, preferences, and binary states, featuring toggle button, toggle-button, toggle, icon button.

• Slarivo Toggle Switch Glass

  A glass-style toggle switch with smooth, tactile animations and light/dark mode support.

• 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,…

• Slarivo Switch

  A Switch component for switching settings, modes, preferences, and binary states, featuring toggle, list, form control, form-control.

• Slarivo Switch

  A Switch component for switching settings, modes, preferences, and binary states, featuring toggle, form control, form-control, gradient.

• Slarivo Toggle

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

• Slarivo Reshaped Switch

  Toggle form field that takes a name and an optional children label, with an onChange handler. Supports a reversed label position, three sizes, controlled and uncontrolled modes via checked/defaultChecked, and a disabled state.

• Slarivo Reshaped Switch

  Toggle form field that takes a name and an optional children label, with an onChange handler. Supports a reversed label position, three sizes, controlled and uncontrolled modes via checked/defaultChecked, and a disabled state.

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

• Slarivo Switch

  An accessible toggle switch built on Base UI's Switch primitive. Animated thumb with a springy press/scale interaction, two sizes (default and sm), controlled or uncontrolled usage via checked / defaultChecked, disabled state, and easy accent recoloring…

• Slarivo Switch

  An accessible toggle switch built on Base UI's Switch primitive. Animated thumb with a springy press/scale interaction, two sizes (default and sm), controlled or uncontrolled usage via checked / defaultChecked, disabled state, and easy accent recoloring…

• Slarivo Switch

  An accessible toggle switch built on Base UI's Switch primitive. Animated thumb with a springy press/scale interaction, two sizes (default and sm), controlled or uncontrolled usage via checked / defaultChecked, disabled state, and easy accent recoloring…

• Slarivo ReUI Switch

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

• Slarivo ReUI Switch

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

• Slarivo ReUI Switch

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

• Slarivo ReUI Switch

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

• Slarivo ReUI Switch

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

• Slarivo ReUI Switch

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

• Slarivo ReUI Switch

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

• Slarivo ReUI Switch

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

• Slarivo ReUI Switch

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

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

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

• Slarivo Skeuomorphic Toggle

  A realistic, glossy pill-shaped on/off switch with inset shadows and a sliding label, rendered as a self-contained sandboxed widget for settings panels and dashboards.

• Slarivo Notification Settings Card

  A settings card with horizontal field rows, each toggled by a switch, for managing notification preferences.

• Slarivo Sliding Icon Theme Switch

  A theme toggle switch where a single sun or moon icon slides with the thumb, showing only the currently active mode.

• Slarivo Swap

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

• Slarivo Switch with Label and Description

  A toggle switch inside a bordered card with a label, sublabel, and short description, with the border highlighting when checked.

• Slarivo Social Selector

  An animated social platform selector that toggles between X, Bluesky, and Threads with a sliding pill and blur-transitioned handle link.

• Slarivo Field with Switch Toggle

  A form field row pairing a label and description with a switch toggle, ideal for settings and preference toggles.

• Slarivo Checkbox

  A styled checkbox control for forms, built on Base UI, supporting checked, unchecked, and indeterminate states.

• Slarivo Vertical Toggle Group

  A vertically oriented toggle group with outline variant for text formatting controls like bold, italic and underline.

• Slarivo View Mode Toggle Group

  A segmented toggle group for switching between list, grid, and kanban view modes.

• Slarivo Outline Toggle Group

  A pre-composed toggle group with outlined, connected buttons for bold, italic and underline text-formatting controls.

• Slarivo Zoom Level Toggle Group

  A toggle group for selecting a zoom percentage that scales a live content preview in real time.

• Slarivo Outline Toggle Buttons

  Toggle buttons with an outline variant for toggling text formatting options like bold and italic.

• Slarivo Task Priority Toggle List

  A task list where each item has a completion toggle and per-task priority flag toggles.

• Slarivo Server Settings Toggle

  A vertical list of server setting rows with toggle buttons that swap their icon and status color when switched on or off.

• Slarivo Layout animation

  A Motion for React toggle that springs its handle between ends using layout animation, from the official Motion examples catalog.

• Slarivo Base Collapsible

  An animated collapsible panel that smoothly expands and collapses its content with height and fade transitions when its trigger button is toggled.

• Slarivo Volume Control Slider

  A volume slider with a mute toggle button and a live value readout that switches icons based on level.

• Slarivo Modern Volume Slider

  A volume slider with a bold rounded track, a thin vertical thumb, and an animated percentage readout for audio and range controls.

• Slarivo Temperature Control Slider

  A temperature control slider with cool, comfortable, and warm zones, color-coded value display, and a hover preview range.

• Slarivo Segmented Control Tabs

  A compact segmented-control style tab switcher with icons that toggles between daily, weekly, monthly and yearly stat cards.

• Slarivo Notification Preferences Matrix

  A notification preferences table with event rows and email, push, and SMS channel columns of checkboxes plus a save button.

• Slarivo Card Style Checkbox

  A checkbox wrapped in a bordered card with a title and description, ideal for settings toggles and opt-in options that highlight when selected.

• Slarivo Bjork Tabs

  A styled tabbed panel switcher for toggling between two or more related content views in the same space.

• Slarivo Toggleable Add-on Pricing

  A pricing section where users toggle add-on modules on and off and watch the animated total price update in real-time.

• Slarivo Pricing With Usage Slider

  A two-column pricing section with a display-count toggle group that animates the price digits and lists core features plus add-on pricing.

• Slarivo Toggle Pricing Cards

  An animated pricing section where visitors switch between plan tiers with a segmented toggle and watch the plan card's price, description, and feature list transition smoothly.

• Slarivo Animated Upvote Toggle

  A Reddit/Product Hunt style upvote toggle button with a bouncing arrow icon and a sliding digit counter animation.

• Slarivo Follow Button Group

  A follow/unfollow toggle button paired with a live avatar group and animated follower count, for social profile headers and creator cards.

• Slarivo Blind Pull Toggle

  A dark/light mode toggle styled as a window-blind pull cord, where clicking swings a cord to flip venetian-blind slats revealing the sun or moon icon.

• Slarivo Notification Settings Field

  A notification preferences list that pairs a title, description and toggle switch for each setting, separated by dividers, for account or app settings pages.

• Slarivo Icon Only Tabs

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

• Slarivo Swap

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

• Slarivo Circular Progress

  A composable circular progress indicator with track, range, and value text parts, supporting determinate and indeterminate states.

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