SLARIVO / BUTTONS

Buttons Components

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

• Slarivo Button

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

• Slarivo Particle Button

  A little particle animation on submit

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Button

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

• Slarivo Button

  Button

• Slarivo Button

  Neobrutalism-styled button component.

• Slarivo Action Button

  A versatile button component with built-in loading state and smooth transitions for handling asynchronous actions.

• Slarivo Sneaky Button

  A playful button with a sliding arrow animation that sneaks in from the side. Perfect for adding fun interactions to navigation, menus, or call-to-actions while keeping a clean and modern design.

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

  Shiny Button with shadow gradiant

• Slarivo Button

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

• Slarivo Button

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

• 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 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 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 Liquid Glass Button

  Liquid Glass Button

• Slarivo Glass Button

  Glass Button

• Slarivo Button

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

• Slarivo Star button

  The StarButton is a visually striking button that features a radial light animation with a starry background.

• Slarivo Button

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

• Slarivo Button

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

• Slarivo Button

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

• Slarivo Magnetic Button

  A Magnetic Button is a UI component designed to enhance user interaction. When a user's cursor or touch input approaches the button, it subtly moves towards the user, simulating the effect of magnetic attraction. This interaction makes the button more enticing to click and adds a dynamic and engaging element to the user experience. This example was made with Tailwind CSS and Framer Motion.

• Slarivo Collapsible

  An interactive component which expands/collapses a panel.

• Slarivo Button [react-aria-components]

  A button allows a user to perform an action, with mouse, touch, and keyboard interactions. On the surface, building a custom styled button seems simple. However, there are many cross browser inconsistencies in interactions and accessibility features to consider. Button handles all of these interactions for you, so you can focus on the styling.

• Slarivo Card

  Displays a card with header, content, and footer.

• Slarivo Input

  Displays a form input field or a component that looks like an input field.

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

  Animated hero with text and two shadcn/ui buttons

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Rainbow Button

  An animated button with a rainbow effect.

• Slarivo Shimmer Button

  A button with a shimmering light which travels around the perimeter.

• 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

  A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

• Slarivo Dialog

  A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

• Slarivo Dialog

  A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Tooltip

  A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

• Slarivo Gradient Button

  A beautiful button component with animated gradient background and border effects, inspired by Aaron Iker's implementation of James design concept. Features - Smooth gradient animations on hover - Glowing border effect - Multiple color variants - Fully accessible - CSS-only animations - Dark mode support

• Slarivo Sheet

  Extends the Dialog component to display content that complements the main content of the screen.

• Slarivo Sheet

  Extends the Dialog component to display content that complements the main content of the screen.

• Slarivo Sheet

  Extends the Dialog component to display content that complements the main content of the screen.

• 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 Moving Border

  A border that moves around the container. Perfect for making your buttons stand out.

• Slarivo Popover

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

• Slarivo Popover

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

• Slarivo Popover

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

• Slarivo Tooltip

  Enhanced shadcn/ui tooltip

• Slarivo Tooltip

  Enhanced shadcn/ui tooltip

• Slarivo Tooltip

  Enhanced shadcn/ui tooltip

• Slarivo Tooltip

  Enhanced shadcn/ui tooltip

• Slarivo Tooltip

  Enhanced shadcn/ui tooltip

• Slarivo Tooltip

  Enhanced shadcn/ui tooltip

• Slarivo Tooltip

  Enhanced shadcn/ui tooltip

• Slarivo Tooltip

  Enhanced shadcn/ui tooltip

• Slarivo Header

  Header with shadcn navigation menu and buttons

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

  Stepper

• Slarivo Stepper

  Stepper

• Slarivo Stepper

  Stepper

• Slarivo Button Colorful with Hover Effect

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

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Glow Effect

  A customizable glow effect with animation modes, colors, blur, and transitions

• Slarivo Feature 108

  A versatile section with 3 features inside a tabs component

• Slarivo Popover

  Enhanced shadcn/ui popover

• Slarivo Popover

  Enhanced shadcn/ui popover

• Slarivo Popover

  Enhanced shadcn/ui popover

• Slarivo Popover

  Enhanced shadcn/ui popover

• Slarivo Popover

  Enhanced shadcn/ui popover

• Slarivo Empty State

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

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

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Highlighter

  Highlighter, Particle, CTA

• Slarivo Hover Button

  Button Hover Animation inspired by twitter.com/aaroniker_me

• Slarivo Navbar

  Navigation, Header

• Slarivo FlowButton

  FlowButton

• Slarivo Shiny Button

  The component preserves all the original functionality including the animated conic gradients, shimmer effects, dot patterns, and hover states.

• Slarivo Typewriter Effect

  Text generates as if it is being typed on the screen.

• Slarivo Textarea

  Enhanced shadcn/ui textarea

• Slarivo Textarea

  Enhanced shadcn/ui textarea

• Slarivo Textarea

  Enhanced shadcn/ui textarea

• Slarivo Button

  A button or a component that looks like a button.

• Slarivo Neon Button

  a simple and clean neon bordered button with hover effect

• Slarivo CTA with Rectangle

  A powerful Call-to-Action component built with shadcn's design system. This component features multiple styles including box layouts and beam effects, all following shadcn's minimalist aesthetic. Each variant is designed to create compelling call-to-action sections that drive user engagement. Built with Tailwind CSS, it ensures responsive design and seamless integration with other shadcn components. The component maintains high accessibility standards while providing flexibility in how you present your calls to action.

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

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

• Slarivo Carousel

  A flexible and easy-to-use carousel with customizable navigation and indicators.

• 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 Call to action

  Call to action block for landing page

• Slarivo Alert

  Alert in shadcn/ui format

• Slarivo Shiny Button

  A shiny button component with dynamic styles in the dark mode or light mode.

• Slarivo Hero Section 2

  Modern marketing hero section

• Slarivo Integrations Component

  Here is Integrations Components

• Slarivo Hero with image, text and two buttons

  Hero with image, text and two shadcn/ui buttons

• Slarivo Drawer

  A flexible and beautifully styled Drawer component built using Vaul (Radix-based) primitives. It supports all drawer directions (top, bottom, left, right) with smooth animations, backdrop blur, and slots like header, body, and footer—making it ideal for responsive menus, sidebars, or modal-like panels in modern React apps.

• Slarivo Not found

  Not found page 05

• Slarivo Sonner

  An opinionated toast component for React.

• Slarivo Resizable Navbar

  Here is Resizable Navbar component

• Slarivo Button

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

• Slarivo Button

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

• Slarivo Button

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

• Slarivo Magnetize Button

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

• Slarivo Hover Border Gradient

  A hover effect that expands to the entire container with a gradient border.

• Slarivo CTA 3

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

• Slarivo Popover [react-aria-components]

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

• Slarivo Stepper

  Display content divided into a steps sequence.

• Slarivo Landing Page

  Landing Page

• Slarivo Login & Signup

  Here is Login & Signup component

• Slarivo CTA with Marquee

  Here is CTA with Marquee component

• Slarivo CTA with Marquee

  Here is CTA with Marquee component

• Slarivo CTA with Marquee

  Here is CTA with Marquee component

• 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 Pixel Canvas

  Pixel Canvas

• Slarivo Banner

  Banner alert inspired by shadcn/ui format

• Slarivo Banner

  Banner alert inspired by shadcn/ui format

• Slarivo Button

  Displays a button component with various styles and states.

• Slarivo Hero with text and two button

  Hero section with text and two button

• Slarivo Pagination

  Pagination with page navigation, next and previous links.

• Slarivo Cta 4

  Call to action section with heading, description and button on left. Feature bullet list on right.

• Slarivo Gradient Menu

  Gradient Menu: Button Icon Hover Effects with Text And Gradient Drop Shadow

• Slarivo Form

  Building forms with React Hook Form and Zod.

• Slarivo Form

  Building forms with React Hook Form and Zod.

• Slarivo Form

  Building forms with React Hook Form and Zod.

• Slarivo Form

  Building forms with React Hook Form and Zod.

• Slarivo Form

  Building forms with React Hook Form and Zod.

• Slarivo Empty

  Here is Empty components

• Slarivo Empty

  Here is Empty components

• Slarivo Empty

  Here is Empty components

• Slarivo Empty

  Here is Empty components

• Slarivo Empty

  Here is Empty components

• Slarivo Rainbow Borders Button

  A stunning button component featuring an animated rainbow gradient border with a sleek dark gradient background. The rainbow border cycles through vibrant colors with a smooth animation, creating an eye-catching glow effect. Perfect for call-to-action buttons, gaming interfaces, or any modern web application that needs a bold, dynamic visual element. Built with Tailwind CSS and includes hover animations for enhanced interactivity

• Slarivo Liquid Metal Button

  A button with liquid metal animation, metallic glowing borders, and fluid hover effects.

• Slarivo Page Not Found

  Page Not Found 404

• Slarivo Calendar

  Book a call

• Slarivo Navbars

  Here is Navbars component

• Slarivo Multi Type Ripple Buttons

  Part of the EaseMize library, this highly customizable React button component offers a theme-aware JavaScript click ripple and four distinct visual variants (default, ghost, hover, hoverborder). Designed to be "Easy to use, great to customize," it seamlessly integrates rich visual feedback and interactive hover animations into your applications.

• Slarivo ghost 404 page

  The source of design inspiration @Saad Shaikh

• Slarivo CTA with Text Marquee

  Here is CTA with Text Marquee component

• Slarivo CTA with Text Marquee

  Here is CTA with Text Marquee component

• Slarivo CTA with Text Marquee

  Here is CTA with Text Marquee component

• Slarivo theme

  Theme Toggle, Themed, Light, Dark & System

• Slarivo Pricing Cards

  Here is Pricing Cards components

• Slarivo Feature 1

  Basic Feature block with heading, description and buttons on left and image on right.

• Slarivo About

  Here is About section component

• Slarivo About

  Here is About section component

• Slarivo Not Found Page

  Minimal 404 error page with bold typography, subtle borders, and clear navigation actions.

• Slarivo about section 2

  Professional about section components featuring company stories, team showcases, mission statements, and brand narratives with elegant animations and responsive layouts

• 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 Alert Dialog

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

• Slarivo Navbar

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

• Slarivo Morphing Popover

  A popover that transforms from its trigger into the content using layout animations. It visually morphs instead of appearing as a separate element.

• Slarivo CTA with Glow

  A powerful Call-to-Action component built with shadcn's design system. This component features multiple styles including box layouts and beam effects, all following shadcn's minimalist aesthetic. Each variant is designed to create compelling call-to-action sections that drive user engagement. Built with Tailwind CSS, it ensures responsive design and seamless integration with other shadcn components. The component maintains high accessibility standards while providing flexibility in how you present your calls to action.

• Slarivo Acme Hero

  Animated hero section and nav

• 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 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 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 Navigation Bar

  Here is Navigation Bar component

• Slarivo Navigation Bar

  Here is Navigation Bar component

• Slarivo Animated Generate Button (shadcn + Tailwind)

  A reusable, accessible React button that mirrors the Uiverse “dexter-st” glow/flicker animation using Tailwind utilities and scoped CSS. It integrates with shadcn theme tokens, supports idle/active labels, a controllable generating state, and a customizable highlight hue for easy theming.

• Slarivo 3D Button

  Not all @shadcn apps need to look the same. In @rightfitso platform, we've customised the button and card components into these playful intractable components ✨

• Slarivo Phone Input

  Here is advanced phone input component

• Slarivo Button witn Icon

  Here is button with icon

• Slarivo Signup 1

  Signup page with email and Google auth buttons

• Slarivo cta section with gallery

  call to action section with stagger animation and image gallery

• Slarivo Button

  Here is modern liquid animated button component

• Slarivo App Store Button

  The App Store Button follows Apple’s familiar download style, featuring a clean Apple logo, compact typography, and balanced layout. It’s ideal for product sites, landing pages, or apps where you want a native and trustworthy look that users instantly recognize.

• Slarivo Drawer

  A drawer component for React.

• Slarivo Drawer

  A drawer component for React.

• Slarivo Drawer

  A drawer component for React.

• Slarivo Drawer

  A drawer component for React.

• Slarivo Slide Button

  Here is Slide Button component

• Slarivo Button

  Animated button

• Slarivo Sign Up

  Here is Sign Up form

• Slarivo Sign Up

  Here is Sign Up form

• Slarivo Popover

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

• Slarivo Popover

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

• Slarivo Popover

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

• Slarivo Popover

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

• Slarivo Pricing Base

  Here is Pricing compoenent

• Slarivo Pricing Base

  Here is Pricing compoenent

• Slarivo Pricing Base

  Here is Pricing compoenent

• Slarivo 3d button

  A 3D button with animated text is a visually dynamic UI element designed to mimic real-world depth and provide interactive feedback through both its structure and the movement of its text.

• 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 Not Found Page 2

  Animated 404 page with floating gradient orbs, soft motion effects, and clean centered layout.

• Slarivo Magnetic

  A magnetic effect for elements that allows them to be attracted to the mouse cursor.

• Slarivo Magnetic

  A magnetic effect for elements that allows them to be attracted to the mouse cursor.

• Slarivo Smooth Button

  A polished button component with gradient candy/destructive variants, sizes, and a subtle press-scale animation.

• Slarivo Hero Button Expendable

  Hero Button Expendable

• Slarivo Balloons

  shadcn/ui-like implementation of balloons.js

• Slarivo Button

  Here is magic button component

• Slarivo Play Store Button

  A sleek, customizable CTA (Call to Action) that mimics the official Google Play style. With a built-in Google Play icon, bold typography, it’s perfect for apps, SaaS platforms, or landing pages that need to drive users to the Play Store. Designed with flexibility in mind, you can easily extend it with custom variants, sizes, or interactions while keeping a professional look.

• Slarivo Voice Recording

  Voice Recording Component

• Slarivo Voice Input

  An interactive voice recording interface with animated visual feedback, timer display, and customizable start/stop callbacks.

• 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 Hover Button

  Hover Button

• Slarivo Call to Action

  Here is Call to Action components

• Slarivo Call to Action

  Here is Call to Action components

• Slarivo Call to Action

  Here is Call to Action components

• Slarivo ruixen-hero-section-02

  This hero section is a visually striking, interactive introduction component designed to showcase a ruixen UI. It features a dynamic background with soft gradients, animated floating dots, and glowing blur effects to create a futuristic aesthetic.

• Slarivo Feedback

  Gather text feedback with an associated emotion.

• Slarivo lever-switch

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

• Slarivo Alert Dialog

  Alert Dialog

• Slarivo Alert Dialog

  Alert Dialog

• Slarivo Pixeleted 404 NOT FOUND

  A creative and visually engaging 404 error page component featuring a postal/postcard theme with animated circular text. **Key Features:** - **Postal Theme Design**: Displays a postcard-style image with perforated stamp edges and postal cancellation marks (wavy lines) - **Animated Circular Text**: Rotating text that forms a complete circle above the postcard, continuously spinning with customizable content - **Customizable Content**: Accepts props for heading, subtext, back button text, and navigation link - **Typography**: Uses the Doto font for the main heading and Crimson Text serif for elegant styling - **Interactive Elements**: Postcard has a subtle rotation that straightens on hover, and includes a call-to-action button - **Responsive Design**: Adapts to different screen sizes with responsive text sizing and spacing **Props:** - `heading`: Main error message (default: "(404) Looks like the page you're looking for got lost somewhere.") - `subtext`: Supporting message (default: "But hey — in New York, even the unexpected detours lead somewhere.") - `circularText`: Text that rotates in a circle (default: "The General Intelligence Company of New York") - `imageSrc`: Postcard image URL - `backButtonText`: Button label (default: "Back to Home") - `backButtonHref`: Navigation destination (default: "/") **Use Case**: Perfect for adding personality to 404 error pages while maintaining a professional and polished appearance.

• Slarivo Animated Shadcn Button

  An animated button component to enhance your app's user experience and interactivity. This example was made with Tailwind CSS and Framer Motion.

• Slarivo not found 2

  Minimalist 404 page featuring large masked typography and clear navigation actions.

• Slarivo Hover Glow Button

  a dynamic React component that adds an engaging, mouse-following glow effect to your buttons. Part of the EaseMize UI library, it's designed for both ease of use and deep customization. Configure the glowColor, backgroundColor, textColor, and hoverTextColor props to create the perfect interactive element for your application. The smooth animation enhances user experience, making clicks more inviting.

• Slarivo Pricing Card With Features

  Pricing Card With Features

• Slarivo usePagination

  usePagination hook

• Slarivo Auth Form

  Grid Auth Form Used While Sign in or Sign up

• Slarivo Basic Toast

  Here is Toast component

• Slarivo Basic Toast

  Here is Toast component

• Slarivo Basic Toast

  Here is Toast component

• Slarivo Call to Action (CTA)

  Call to Action Card A full-width, visually engaging card that combines a background image with a title, description, and an email signup form. It's designed to capture user attention and drive conversions.

• Slarivo Form Layout

  Here is Form Layout component

• Slarivo Aurora Button

  The AuroraButton is a customizable React component that creates a button with a beautiful, animated gradient border effect. When you hover over the button, the border glows with an aurora-like effect, using a blend of purple, cyan, and emerald colors. The button itself has a dark glass-like appearance with a transparent background, making it suitable for modern, elegant user interfaces.

• Slarivo Empty

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

• Slarivo Empty

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

• Slarivo Sonner

  An opinionated toast component for React.

• Slarivo Sonner

  An opinionated toast component for React.

• Slarivo Fey.com Button

  Fey.com trial button

• Slarivo Floating Action Panel

  A versatile floating action panel component with support for multiple triggers and modes. Features: • Multiple trigger buttons with different modes • Smooth animations using Framer Motion • Backdrop blur effect • Keyboard navigation and accessibility • Dark mode support • Responsive design • Form handling for note-taking • TypeScript support Notes: • Built with Framer Motion for smooth animations • Uses Lucide React for consistent iconography • Supports multiple panel modes (actions and notes) • Includes keyboard navigation (Escape key to close) • Click outside the panel to close • Fully typed with TypeScript • Customizable styling using Tailwind CSS • Mobile-friendly design

• Slarivo Carousel

  Here is Carousel component

• Slarivo Carousel

  Here is Carousel component

• Slarivo Button

  animated glass button

• Slarivo Login Form

  Here is Login Form component

• Slarivo Hero 115

  A hero section with a radial circle background pattern

• Slarivo Shiny Button

  this is a really cool shiny button with dotted bg and a hover bg glow with multiple layers

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

  Here is Form component

• Slarivo Form

  Here is Form component

• Slarivo Form

  Here is Form component

• Slarivo Texture Button

  A button with numorphic undertones

• Slarivo Button

  Advanced button component with extended options and variants.

• Slarivo Cookie Consent

  A fully customizable cookie consent component. It features smooth animations, mobile responsiveness, and supports configurable categories, essentials, and local storage preference handling.

• Slarivo Flow Hover Button

  Add some smooth sleek button hover animation to your site without any external dependencies, just pure tailwind css.

• Slarivo Pricing Section

  Professional pricing section components featuring subscription plans, pricing tiers, feature comparisons, and conversion-optimized layouts designed to showcase value and drive purchases

• Slarivo Cta 11

  Classic cta block with 2 buttons, center aligned

• Slarivo Button Border

  Button Border with animation

• Slarivo Arrow Dots Button

  A sleek button featuring an animated dotted arrow, ideal for navigation or call-to-action elements. Its minimal design and smooth motion make it perfect for modern interfaces that need a subtle yet engaging interactive element.

• Slarivo Pagination

  Enhanced shadcn/ui pagination

• Slarivo Pagination

  Enhanced shadcn/ui pagination

• Slarivo Modal

  Display popup content that requires attention or provides additional information.

• Slarivo Modal

  Display popup content that requires attention or provides additional information.

• Slarivo Modal

  Display popup content that requires attention or provides additional information.

• Slarivo Modal

  Display popup content that requires attention or provides additional information.

• Slarivo Modal

  Display popup content that requires attention or provides additional information.

• Slarivo Input Group

  Here is Input Group component

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

  Buttons component from the 21st.dev community.

• Slarivo 404 page not found

  this is for page not found

• Slarivo Button

  button with background blur

• Slarivo Button Group

  Here is Button Group component

• Slarivo Button Group

  Here is Button Group component

• Slarivo Button Group

  Here is Button Group component

• Slarivo Button Group

  Here is Button Group component

• Slarivo Button Rotate

  Button Rotate

• Slarivo Chronicle Button

  A button with a unique hover effect. You can also get this component from https://namer-ui.netlify.app/ and https://namer-ui-for-vue.netlify.app/components/chronicle-button Credit: https://codepen.io/Haaguitos/pen/OJrVZdJ

• Slarivo Micro Expander

  Here is Micro Expander component

• Slarivo Micro Expander

  Here is Micro Expander component

• Slarivo Micro Expander

  Here is Micro Expander component

• Slarivo useCopyToClipboard

  Copy text to the clipboard easily with useCopyToClipboard, while keeping track of the most recently copied value.

• Slarivo Theme Dropdown

  Theme Dropdown

• Slarivo Tooltip

  Displays brief, contextual information when hovering over or focusing on an element, improving clarity without cluttering the interface.

• Slarivo Tooltip

  Displays brief, contextual information when hovering over or focusing on an element, improving clarity without cluttering the interface.

• Slarivo Tooltip

  Displays brief, contextual information when hovering over or focusing on an element, improving clarity without cluttering the interface.

• Slarivo Empty State with Marquee

  An empty state block showing a vertically scrolling marquee of skeleton rows with a title, description, and create/import action buttons for when no data exists yet.

• Slarivo Pricing Card

  Pricing card

• Slarivo Accordion 03

  Accordion with images and button

• Slarivo File Upload

  A file upload component for React.

• Slarivo File Upload

  A file upload component for React.

• Slarivo File Upload

  A file upload component for React.

• Slarivo Cards

  Here is Blog Card Component

• Slarivo Cards

  Here is Blog Card Component

• Slarivo Ripple Button

  An animated button with ripple useful for user engagement.

• Slarivo Feature 2

  Basic feature section with heading, description and buttons. Image on left

• Slarivo File Upload

  Here is File Upload component

• Slarivo Hold and Release Button

  Hold and Release Button, great for deletion confirmation.

• Slarivo About Section

  Professional about section components featuring company stories, team showcases, mission statements, and brand narratives with elegant animations and responsive layouts

• Slarivo Feature Modern

  Here is Feature component

• Slarivo Feature Modern

  Here is Feature component

• Slarivo Feature Modern

  Here is Feature component

• Slarivo Feature Modern

  Here is Feature component

• Slarivo Plastic Button

  A modern looking "plastic" button.

• Slarivo Popover

  Here is Popover component

• Slarivo Popover

  Here is Popover component

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Cookie Banner

  The CookiePanel is a compact, bottom‑right floating cookie consent banner built with Next.js, TypeScript, TailwindCSS v4, and Lucide icons. It presents users with a clear cookie policy message, quick Accept all and Customize actions, and theme‑aware styling. Clicking Customize smoothly expands an inline preferences panel inside the toast, letting users toggle cookie categories without leaving the page. Preferences are saved to localStorage and the banner closes automatically upon saving, ensuring a clean, interruption‑free user experience. Built‑in slide/fade animations are handled purely with Tailwind’s tw-animate-css utilities for a lightweight, modern feel.

• Slarivo Hover Border Gradient

  A button with a rotating border gradient that highlights on hover with a blue radial glow.

• Slarivo Tour

  Make your own product tour with shadcn/tour.

• Slarivo List 2

  A general list component

• Slarivo Thumbnail button video player

  The ThumbnailButton component displays a video thumbnail that, when clicked, opens a modal video player. It supports both YouTube embeds (via youtubeId) and direct video URLs (via videoUrl), and it gracefully handles missing thumbnail or video sources by falling back to sensible defaults.

• Slarivo Login

  Here is Login component

• Slarivo Cta Card

  CtaCard This is a reusable Call-to-Action (CTA) card that features an overlapping image and content block. It's built to be highly customizable through props and includes subtle animations using framer-motion to enhance user engagement.

• Slarivo Retro Button

  Retro 3D buttons by https://x.com/njesenberger

• Slarivo Thanos snap effect

  Thanos snap effect

• Slarivo Pricing

  A simple minimal grid pricing block

• Slarivo Stardust Button

  A premium pearl-finish button with celestial star animations and glass morphism effects. Features smooth hover transitions between star symbols (✧ ↔ ✦) and satisfying tactile press feedback. Perfect for launch pages, premium CTAs, and high-end product announcements.

• Slarivo Spinner

  Here is Spinner component

• Slarivo Spinner

  Here is Spinner component

• Slarivo Spinner

  Here is Spinner component

• Slarivo Shatter Button

  Burst feature on click of button component , can be used for payment submission login/signup's

• Slarivo Popover

  A simple popover for quick user interactions over existing content. It pops up on command, and closes easily with a click outside or on a close button.

• Slarivo Animated Arrow Button

  A playful button with a minimal dotted-arrow animation that gives a quirky "plop" effect. Designed for fun, experimental, or creative interfaces, it adds a touch of humor and uniqueness compared to standard buttons.

• Slarivo Cartoon Button

  Cartoon Style Button

• Slarivo Glassmorphism Profile Card

  Glassmorphism profile Card

• Slarivo Motion Button

  An animated CTA button with expanding circle background and arrow icon on hover.

• Slarivo Nextjsshop Button

  A versatile button component that supports different styles, sizes, and states. It can be used for primary actions, secondary actions, and interactive UI elements while maintaining consistent design across your application.

• Slarivo Script Copy Button

  Copy code to clipboard

• Slarivo Button Download

  Here is download button component

• Slarivo Base Button

  Here is Button component

• Slarivo Base Button

  Here is Button component

• Slarivo Base Button

  Here is Button component

• Slarivo Base Button

  Here is Button component

• Slarivo Base Button

  Here is Button component

• Slarivo Base Button

  Here is Button component

• Slarivo Base Button

  Here is Button component

• Slarivo Base Button

  Here is Button component

• Slarivo Base Button

  Here is Button component

• Slarivo Base Button

  Here is Button component

• Slarivo Base Button

  Here is Button component

• 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 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 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 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 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 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 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 Base Button

  Renders a clickable button or an element styled as a button

• Slarivo Back Button

  A stylish animated button component that reveals an arrow icon on hover, perfect for navigation and going back to previous pages.

• Slarivo Glowing Button

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

• Slarivo Calendar

  Here is Calendar component

• Slarivo Calendar

  Here is Calendar component

• Slarivo ghost 404 page

  The source of design inspiration @Saad Shaikh

• Slarivo Animated Background Lines

  Animated Background Lines

• Slarivo Subtle Button

  An animated, glowing "Get Started" button with interactive hover and press effects

• Slarivo Delete Button

  Delete button that expands to show a confirmation button with smooth animations.

• Slarivo Apple Tahoe Liquid Glass Button

  A high-fidelity Liquid Glass Button engineered for shadcn/ui and Tailwind CSS. It features a hyper-realistic glassmorphism engine driven by an inline WebP SVG displacement map (feDisplacementMap) and backdrop-filter refraction. It utilizes an isolated z-index lens layer to guarantee zero text-ghosting, while an intricate, multi-layered box-shadow stack handles dynamic light and dark reflections. Features fluid scale transforms, oklch color mix customization, and auto-scaling filters. Zero-dependency, fully accessible, and single-file portable.

• Slarivo Cool Mode

  Cool mode effect for buttons, links, and other DOMs

• Slarivo Terms & Conditions

  Here is Terms & Conditions dialog

• Slarivo Call To Action

  Here is Call To Action component

• Slarivo Pricing

  Here is Pricing component

• Slarivo Cookie Notice

  This CookieNotice component is a user-friendly notification banner built with Shadcn UI and Tailwind CSS, designed to comply with cookie consent requirements. Positioned at the bottom center of the screen, it appears as a dismissible card containing a cookie icon, title, descriptive text, and links to policy details and preference management. The notice gives users a clear choice to review cookie policies, adjust their preferences, or simply click Accept to dismiss it.

• Slarivo File Trigger [react-aria-components]

  A FileTrigger allows a user to access the file system with any pressable React Aria or React Spectrum component, or custom components built with usePress. FileTrigger extends the functionality of the standard file input element by working with a pressable child such as a Button to create accessible file inputs that can be style as needed.

• Slarivo Animated Button

  This is a fascinating animated button.

• Slarivo Star Button

  Here is Star Button component

• Slarivo Advanced Ai Chat Input

  Advanced Chat Input A sophisticated chat input component that supports file attachments, custom action icons, and an animated send button. It automatically resizes based on content.

• Slarivo Forgot Password

  Here is Forgot Password component

• Slarivo Forgot Password

  Here is Forgot Password component

• Slarivo Shuffle Number

  Here is Shuffle Number component

• Slarivo Credenza

  Ready-made responsive modal component for shadcn/ui. Dialog for desktop and Drawer for mobile

• Slarivo Shiny Borders Button

  Shiny Borders Button is a modern, visually rich React component styled with Tailwind CSS. It features a soft inner glow, a radial gradient background, and dynamic green + white lighting effects that respond to hover events. Designed for futuristic UIs and premium user interactions, this button adds depth, polish, and realism to any interface — perfect for landing pages, dashboards, Web3, or portfolio sites.

• Slarivo Star Button

  A Uniquely Animated Button for hover effect

• Slarivo Interactive Hover Button

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

• Slarivo Previous & Next Button Group

  A versatile button group component for organizing related actions with consistent spacing and visual connection.

• Slarivo Item

  Here is Item component

• Slarivo Button

  Trigger an action or event, such as submitting a form or displaying a dialog. A recreation of Vercel's Geist design system.

• Slarivo Side Panel Video

  Here is Video Side Panel component

• Slarivo Pagination

  A responsive pagination component for navigating through multiple pages of content.

• Slarivo Pagination

  A responsive pagination component for navigating through multiple pages of content.

• Slarivo Hero 01

  Hero with wave gradient background

• Slarivo Shiny Button

  A button with a vivid gradient background and glowing shadow effect on hover.

• Slarivo Newsletter Section

  A customizable newsletter subscription section with a modern design, loading states, and background effects. Features - Customizable title and styling - Built-in form handling and error states - Loading indicators - Animated background effect (optional) - Accessible form inputs - Dark mode support - Responsive design

• Slarivo Metal Button

  Metal Button

• Slarivo Button

  realistic animated button

• Slarivo Newsletter Signup

  A customizable newsletter signup form with validation and success message.

• Slarivo Animated Tabs

  Here is animated tabs modern ui component

• Slarivo Card Studio

  Here is Card component

• Slarivo Card Studio

  Here is Card component

• Slarivo Card Studio

  Here is Card component

• Slarivo Card Studio

  Here is Card component

• Slarivo Call to Action

  A centered call-to-action section with a balanced title, description, and optional button.

• Slarivo Theme Button

  Theme Button, Light, Dark, System

• Slarivo CTA Card

  Simple, minimal call to action card

• Slarivo Waitlist

  Here is waitlist ui component

• Slarivo Note

  Display text that requires attention or provides additional information.

• Slarivo Note

  Display text that requires attention or provides additional information.

• Slarivo Aero Hero-3

  Texts component from the 21st.dev community.

• Slarivo Cta 13

  CTA section with heading, description and 2 buttons

• Slarivo Card

  Opportunity Card A visually polished and responsive card component to display project opportunities or job offers, complete with user details, project specifications, and action buttons. It's designed to be easily populated with dynamic data.

• Slarivo Animated Status Badge

  This interactive status card features an animated "Running" badge with smooth transitions and a delayed "Completed" confirmation, triggered by a single action button. Perfect for displaying real-time process feedback in dashboards, onboarding flows, or transactional UI components.

• Slarivo Actions

  Here is Actions component

• Slarivo Pixel Broke Button

  A glitchy pixel-styled button that mimics a broken or distorted look. Ideal for creative projects, retro game UIs, or playful error states, it adds a unique visual effect that stands out from traditional button designs.

• Slarivo Aero Hero-2

  Buttons component from the 21st.dev community.

• Slarivo Not Found

  A responsive 404 error page that displays when users navigate to a non-existent route.

• Slarivo Base Menu

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

• Slarivo Aero Hero-1

  Buttons component from the 21st.dev community.

• Slarivo Gradient Borders Button

  A button with animated radial gradient borders that glow on hover. Pill-shaped with emerald accent.

• Slarivo Drawer

  A panel that slides in from the edge of the screen with swipe gestures, snap points, and nested drawer support. Supports bottom, top, left, and right positions with default, inset, and straight variants.

• Slarivo Drawer

  A panel that slides in from the edge of the screen with swipe gestures, snap points, and nested drawer support. Supports bottom, top, left, and right positions with default, inset, and straight variants.

• Slarivo Drawer

  A panel that slides in from the edge of the screen with swipe gestures, snap points, and nested drawer support. Supports bottom, top, left, and right positions with default, inset, and straight variants.

• Slarivo Drawer

  A panel that slides in from the edge of the screen with swipe gestures, snap points, and nested drawer support. Supports bottom, top, left, and right positions with default, inset, and straight variants.

• Slarivo Drawer

  A panel that slides in from the edge of the screen with swipe gestures, snap points, and nested drawer support. Supports bottom, top, left, and right positions with default, inset, and straight variants.

• Slarivo Drawer

  A panel that slides in from the edge of the screen with swipe gestures, snap points, and nested drawer support. Supports bottom, top, left, and right positions with default, inset, and straight variants.

• Slarivo Drawer

  A panel that slides in from the edge of the screen with swipe gestures, snap points, and nested drawer support. Supports bottom, top, left, and right positions with default, inset, and straight variants.

• Slarivo Origin Button

  Buttons component from the 21st.dev community.

• Slarivo Splashed Push Notifications

  Simple, splashed push notifications created from templates I found on CodePen. For credit info, please visit https://github.com/Northstrix/Splashed-Push-Notifications This demo utilizes the icons from https://lucide.dev/ and throws toasts with the quotes from "Losing Alice"

• Slarivo Login Card

  Here is Login Card component

• Slarivo Hero Section

  Hero Section A full-screen, responsive hero section with staggered text and button animations, designed to capture user attention.

• Slarivo Link [react-aria-components]

  A link allows a user to navigate to another page or resource within a web page or application. Links can be created in HTML with the <a> element with an href attribute. However, if the link does not have an href, and is handled client side with JavaScript instead, it will not be exposed to assistive technology properly. Link helps achieve accessible links with either native HTML elements or custom element types.

• Slarivo Dialog

  Here is dialog component

• Slarivo Badge Tag

  Here is Badge Tag

• Slarivo Timeline

  Here is modern minimalistic timeline component

• Slarivo Scroller

  Display an overflowing list of items.

• Slarivo Swipe Button

  Here is Swipe Button component

• Slarivo Rating Group

  Here is Rating Group component

• Slarivo Copy Code Button

  Copy Code Button Animation

• Slarivo CTA Section

  A call-to-action marketing section with a headline, badge, action buttons, and resource cards for documentation and video tutorials.

• Slarivo FlipButton

  A reusable flip button component that dynamically switches between two customizable texts with a smooth rotation animation.

• Slarivo Scroll Button

  A floating button component that appears when users scroll up in a container, allowing them to quickly return to the bottom of the content with a single click.

• Slarivo Contact Form

  Here is Contact Form component

• Slarivo 404 page error

  A clean, production-ready 404 / Not Found page for React/Next/Vite projects. Built with Tailwind CSS and Lucide icons, it ships with a floating animated hero, buttery-smooth micro-interactions on buttons, and a one-click theme toggle (light/dark).

• Slarivo Button Retro

  Here is Button Retro component

• Slarivo Empty Testimonial

  An animated empty state component for testimonial sections.

• Slarivo Chat Suggestions

  A composable set of components for displaying chat prompt suggestions as clickable buttons, ideal for onboarding or empty chat states.

• Slarivo Toolbar

  Toolbar with actions

• Slarivo Button

  A button with variants and a built-in loading state powered by the Spinner component.

• Slarivo Cta 10

  A classic call to action block with 2 buttons - left aligned

• Slarivo Dialog

  Here is minimalistic dialog

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

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

• Slarivo Wet Paint Button

  Add some liquid (not glass) to your ui with this amazing wet paint button.

• Slarivo Dropdown

  Here is Dropdown component

• Slarivo Dropdown

  Here is Dropdown component

• Slarivo Dropdown

  Here is Dropdown component

• Slarivo Dropdown

  Here is Dropdown component

• Slarivo Dropdown

  Here is Dropdown component

• Slarivo useToggle

  Easily manage a boolean state with useToggle.

• Slarivo Button Group with Icons

  A versatile button group component for organizing related actions with consistent spacing and visual connection.

• Slarivo Animated Counter

  An animated counter with increase and decrease buttons

• Slarivo Pixel Button

  A retro-styled button inspired by classic pixel art and arcade games. Perfect for projects with a nostalgic or playful theme, it combines blocky aesthetics with interactive functionality for a unique gaming-inspired UI element.

• Slarivo Hover Button

  Hover Buttom

• Slarivo Win 98 Button

  A nostalgic button from Windows 98 era

• Slarivo Waitlist Form

  Animated and minimal waitlist form with email input and submit button.

• Slarivo Centered Feedback Drawer

  This component is a content-rich drawer that opens from the side, designed to keep the focus on the main content by centering it inside the drawer rather than stretching across the entire width. The layout uses a clean and minimal card-style container, making it ideal for displaying structured information such as profiles, product previews, or quick details without overwhelming the user. Its centered presentation balances space and readability, giving a polished and professional look for modern applications.

• Slarivo Modal

  Here is Modal component

• Slarivo Call to Action

  Here is Call to Action component

• Slarivo Call to Action

  Here is Call to Action component

• Slarivo Call to Action

  Here is Call to Action component

• Slarivo Call to Action

  Here is Call to Action component

• Slarivo Notification Button

  The Notification Button is a shadcn/ui-based component designed to display real-time alerts or counts for messages, tasks, or cart items. It combines a button with an icon (defaulting to a bell) and a dynamic badge that shows the count, making it highly visible and actionable. The component supports multiple sizes (sm, md, lg) and ensures that the badge scales proportionally with the icon and button, maintaining a clean, modern, and responsive design. Its flexibility allows developers to replace the icon or integrate it into dashboards, navbars, or overlays, making it a practical solution for interactive UIs that require user attention to notifications.

• Slarivo Copy Button

  A copy-to-clipboard button with blur transition effect.

• Slarivo Button

  Here is hover animated button component

• Slarivo Split Button

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

• Slarivo Tooltip

  A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

• Slarivo File Trigger 13

  Here is File Trigger component

• Slarivo File Trigger 13

  Here is File Trigger component

• Slarivo File Trigger 13

  Here is File Trigger component

• Slarivo File Trigger 13

  Here is File Trigger component

• Slarivo File Trigger 13

  Here is File Trigger component

• Slarivo File Trigger 13

  Here is File Trigger component

• Slarivo File Trigger 13

  Here is File Trigger component

• Slarivo Pricing Cards

  Here is Pricing Cards components

• Slarivo Pricing Cards

  Here is Pricing Cards components

• Slarivo Pricing Cards

  Here is Pricing Cards components

• 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 Not Found

  A responsive error page component that displays a "page not found" message with navigation buttons and helpful resource links when users hit a non-existent route.

• Slarivo Pagination Ant

  Here is Pagination component

• Slarivo Pagination Ant

  Here is Pagination component

• Slarivo Password update Block

  Secure password update form with validation and confirmation fields.

• Slarivo Kbd

  Here is Kbd component

• Slarivo Shimmer Button

  An animated button with a shimmer gradient effect that moves across the surface. Supports dark mode.

• Slarivo The Pagination

  Navigation Menus component from the 21st.dev community.

• Slarivo The Pagination

  Navigation Menus component from the 21st.dev community.

• Slarivo The Pagination

  Navigation Menus component from the 21st.dev community.

• Slarivo The Pagination

  Navigation Menus component from the 21st.dev community.

• Slarivo The Pagination

  Navigation Menus component from the 21st.dev community.

• Slarivo form

  minimalistic register form

• Slarivo Button

  Here is animated hover button component

• Slarivo Countdown Timer

  Countdown Timer

• Slarivo Countdown Timer

  Countdown Timer

• Slarivo Countdown Timer

  Countdown Timer

• Slarivo Countdown Timer

  Countdown Timer

• Slarivo Countdown Timer

  Countdown Timer

• Slarivo Countdown Timer

  Countdown Timer

• Slarivo QR Code

  Here is QR Code component

• Slarivo CreateWorkspaceModal

  A clean and intuitive workspace creation modal with input fields, slug preview, and action button. Ideal for SaaS apps, team collaboration tools, and project management dashboards.

• Slarivo Button Ant

  Here is Button Ant component

• Slarivo Button Ant

  Here is Button Ant component

• Slarivo Button Ant

  Here is Button Ant component

• Slarivo Button Ant

  Here is Button Ant component

• Slarivo Button Ant

  Here is Button Ant component

• Slarivo Button Ant

  Here is Button Ant component

• Slarivo Button Ant

  Here is Button Ant component

• Slarivo Button Ant

  Here is Button Ant component

• Slarivo Button Ant

  Here is Button Ant component

• Slarivo Button Ant

  Here is Button Ant component

• Slarivo Button Ant

  Here is Button Ant component

• Slarivo Button Ant

  Here is Button Ant component

• Slarivo Stock Card

  Stock Card This component, StockCard, displays stock information with a smooth hover animation. It's designed to be highly reusable, accepting props for the logo, ticker, name, price, and percentage change.

• Slarivo Shine Hover

  Here is shine hover botton

• Slarivo Media Button

  MediaButton is a reusable React component that displays a button with a smooth hover effect revealing a looping .mp4, .webm, or .gif background, with a dark overlay to keep the text readable.

• Slarivo Share Dialog

  Here is minimalistic share dialog

• Slarivo Calendar

  Here is Calendar component

• Slarivo Modal Drop

  Here is Modal component

• Slarivo Modal Drop

  Here is Modal component

• Slarivo Button

  A reusable component for button

• Slarivo Live Waveform

  Here is Live Waveform component

• Slarivo Insurance Card

  Insurance Card A modern, animated card component to display insurance policy details, complete with a scannable QR code and quick actions.

• Slarivo Dialog

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

• Slarivo Dialog

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

• Slarivo Dialog

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

• Slarivo CTA Section

  A centered call-to-action section with a heading, email subscribe input, and a stack of member avatars with social proof.

• Slarivo Share Button

  A Uniquely animated share button

• Slarivo FloatButton

  Here is FloatButton component

• Slarivo FloatButton

  Here is FloatButton component

• Slarivo FloatButton

  Here is FloatButton component

• Slarivo FloatButton

  Here is FloatButton component

• Slarivo Smooth Dropdown

  A dropdown menu with smooth spring animations.

• Slarivo Pagination

  Here is Pagination component

• Slarivo Pagination

  Here is Pagination component

• Slarivo Pagination

  Here is Pagination component

• Slarivo Pagination

  Here is Pagination component

• Slarivo Pagination

  Here is Pagination component

• Slarivo Pagination

  Here is Pagination component

• Slarivo QR Code Generator

  Here is QR Code Generator component

• Slarivo Pagination with text buttons

  Pagination with text buttons

• Slarivo Gradient Button

  Highly customizable button component with animations and custom gradient effects using webgl and gsap

• Slarivo Badge Button Combo

  The Badge + Button Combo is a shadcn/ui component that combines a standard button with a floating badge to display status or counts, such as “New,” “Beta,” or numeric notifications. The badge is positioned top-right of the button and scales appropriately with the button size, which can be configured as sm, md, or lg. This design provides a clear visual indicator for alerts, updates, or special statuses while keeping the button functional and interactive. Its flexibility makes it ideal for dashboards, messaging interfaces, or feature highlight buttons, adding both usability and visual appeal to any interface.

• Slarivo Text Reveal Animation

  This component animates each letter of "Animations" sequentially using a staggered effect based on its index. Clicking the button resets the state to replay the animation.

• Slarivo CTA Banner

  A Tron-styled call-to-action banner with animated glow, scanline overlay, corner decorations, and primary/secondary action buttons.

• Slarivo Alert Dialog Icon

  Here is Alert Dialog Icon component

• Slarivo Button Github

  Here is Github Button component

• Slarivo Pagination

  Here is Pagination component

• Slarivo Pagination

  Here is Pagination component

• Slarivo Pagination

  Here is Pagination component

• Slarivo Pagination

  Here is Pagination component

• 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 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 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 Button Ui

  Here is Button Ui components

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Morph

  Animates text by morphing shared letters between words, creating fluid transitions

• Slarivo JSX Preview

  A component for rendering JSX strings as React components, with support for streaming content and automatic tag completion.

• Slarivo Navigation Bar

  Here is navigation bar component

• Slarivo News letter Form

  This component is a modern newsletter subscription form built with ShadCN UI and Tailwind CSS, designed for both light and dark themes. It uses a Card layout to encapsulate the form, providing a clean and focused interface. Users can enter their email address in a styled input field, and submit it via a prominent, full-width button. Upon submission, the form displays a friendly success message with a celebratory emoji, confirming that the user has been added to the mailing list. The component is responsive, accessible, and reusable, making it ideal for integrating into websites or applications that want a polished and user-friendly subscription experience.

• 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 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 Dialog Deactivate

  Here is account deactivation dialog

• Slarivo Halomot Button

  A stylish button with a vibrant gradient that fills it on hover. For credit information and Vue version, please visit https://namer-ui-for-vue.netlify.app/components/halomot-button

• Slarivo Modern Retro Button

  An unusual button that employs modern and retro styles at the same time. Credit: https://codepen.io/jdillon/pen/qEWOGxm

• Slarivo Banner Ui

  Here is Banner ui component

• Slarivo Banner Ui

  Here is Banner ui component

• Slarivo Banner Ui

  Here is Banner ui component

• Slarivo Pop Button

  A playful 3D-style button with push-down animation effect.

• Slarivo Flip Button

  A clickable button featuring a smooth flipping animation triggered on hover.

• Slarivo Social Share Button

  An expandable share button that reveals social media icons (Twitter, Instagram, LinkedIn) and copy link with smooth spring animations.

• Slarivo Discover Button

  An animated discover button with smooth hover and spring effects.

• Slarivo Info Dialog

  Here is info filling dialog page

• Slarivo InteractiveButton

  A modern interactive button that dynamically changes its background color when hovered over, focused, or clicked. This enhances user experience by providing immediate visual feedback, making it ideal for call-to-action elements. The transition is smooth and appealing, supporting both light and dark themes.

• Slarivo Calendar Date Picker

  Here is shadcn calendar with date picker

• Slarivo Popover

  Displays rich and interactive content in a portal, triggered by a button or other interactive element.

• Slarivo Text Field Basic

  Here is Text Field component

• Slarivo Bottom Drawers

  This component is a set of bottom-sliding drawers, each triggered by a separate button and containing different content such as a newsletter signup, feedback form, or contact form. The layout keeps the content compact and centered, making it easy for users to focus on the inputs and actions without distractions. By stacking the buttons and organizing the drawers consistently, it provides a clean, user-friendly interface for quick interactions and data collection.

• Slarivo Heart Favorite

  Animated heart icon for like/favorite actions

• Slarivo Unsave Popup

  A popup component to confirm before discarding changes. Inspired by Discord, it will shake when the user tries to leave without saving.

• Slarivo Shining Button

  A button that shines when hovered

• Slarivo Dialog Modal

  Here is deactivationg two-step modal dialog

• Slarivo upload

  A minimalistic upload form

• Slarivo Calendar with day button

  Here is shadcn calendar component with today button

• Slarivo Onboarding / Welcome Screen

  Onboarding / Welcome Screen used to greet new users and introduce the app’s purpose. It features a hero image for visual appeal, a clear welcome title, a short description highlighting the app’s value, and two calls-to-action — a primary button (“Let’s get started”) for new users and a secondary link (“Login Now”) for returning users. It’s ideal for first-time app launches to drive sign-ups or logins.

• Slarivo ConfettiButton

  The ConfettiButton component is a fun and interactive button built entirely with shadcn UI and Tailwind CSS that celebrates user actions with a burst of confetti. When clicked, tiny colorful particles emit from the exact middle bottom of the button, creating a visually appealing effect ideal for achievements, “Level Up” notifications, or form submissions. The component dynamically calculates the button width to ensure the confetti always originates from the center, regardless of the button’s size. With configurable labels, click callbacks, and smooth Framer Motion animations, it provides a delightful and responsive user experience while seamlessly integrating into any shadcn UI-based project.

• Slarivo Morph Button

  Here is Morph Button components

• Slarivo Morph Button

  Here is Morph Button components

• Slarivo Morph Button

  Here is Morph Button components

• Slarivo Media Provider

  Headless media player provider that creates a per-instance Zustand store, typed event emitter, and feature setup for building custom video and audio player UIs.

• Slarivo Dialog Projectstarter

  Here is minimalistic project started dialog page

• Slarivo HUD Button

  This is a styled HUD-themed button showcase page that demonstrates two custom design systems (style1 and style2) with animated entrance effects using framer-motion. Style 1 features a diagonal, tech-inspired layout, while Style 2 includes hexagonal variants in small, default, and large sizes. Buttons are interactively clickable and tailored to simulate futuristic UI components. Perfect for sci-fi interfaces, game UIs, or immersive apps where you want buttons that feel like part of a heads-up display or control deck.

• Slarivo Button

  Here is Button component

• Slarivo Button

  Here is Button component

• Slarivo Button

  Here is Button component

• Slarivo Button

  Here is Button component

• Slarivo Button

  Here is Button component

• Slarivo Button

  Here is Button component

• Slarivo Button

  Here is Button component

• Slarivo Button

  Here is Button component

• Slarivo Button

  Here is Button component

• Slarivo Dropdown Menu

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

• 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 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 Hover Button

  Here is simple minimalistic hover button

• Slarivo Button

  Here is button component by Intent Ui

• Slarivo Error 404 Page

  A responsive 404 error page component featuring a modern gradient background with animated SVG waves, centered error content, and a call-to-action button. The component displays a large "404" heading with a descriptive message and provides navigation back to the home page.

• Slarivo Link Shortner

  A sleek link shortner component with transform animations

• Slarivo Card

  Profile Card A visually polished card component to display user profile information, including statistics and action buttons. It features a subtle entrance animation and adapts seamlessly to light and dark themes.

• Slarivo Hero Modern

  Here is Hero Modern component

• Slarivo Hero Modern

  Here is Hero Modern component

• Slarivo Ripple-Button

  this is the ripple style animated button you can use making good ux

• Slarivo Button Soft Glow

  Button with Soft Glow shadows

• Slarivo Button

  Here is hover shiny button component

• Slarivo File Upload Button

  A sleek file upload button for React, built with shadcn/ui. Supports click and drag-and-drop, with file type/size validation, image previews, and file management. Customizable via onFileSelect, maxSize, allowedTypes, className, and disabled props.

• Slarivo Dialog

  Here is Dialog component

• Slarivo Dialog

  Here is Dialog component

• Slarivo Dialog

  Here is Dialog component

• Slarivo Dialog

  Here is Dialog component

• Slarivo Send Button

  A Uniquely Animated Button

• Slarivo Menu

  This is Basic menu

• Slarivo Pagination

  Here is Pagination component

• Slarivo Pagination

  Here is Pagination component

• Slarivo Pagination

  Here is Pagination component

• Slarivo Pagination

  Here is Pagination component

• Slarivo Pagination

  Here is Pagination component

• Slarivo Mission Success Dialog

  Mission Success Dialog Description: A responsive and animated dialog component to celebrate a user's achievement or prompt for a next step. It's designed with reusability and shadcn/ui principles in mind, featuring smooth entrance and exit animations.

• Slarivo Onboarding

  Onboarding Card A visually engaging, animated card component for user onboarding flows. It includes fields for profile picture upload and username entry, designed to be easily integrated into any welcome or setup screen.

• Slarivo Login 2

  Login with form and buttons

• Slarivo Form

  A form wrapper component that simplifies validation and submission with flex column layout and gap between fields.

• 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 Destructive Button

  A destructive button with a shake effect and underline animation on hover.

• Slarivo Dialog Info

  Here is dialog information filling component

• Slarivo Spider-Verse Glitch Button

  A cyberpunk-inspired animated button with glitch effects reminiscent of the Spider-Verse aesthetic. Features multi-layered glitch animations, color shifting, scanning lines, and noise effects that trigger on hover. Perfect for futuristic interfaces, gaming websites, or any design that needs that digital corruption vibe. Built with Tailwind CSS and smooth CSS animations for optimal performance.

• Slarivo Popover

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

• Slarivo Popover

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

• Slarivo Button

  Animated Hover Button Interactive button with dynamic hover effects that grab attention instantly. Perfect for CTAs, navigation, or any action where engagement matters.

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

  A floating panel that appears on demand. Built on top of Base UI Popover component with shadcn styling.

• Slarivo Base Popover

  A floating panel that appears on demand. Built on top of Base UI Popover component with shadcn styling.

• Slarivo Copy Button - Variants

  CopyButton with crossfade animation between two state/content

• Slarivo Copy Button - Variants

  CopyButton with crossfade animation between two state/content

• Slarivo Material Design 3 Button

  A high-fidelity implementation of the Google Material Design 3 (M3) button, architected specifically for shadcn/ui and Tailwind CSS. Unlike standard buttons, this component includes a custom physics-based Ripple engine (ported from Google's web components), dual-layer elevation shadows (Key + Ambient), and mathematically accurate state layers (hover/press opacity). Features: True M3 Physics: "Standard Easing" motion curves and "Press Hold" ripple logic. 5 Official Variants: Filled, Elevated, Tonal, Outlined, and Text. Tailwind Native: Styled entirely with utility classes and CSS variables (no heavy JS libraries). Radix Slot Support: Fully polymorphic (use as Link, a, or div) via the asChild prop. The perfect choice for developers who want the tactile feel of Android/Google apps within a modern React codebase.

• 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 Interfaces Button

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

• Slarivo Interfaces Button

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

• Slarivo Interfaces Button

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

• Slarivo Interfaces Button

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

• 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 Fishy Button

  A sleek button featuring floating fish that appear on hover. Credit: https://codepen.io/ash_creator/pen/GRGZYyV

• Slarivo Button

  Here is animated interactive button component

• Slarivo Newsletter

  Here is Newsletter component

• Slarivo Pricing Card

  Simple Pricing Card

• Slarivo Dialog

  A pop-up layered above the application window or dialog, which makes the background content inert.

• Slarivo Password Reset Block

  Password reset flow with email input and success confirmation state.

• Slarivo Corner Frame Animated Button

  CornerFrameAnimatedButton is a customizable, animated button component that features stylish corner-frame borders and a smooth hover gradient reveal effect. Built with framer-motion and Tailwind CSS, it provides a clean, interactive visual style without compromising accessibility or flexibility.

• Slarivo Publish Button

  A hold to publish button

• Slarivo Heartbeat Effect Button

  Here is button with heartbeat effect component

• Slarivo Rich Button

  A button component with rich styling and color variants.

• Slarivo Textarea

  A native textarea element with custom size options.

• Slarivo Flexnative Tooltip

  A Tooltip from the Flexnative UI registry with 10 variants: basic hover, four-side positioning, keyboard shortcut hint, icon-button trigger, custom open delay, rich multi-line content, light-on-dark theming, colored variants, arrow-less, and adjustable side offset. Built on Radix Tooltip.

• Slarivo Flexnative Tooltip

  A Tooltip from the Flexnative UI registry with 10 variants: basic hover, four-side positioning, keyboard shortcut hint, icon-button trigger, custom open delay, rich multi-line content, light-on-dark theming, colored variants, arrow-less, and adjustable side offset. Built on Radix Tooltip.

• Slarivo Flexnative Tooltip

  A Tooltip from the Flexnative UI registry with 10 variants: basic hover, four-side positioning, keyboard shortcut hint, icon-button trigger, custom open delay, rich multi-line content, light-on-dark theming, colored variants, arrow-less, and adjustable side offset. Built on Radix Tooltip.

• Slarivo Flexnative Tooltip

  A Tooltip from the Flexnative UI registry with 10 variants: basic hover, four-side positioning, keyboard shortcut hint, icon-button trigger, custom open delay, rich multi-line content, light-on-dark theming, colored variants, arrow-less, and adjustable side offset. Built on Radix Tooltip.

• Slarivo Flexnative Tooltip

  A Tooltip from the Flexnative UI registry with 10 variants: basic hover, four-side positioning, keyboard shortcut hint, icon-button trigger, custom open delay, rich multi-line content, light-on-dark theming, colored variants, arrow-less, and adjustable side offset. Built on Radix Tooltip.

• Slarivo Flexnative Tooltip

  A Tooltip from the Flexnative UI registry with 10 variants: basic hover, four-side positioning, keyboard shortcut hint, icon-button trigger, custom open delay, rich multi-line content, light-on-dark theming, colored variants, arrow-less, and adjustable side offset. Built on Radix Tooltip.

• Slarivo Flexnative Tooltip

  A Tooltip from the Flexnative UI registry with 10 variants: basic hover, four-side positioning, keyboard shortcut hint, icon-button trigger, custom open delay, rich multi-line content, light-on-dark theming, colored variants, arrow-less, and adjustable side offset. Built on Radix Tooltip.

• Slarivo Flexnative Tooltip

  A Tooltip from the Flexnative UI registry with 10 variants: basic hover, four-side positioning, keyboard shortcut hint, icon-button trigger, custom open delay, rich multi-line content, light-on-dark theming, colored variants, arrow-less, and adjustable side offset. Built on Radix Tooltip.

• Slarivo Status Cycle Button

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

• Slarivo Button

  Here is simple modern animated hover button component

• Slarivo Skeuomorphism in the Dark Button

  Here is CodePen Home Skeuomorphism in the Dark component

• Slarivo Search With Category

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

• Slarivo Collapsible

  Here is Collapsible component

• Slarivo Cookies Banner

  Cookies Banner with sleek design and dark mode supported

• Slarivo Location Card

  Location Card A visually polished card component to display a location with an image, title, subtitle, and an animated call-to-action button. It is fully responsive, theme-adaptive, and includes subtle animations using framer-motion.

• Slarivo Voice Button

  Here is Voice Button 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 Button

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

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

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

• 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 8bit Main Menu

  An 8-bit styled game main menu block built on the retro card and button primitives. Renders a titled menu card (Main Menu / Retro 8-bit Quest) with a vertical stack of pixel-font action buttons: Start Game, Options, High Scores, Multiplayer, and Quit.

• Slarivo Motion Number

  Here is modern number motion component

• Slarivo Card

  Here is Card component

• Slarivo Dialog box

  Make changes to your profile here. Click save when you're done. These match the style and intent of your previous dialog and are clear, concise, and user-friendly. If you want a more personalized or detailed version, let me know your preferences!

• Slarivo Spinner

  Here is Spinner component

• Slarivo Loading Button

  Here is Loading Button component

• Slarivo Loading Button

  Here is Loading Button component

• Slarivo Like Button

  Here is Like Button component

• Slarivo slide glow button

  a animation which reveals glow text "Himawari" on hover

• Slarivo Card

  A flexible container component for displaying content in a card layout with header, content, and footer sections.

• Slarivo Book A Call Button

  A polished call-to-action button featuring smooth Framer Motion spring animations where call icons transition vertically on hover for an engaging user experience.

• Slarivo Visualizer Button

  This Visualizer Button is a compact, interactive UI component built strictly with shadcn UI. It acts as a small audio visualizer embedded within a button, making it perfect for notifications, background music, or voice notes. When clicked, it plays the given audio source and animates five vertical bars to simulate audio levels in real time. The bars’ heights dynamically change to reflect the audio playback, providing instant visual feedback. The button is fully customizable with props for width, height, and class names, and it automatically adapts to light or dark themes using appropriate colors. Its minimal, functional design ensures it can seamlessly fit into any modern interface while adding a playful, engaging element to the user experience.

• Slarivo Flow Button

  A button with animated flowing dashed border on hover.

• Slarivo Joly Button

  A fully accessible button with 10+ variants including shimmer, glow, and gradient effects. Motion-powered cursor tracking and spring animations.

• 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 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 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 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 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 Flip Coin Button

  Here is flip coin button component

• Slarivo File Trigger

  Here is FIle Trigger component

• Slarivo Share Button

  Here is Share Button component

• Slarivo Event Calendar

  Here is Event Calendar component

• Slarivo Cookie Banner

  CookieBanner is a lightweight, responsive cookie consent component for Next.js built with TypeScript and TailwindCSS v4. It displays a customizable message with Accept and Decline actions, remembers the user’s choice in localStorage, and supports light/dark themes. Smooth slide-and-fade animations are powered entirely by Tailwind’s tw-animate-css utilities, ensuring no extra animation libraries are needed. This banner is fully accessible, adapts its layout across screen sizes, and can appear at the top or bottom of the viewport based on your preference — making it easy to integrate into any modern web app.

• Slarivo Drawer Inner Content

  This component demonstrates a reusable drawer system that can slide in from any direction — top, right, bottom, or left. Instead of duplicating content for each drawer, a shared DrawerInnerContent component is created and reused across all four drawers. The content includes a newsletter signup form with an email input, a subscribe button, and a cancel button. This approach keeps the code clean, consistent, and easy to maintain, while providing users with a flexible way to interact with drawers from different sides of the screen.

• Slarivo Cookies

  Here is Cookie Consent Popup component

• Slarivo Cookies

  Here is Cookie Consent Popup component

• Slarivo Cookies

  Here is Cookie Consent Popup component

• Slarivo Cookies

  Here is Cookie Consent Popup component

• Slarivo MultiState Morph Button

  The Multi-State Morphing Button is a highly interactive and practical component built with shadcn UI. Unlike a standard submit button, it provides clear visual feedback for multiple states—idle, loading, success, and error—making it ideal for real-world applications like forms, payments, or approvals. The button morphs smoothly between shapes, transitioning from a rectangle to a circle on success or error, while animated icons and spinners indicate the current state. Fully configurable in terms of colors, labels, and size, it enhances user experience by giving immediate, intuitive feedback, all while maintaining a clean, modern, and reusable design.

• Slarivo State

  Full Mailbox State This component informs the user that they have reached a limit, prompting them with primary and secondary actions. It is animated to draw attention and improve user experience.

• Slarivo Depth Button

  A button that elevates your site - literally. Built on top of the default Button from Shadcn/ui, the Depth Button adds a subtle depth effect and glossy finish that make interactions feel tactile and alive.

• Slarivo Textarea with button

  Here is textarea with button component

• Slarivo Button Magnetic

  Here is hover magnetic button component

• Slarivo Toggle

  Here is Toggle component

• Slarivo Button

  Here is Button component

• Slarivo Button

  Here is Button component

• Slarivo Button

  Here is Button component

• Slarivo Button

  Here is Button component

• Slarivo Button

  Here is Button component

• Slarivo Button

  Here is Button component

• Slarivo Timer

  This is timer

• Slarivo Pricing Card Triple

  Here is Pricing Card Triple component

• Slarivo CountdownButton

  The Countdown Button is a shadcn/ui component designed for time-sensitive actions, such as “Resend OTP” or retry mechanisms. Once clicked, the button starts a countdown timer and automatically disables itself, showing the remaining seconds (e.g., “Resend OTP in 20s”). After the countdown ends, it re-enables for further interactions. This component supports configurable sizes (sm, md, lg) and is highly reusable for workflows that require controlled user interactions, ensuring both clarity and functionality while maintaining a clean, modern UI.

• Slarivo Table Controls

  Table Controls Demo (Simulated Selection)

• Slarivo Delete Button

  An animated delete button with swipe-to-delete interaction.

• Slarivo 8-bit Toast

  Pixel-art toast notification from 8bitcn.com — wraps Sonner with retro pixel borders (Sonner inlined via esbuild).

• Slarivo The Dialog

  Here is Dialog components

• Slarivo The Dialog

  Here is Dialog components

• Slarivo The Dialog

  Here is Dialog components

• Slarivo The Dialog

  Here is Dialog components

• Slarivo The Dialog

  Here is Dialog components

• Slarivo The Dialog

  Here is Dialog components

• Slarivo The Dialog

  Here is Dialog components

• Slarivo The Dialog

  Here is Dialog components

• Slarivo The Dialog

  Here is Dialog components

• Slarivo The Dialog

  Here is Dialog components

• Slarivo The Dialog

  Here is Dialog components

• Slarivo The Dialog

  Here is Dialog components

• Slarivo The Dialog

  Here is Dialog components

• 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 8bit Pause Menu

  An 8-bit styled in-game pause menu overlay built on the retro card and button primitives. Shows a 'Paused' panel with pixel-art Resume, Restart and Quit actions.

• Slarivo Show more

  Styling component to show expanded or collapsed content.

• Slarivo Squishy card

  here is dynamic card

• Slarivo Toggle nav

  here is toggle nav component

• Slarivo SparkButton

  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 Button

  Here is animated button component

• Slarivo Shift Card

  Here is Shift Card component

• Slarivo Error Alert Dialog

  Here is Error Alert Dialog component

• Slarivo Drawer

  A drawer component for React.

• Slarivo Pagination

  Navigation component for splitting content across multiple pages with previous/next controls and page numbers

• Slarivo Dialog

  Here is Dialog component

• Slarivo Dialog

  Here is Dialog component

• Slarivo Button Hover

  Here is Button component

• Slarivo Avatar

  Here is Avatar component

• Slarivo Avatar

  Here is Avatar component

• Slarivo Expandable Button

  A button that smoothly transitions between collapsed and expanded states using spring animations. Shows only an icon when collapsed and reveals text alongside the icon when expanded, perfect for responsive layouts and space-saving interfaces.

• Slarivo Menu

  Here is Menu component

• Slarivo Menu

  Here is Menu component

• Slarivo Menu

  Here is Menu component

• Slarivo Menu

  Here is Menu component

• Slarivo Like Button

  A SImple Like Button

• Slarivo Hover Card

  Here is Hover Card component

• Slarivo Dialog

  Here is Dialog component

• Slarivo Tooltip

  Here is Tooltip component

• Slarivo Progress Button

  The ProgressButton is a versatile shadcn/ui-based component that enhances the user experience for asynchronous actions like Submit, Pay, or Upload. Unlike a regular button, it provides immediate visual feedback by showing either a spinner or a progress bar after being clicked. It supports customizable labels for loading and success states, giving users clear confirmation of action progress and completion. The progress bar mode is especially useful for longer operations such as file uploads, while the spinner mode fits quick async tasks. With built-in accessibility, smooth animations, and configurable duration, this button helps reduce uncertainty for users during wait times and makes critical interactions feel more responsive and reliable.

• Slarivo Tooltip Button

  The Tooltip Button is a shadcn/ui component that combines a standard button with a hover-triggered tooltip to provide additional context or guidance for users. It is perfect for icon-only buttons or actions that may not be immediately clear, as the tooltip explains the button’s purpose without cluttering the interface. The component supports optional icons, flexible text labels, and configurable sizes (sm, md, lg), making it highly adaptable for dashboards, toolbars, or any interactive UI. By using shadcn/ui primitives, it ensures accessibility, smooth animations, and a consistent, modern design.

• Slarivo Swipe To Confirm Button

  The SwipeToConfirmButton component is a fully theme-aware, mobile-style swipe button built using shadcn UI and Tailwind CSS. Instead of a traditional click, users swipe the button to confirm an action, making it ideal for sensitive operations like payments, form submissions, or unlocking features. The component dynamically adapts to light and dark themes, with background, text, borders, and hover states adjusting automatically for optimal readability. The swiped portion of the button also visually reflects progress with a smooth animated fill. With configurable width, height, and callbacks, it provides both an interactive user experience and a polished, modern design that seamlessly fits into any shadcn UI-based project.

• Slarivo Button Rotate

  Button Rotate with gradient background and border

• Slarivo Social Button

  Here is social button component.

• Slarivo Dropdown Menu

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

• Slarivo Dropdown Menu

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

• Slarivo 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 Minimal Button

  A clean, minimal button built on the shadcn Button with a faint diagonal hatch overlay and a soft drop shadow that adapts to light and dark themes. Understated by design.

• 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 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 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 8bit 404 Page

  A retro 8-bit 404 not-found page with a large pixel headline, decorative pixel-art character, and a retro CTA button linking back home. Built on the 8bit button primitive.

• Slarivo ButtonGroup

  common button group

• Slarivo Linear Button

  here is button component

• Slarivo Collapsible

  here is collapsible demo by indev ui

• Slarivo Gradient Slide Button

  Here is Gradient Slide Button component

• Slarivo React Shimmer Button Component: A Customizable Button with Animated Effects

  This React component renders a customizable button with various visual enhancements, including a 3D effect, hover animations, and a unique shimmer effect triggered by mouse movement. It offers options for size, variant (default or secondary), and custom shimmer color. The component utilizes CSS variables and keyframes for animation.

• Slarivo Star Button

  A simple yellow star button with hover animations, useful for starring items or adding the in favourites/wishlist. SAVE IT FOR LATER

• Slarivo Tooltip

  Here is Tooltip component

• Slarivo Tooltip

  Here is Tooltip component

• Slarivo Floating Panel

  Here is Floating Panel component

• Slarivo Hover animation Button

  Hover animation Button

• Slarivo Card

  Profile Card A visually polished card for displaying a user's profile, including an avatar, name, title, key statistics, and call-to-action buttons. It is designed to be highly reusable by accepting all content via props.

• 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 Insurance Policy Card

  Insurance Policy Card Description: A visually polished card to display key insurance policy details for a client. It includes sections for client info, policy data, a QR code, and an action button. It's designed to be easily reused with different data via props.

• Slarivo Prime Button

  Here is Prime Button component

• Slarivo Prime Button

  Here is Prime Button component

• Slarivo Prime Button

  Here is Prime Button component

• Slarivo Tooltip Position

  Here is tooltip position component

• Slarivo Figma File Button

  Here is Figma file button component

• Slarivo Button Save

  Here is button save component.

• Slarivo Checkbox

  A control allowing the user to toggle between checked and not checked.

• Slarivo Interfaces Tooltip

  A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

• Slarivo Interfaces Tooltip

  A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

• Slarivo Interfaces Tooltip

  A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

• Slarivo Interfaces Tooltip

  A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

• Slarivo Send Button

  Round send/stop button for AI chat input — idle, typing, streaming states. Self-contained port from 21st.dev Agent Elements.

• Slarivo Grid Button

  A compact button with an animated dot-matrix square glyph in an amber tile beside the label, with a tactile press-down effect. The dot-matrix loader animates a ripple across an 11-style grid.

• Slarivo Integrations Logos Section

  A centered marketing section that displays a grid of integration brand logos with a heading and a "more integrations" button.

• Slarivo Sign Up 2

  A centered sign-up card with email signup, social login buttons for Google and GitHub, and a link to an existing account.

• Slarivo Error Page 2

  A responsive full-screen 404 error page with a split layout, logo, message, back-home button, and side image.

• 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 Load More

  A load-more button with automatic infinite-scroll via IntersectionObserver, animated idle/loading/error/end states, and a bounded auto-load limit before it hands control back to the user.

• Slarivo Dynamic Square

  Here is Dynamic Squraes component

• Slarivo Amazing Button Component

  Amazing Button Component

• Slarivo JobCard

  This JobCard component is a polished, reusable UI block built with Shadcn UI and Tailwind CSS, designed to display job postings in a clean and engaging way. It features a header with a company avatar (logo or fallback initials), company name, and salary/rate information, followed by the main content section with the job title, location, type, and experience requirements. The footer provides multiple action buttons.

• 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 Marquee Hover Button

  A reusable React + TypeScript button component that replicates a marquee-on-hover animation using Tailwind CSS and Framer Motion.

• Slarivo Eclipse Button

  Here is Eclipse Button component

• Slarivo Eclipse Button

  Here is Eclipse Button component

• Slarivo Eclipse Button

  Here is Eclipse Button component

• 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

  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

  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 One Button

  Buttons component from the 21st.dev community.

• 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 Sonner Custom Color Toast

  A button that triggers a Sonner promise toast with custom loading, success, and error states and a custom accent color.

• Slarivo Ripple Effect Generator

  Add beautiful, performant ripple animations to any React element with zero configuration. Ripple Effect Generator brings Material Design's signature touch feedback to your components with intelligent sizing that ensures perfect coverage from any click point. This component can create a customized ripple effect on anything

• Slarivo Neumorph Button

  Here is Neumorph Button component

• Slarivo Drawer

  A customizable drawer component built on top of Vaul with smooth animations and flexible positioning.

• Slarivo Navbar

  Here is Navbar Component

• Slarivo Navbar

  Here is Navbar Component

• Slarivo Navbar

  Here is Navbar Component

• Slarivo Navbar

  Here is Navbar Component

• Slarivo Ripple Effect creator

  Add beautiful, performant ripple animations to any React element with zero configuration. Ripple Effect Generator brings Material Design's signature touch feedback to your components with intelligent sizing that ensures perfect coverage from any click point. This component can create a customized ripple effect on anything

• Slarivo Listbox

  Here is Listbox component

• Slarivo Wooden Cart Button

  A simple minimalistic Add To Cart button for ecommerce applications, made with tailwind css

• Slarivo News letter

  This NewsletterCard component is a reusable UI block built with Shadcn UI and Tailwind CSS that allows users to subscribe to a newsletter. It features a responsive card layout with a gradient background that adapts to both light and dark themes. Inside, it includes a title, description, email input field, and a subscribe button. The design ensures accessibility with good color contrast, rounded corners, and spacing for readability.

• Slarivo download-animation

  This is the download animation which is beautifully crafted you can use directly.

• Slarivo Email Verification Block

  Email verification interface with resend functionality and status checking.

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

  Here is Button Group component

• Slarivo Button Group

  Here is Button Group component

• Slarivo Button Group

  Here is Button Group component

• Slarivo Button Group

  Here is Button Group component

• Slarivo Button Group

  Here is Button Group component

• Slarivo Button Group

  Here is Button Group component

• Slarivo Button Group

  Here is Button Group component

• Slarivo Button Group

  Here is Button Group component

• Slarivo Native Button

  Glassmorphism-inspired button wrapping shadcn/ui Button. Adds framer-motion whileHover/whileTap spring micro-interactions, an optional glow halo (shadow + blurred radial overlay), and a loading state with Loader2 spinner + opacity pulse. Falls back to no animation when reduced-motion is requested.

• Slarivo Native Button

  Glassmorphism-inspired button wrapping shadcn/ui Button. Adds framer-motion whileHover/whileTap spring micro-interactions, an optional glow halo (shadow + blurred radial overlay), and a loading state with Loader2 spinner + opacity pulse. Falls back to no animation when reduced-motion is requested.

• Slarivo Native Button

  Glassmorphism-inspired button wrapping shadcn/ui Button. Adds framer-motion whileHover/whileTap spring micro-interactions, an optional glow halo (shadow + blurred radial overlay), and a loading state with Loader2 spinner + opacity pulse. Falls back to no animation when reduced-motion is requested.

• Slarivo Native Button

  Glassmorphism-inspired button wrapping shadcn/ui Button. Adds framer-motion whileHover/whileTap spring micro-interactions, an optional glow halo (shadow + blurred radial overlay), and a loading state with Loader2 spinner + opacity pulse. Falls back to no animation when reduced-motion is requested.

• Slarivo Native Button

  Glassmorphism-inspired button wrapping shadcn/ui Button. Adds framer-motion whileHover/whileTap spring micro-interactions, an optional glow halo (shadow + blurred radial overlay), and a loading state with Loader2 spinner + opacity pulse. Falls back to no animation when reduced-motion is requested.

• Slarivo 8-bit Drawer

  Pixel-art drawer from 8bitcn.com — retro pixel border on bottom-sheet panel. Wraps Vaul Drawer (inlined via esbuild).

• Slarivo Highlight Button

  A button with a mouse-following highlight that darkens the surface as the cursor moves, fades in a soft border on hover, and bursts a radial ripple from the exact click point. Theme-aware, with overridable highlight color, size, and border color.

• Slarivo HeroUI Alert

  HeroUI v3 Alert — status-aware feedback messages built with the real @heroui/react package. Includes default, accent, success, warning and danger statuses, action buttons, close buttons, custom indicators, compact alerts, stacked notifications, maintenance notices and custom BEM/Tailwind styling. Works in light and dark themes.

• Slarivo HeroUI Alert

  HeroUI v3 Alert — status-aware feedback messages built with the real @heroui/react package. Includes default, accent, success, warning and danger statuses, action buttons, close buttons, custom indicators, compact alerts, stacked notifications, maintenance notices and custom BEM/Tailwind styling. Works in light and dark themes.

• Slarivo Card

  Displays a card with header, content, and footer. Groups related content and actions into a bordered surface, with polymorphic sub-parts (header, title, description, action, panel, footer).

• Slarivo Reshaped File upload

  Renders an area for uploading files with a native HTML file input, handling click and drag events with an onChange handler for the uploaded file data. Supports a separate Trigger element, custom children composition, inline rendering and a headless variant with render props exposing the drag-over state.

• Slarivo Checkout Steps Breadcrumb

  A checkout progress breadcrumb with numbered step circles, completed-step checkmarks, and back/continue navigation buttons.

• Slarivo Empty State Card

  An empty state placeholder inside a card that prompts users to create or import their first item with icon, title, description, and action buttons.

• Slarivo Great UI Button

  A versatile button component supporting multiple variants, sizes, icons, and a loading state.

• Slarivo Great UI Minimal Buttons

  A tactile, retro-modern button component featuring beveled top-border highlights, inner gradients, and inset shadow detailing.

• Slarivo Great UI Minimal Buttons

  A tactile, retro-modern button component featuring beveled top-border highlights, inner gradients, and inset shadow detailing.

• Slarivo Icon Morph

  An animated icon button that smoothly morphs between two SVG states like menu/close, play/pause, plus/minus or check/close on click.

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

  Here is modern sheet component by indevui

• Slarivo Animated Gradient Button

  A modern, reusable button with animated gradients, smooth hover/tap interactions, and full dark mode support. Built with ShadCN UI, Tailwind, and Framer Motion — perfect for CTAs, forms, or landing pages.

• Slarivo Video Player

  Here is Video Player component

• Slarivo Dropdown Menu

  Here is Dropdown Menu component

• Slarivo Avatar Action Button

  The Avatar Action Button is a shadcn/ui-based component designed for login or social authentication flows, such as “Continue as John.” It features a circular avatar on the left and a label on the right, providing a clear and visually appealing user identity cue. The component automatically adjusts the avatar size, button height, and text size based on the chosen variant (sm, md, lg), ensuring a balanced and responsive design. By using a fixed avatar image or a custom source, it remains consistent and professional, making it ideal for authentication buttons, profile actions, or any scenario where user identity should be highlighted in a compact, interactive UI element.

• Slarivo MultiStep Button

  The Multi-Step Button is a shadcn/ui component that guides users through a sequence of actions by updating its label at each step. It’s perfect for multi-stage processes such as forms, onboarding flows, or confirmations, clearly indicating progress with labels like “Step 1: Fill Info → Step 2: Confirm → Step 3: Done.” The button supports configurable sizes (sm, md, lg) and seamlessly handles clicks to advance through steps, offering an intuitive and visually clear user experience. Its design leverages shadcn/ui primitives, ensuring accessibility, smooth transitions, and a modern, cohesive look in any interface.

• Slarivo Hover Preview Button

  The HoverPreviewButton component is a versatile and interactive button built entirely with shadcn UI. When hovered, it reveals a small preview popup that can display images, charts, text, or any custom content, providing users with a quick glance at additional information without leaving the page. The preview is dynamically positioned below the button and centered, ensuring a clean and intuitive interface. Fully responsive and theme-independent, this component is ideal for actions like “View Report,” image previews, or mini dashboards, enhancing user experience with an elegant, lightweight, and highly reusable design.

• Slarivo BellNotify

  Custom bell notify me button with light/illuminated animation for better UX

• Slarivo Call to Action 01

  Call to Action with logos and section

• Slarivo Download 01

  Download plugins and software with logos

• Slarivo Colorful Button

  A button with an animated gradient background that glows through cyan, blue, and purple.

• Slarivo 8-bit Button

  Pixel-art button from 8bitcn.com — wraps shadcn/ui Button with a retro variant (Press Start 2P font, hard-edge pixel borders). Drop-in API-compatible replacement.

• Slarivo Shiny Button

  A glossy indigo button with a layered gradient bezel and an inner panel that sinks with an inset glow on press, giving a polished, candy-like depth. Theme-agnostic indigo finish.

• Slarivo The Button Group

  This is a button group component

• Slarivo BeUI Shared Layout Background

  Buttons component from the 21st.dev community.

• Slarivo BeUI Button

  Buttons component from the 21st.dev community.

• Slarivo Reshaped Carousel

  Displays its children as scrollable carousel items with a configurable number of visible items. Supports gap control aligned with your product grid, full-width bleed, onScroll/onChange event handlers for syncing with other components, and imperative navigation through instanceRef methods.

• Slarivo Reshaped Dropdown menu

  Compound components for any menu composition: a Trigger that passes required attributes to your component, an overlaying Content with menu items based on MenuItem, item Sections, and nested SubMenus with automatic focus trapping. Supports Popover positioning with viewport-aware fallbacks.

• Slarivo Reshaped Dropdown menu

  Compound components for any menu composition: a Trigger that passes required attributes to your component, an overlaying Content with menu items based on MenuItem, item Sections, and nested SubMenus with automatic focus trapping. Supports Popover positioning with viewport-aware fallbacks.

• Slarivo Reshaped Dropdown menu

  Compound components for any menu composition: a Trigger that passes required attributes to your component, an overlaying Content with menu items based on MenuItem, item Sections, and nested SubMenus with automatic focus trapping. Supports Popover positioning with viewport-aware fallbacks.

• Slarivo Reshaped Dropdown menu

  Compound components for any menu composition: a Trigger that passes required attributes to your component, an overlaying Content with menu items based on MenuItem, item Sections, and nested SubMenus with automatic focus trapping. Supports Popover positioning with viewport-aware fallbacks.

• Slarivo Image Crop

  An interactive image cropper with customizable aspect ratios, circular crop mode, and apply/reset controls that returns the cropped result as a PNG data URL.

• Slarivo LiquidButton

  A physics-based liquid glass button with refractive bezel effects, specular highlights, and smooth interaction animations.

• Slarivo Sonner Toast

  A button that triggers a Sonner toast notification with a description and an undo action.

• Slarivo Pixel Fire Button

  A CTA button that fills with molten pixel fire: a doom-fire simulation on a 3px canvas floods the face from the bottom, the flames bend toward your cursor on hover, and a press sends a burst through them. Lit and unlit states, a ghost variant, and an overlay slot for spinners or success icons. Inspired by the fire CTA on the Forge landing page by ui8.ai (ui8.ai/forge), rebuilt from scratch.

• Slarivo Gooey Actions

  A floating action button whose children separate out of the trigger like liquid metal, using an SVG goo filter.

• Slarivo NeoQRbutton-2

  Ruixen Nova is a premium UI button crafted for bold digital experiences. Inspired by cosmic energy, it features layered glow animations that scale and rotate to create a futuristic, ambient effect. Built with accessibility and performance in mind, Ruixen Nova is fully customizable—supporting dynamic color themes, adjustable animation speed, and flexible HTML element types. Whether you're designing for dark or light mode, this component adapts seamlessly to elevate your product’s aesthetic while maintaining a clean, responsive layout.

• Slarivo Card

  Here is indeveui card base component

• Slarivo Dialog

  A fluid dialog with spring animations, backdrop overlay, and composable header/footer/title components. Built on Radix UI with Framer Motion.

• Slarivo Show More

  Styling component to show expanded or collapsed content.

• Slarivo Toggle Basic

  Here is Toggle component

• Slarivo Toggle Basic

  Here is Toggle component

• Slarivo Toggle Basic

  Here is Toggle component

• Slarivo Toggle Basic

  Here is Toggle component

• Slarivo Toggle Basic

  Here is Toggle component

• Slarivo Toggle Basic

  Here is Toggle component

• Slarivo Checkbox

  Here is Checkbox component

• Slarivo 8-bit Newsletter Signup

  Newsletter signup card with an email input and subscribe CTA, built in the retro 8-bit pixel style.

• 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 One Clipboard

  Buttons component from the 21st.dev community.

• Slarivo One Clipboard

  Buttons component from the 21st.dev community.

• Slarivo One Clipboard

  Buttons component from the 21st.dev community.

• Slarivo One Clipboard

  Buttons component from the 21st.dev community.

• Slarivo One Clipboard

  Buttons component from the 21st.dev community.

• Slarivo One Clipboard

  Paginations component from the 21st.dev community.

• Slarivo One Clipboard

  Buttons component from the 21st.dev community.

• Slarivo One Clipboard

  Buttons component from the 21st.dev community.

• Slarivo Brutal Button

  A NeoBrutalism style button with thick borders, high-contrast colors, and a sharp offset shadow that snaps away on press. Fully theme-aware with overridable color, border, shadow, and radius props.

• Slarivo Brutal Button

  A NeoBrutalism style button with thick borders, high-contrast colors, and a sharp offset shadow that snaps away on press. Fully theme-aware with overridable color, border, shadow, and radius props.

• Slarivo Movie Pass Button

  A ticket-style button with rounded corner cut-outs punched into each corner, like a torn cinema pass, with a quick press-scale tactile effect. Theme-aware via primary and background tokens.

• Slarivo 8bit Game Over

  An 8-bit styled game over screen block built on the retro card and button primitives. Shows a 'Game Over / Continue?' panel with pixel-art Retry and Exit buttons and an optional skull artwork pane.

• Slarivo DateRangePicker

  Composable date range picker built on React Aria DateRangePicker with DateField and RangeCalendar composition.

• Slarivo HeroUI Drawer

  HeroUI v3 Drawer — slide-out panel with placements, backdrop variants, non-dismissable, scrollable content, controlled state, forms and a navigation drawer.

• Slarivo Slot Text

  Dependency-free text-roll animation for tiny, tactile UI labels. Each character sits in its own clipped cell and slides to its new glyph with a springy overshoot — the new glyph enters from one side while the old slides out the other, chasing it by a stagger step. Pure CSS transforms, GPU-composited. Thin React wrapper over the slot-text package (npm i slot-text); supports direction, stagger, bounce and a chromatic color sweep.

• Slarivo BeUI Action Swap

  Buttons component from the 21st.dev community.

• Slarivo HeroUI Drawer

  HeroUI v3 Drawer — slide-out panel with placements, backdrop variants, non-dismissable, scrollable content, controlled state, forms and a navigation drawer.

• Slarivo HeroUI Drawer

  HeroUI v3 Drawer — slide-out panel with placements, backdrop variants, non-dismissable, scrollable content, controlled state, forms and a navigation drawer.

• Slarivo HeroUI Drawer

  HeroUI v3 Drawer — slide-out panel with placements, backdrop variants, non-dismissable, scrollable content, controlled state, forms and a navigation drawer.

• Slarivo HeroUI Drawer

  HeroUI v3 Drawer — slide-out panel with placements, backdrop variants, non-dismissable, scrollable content, controlled state, forms and a navigation drawer.

• 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 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 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 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 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 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 Page Header with Breadcrumbs

  An application page header with breadcrumbs, a status badge, and action buttons.

• Slarivo Glow Button

  A button with an animated conic-gradient glow layer behind it, supporting rotate, pulse, breathe, color-shift, flow and static glow modes.

• Slarivo Google Icon

  A single-color Google "G" SVG icon component that inherits the current text color for theme-aware usage.

• 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 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 Onboarding Stepper Progress

  An onboarding progress tracker with a step counter, percentage completion bar, and back/next navigation buttons.

• Slarivo Sync Status Toast

  A custom Sonner toast notification that displays repository sync status with branch info and action buttons.

• Slarivo Invoice Empty State

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

• Slarivo Empty State with Tabs

  An empty state block with tabs for invoices, payments, and subscriptions, each showing an icon, message, and call-to-action buttons.

• Slarivo Toast with Action Button

  A button that triggers a Sonner toast notification containing an inline action button to follow up on the completed task.

• Slarivo Pending

  A utility component and hook that applies pending/loading state to any interactive element, blocking clicks and keyboard activation with proper ARIA attributes.

• Slarivo Pending

  A utility component and hook that applies pending/loading state to any interactive element, blocking clicks and keyboard activation with proper ARIA attributes.

• Slarivo Button Spinner

  A button in loading state with an animated circular spinner, for indicating progress during form submission or async actions.

• Slarivo Message Draft

  A review card that shows a drafted email or Slack message with Send/Cancel actions and an undo grace period before it sends.

• 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 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 Copy Button

  A copy-to-clipboard button that animates between idle, copied, and error states with an SVG check draw, crossfading labels, and a clipboard fallback and reduced-motion support.

• Slarivo Press Depth

  A tactile button that presses down with depth and tilts toward the pointer when clicked, giving physical, spring-animated feedback.

• Slarivo indevuiPopover

  Here is modern popover component by indevui

• Slarivo Calendar with presets

  Here is shadcn calendar component with pressets days

• Slarivo Bg Animated Button

  Here is background animated button component

• Slarivo Leather Button

  A premium leather-textured button component with authentic stitching effects, smooth hover animations.

• Slarivo Shuffle Button

  Here is Shuffle Button component

• Slarivo Toggle Button

  Here is Toggle Button component

• Slarivo Toggle Button

  Here is Toggle Button component

• Slarivo Toggle Button

  Here is Toggle Button component

• Slarivo Toggle Button

  Here is Toggle Button component

• Slarivo Toggle Button

  Here is Toggle Button component

• Slarivo Pearl Button

  Pearl button with hover effect

• 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 Apple play button

  Here is Apple play button component

• Slarivo Split Action Button

  The Split Action Button is a versatile shadcn/ui-based component that combines a primary action with a secondary dropdown in a single, compact interface. The left side of the button triggers the main action directly, while the right side opens a dropdown menu containing additional, related actions. This design is particularly useful for scenarios like “Save” with options for “Save As…” or “Export” with multiple formats”, allowing users to access multiple related operations without cluttering the interface. Built with accessibility, responsive sizing, and shadcn/ui primitives, it ensures a consistent look and feel while improving usability for complex workflows.

• Slarivo Confirmation Button

  The Confirmation Button is a shadcn/ui-based component designed to prevent accidental actions by requiring explicit user confirmation. On the first click, the button changes its state to display a confirmation prompt along with ✅ (confirm) and ❌ (cancel) options, giving users a clear choice before proceeding. This is particularly useful for destructive or critical actions like Delete, Archive, or Submit final changes, where mistakes can have significant consequences. The component supports multiple sizes (sm, md, lg) and integrates seamlessly with Tailwind styling, making it visually consistent while improving safety and usability in interactive workflows.

• Slarivo Status Button

  The StatusButton component is a versatile and fully configurable button built with shadcn UI that visually represents real-time status using a small animated dot. It supports multiple statuses such as live, idle, offline, or any custom status, with configurable colors, dot sizes, and pulse animation speed. The component allows developers to attach callbacks for interactive actions, making it suitable for “Go Live,” activity indicators, or dashboard monitoring. Its smooth, pulsing animation enhances user experience, while the flexible API ensures it can adapt to a wide range of applications. The accompanying demo page showcases multiple variations, demonstrating its flexibility in both style and functionality.

• Slarivo Dynamic Status Button

  The DynamicStatusButton component is a sleek and professional UI element built entirely with shadcn UI. It displays an icon and label that dynamically change based on context, such as theme, weather, or system status, while using plain, neutral colors for a clean and modern appearance. Each status has its own background and text color, chosen for clarity and readability, ensuring seamless integration into dashboards, apps, or any interface. The component is fully configurable, supports smooth animated transitions between statuses, and adapts gracefully to different button sizes, making it a versatile and elegant solution for context-aware interactive buttons.

• 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 8-bit Sheet

  Pixel-art slide-out sheet from 8bitcn.com — retro pixel border on overlay panel. Wraps Radix Dialog (inlined via esbuild).

• Slarivo Dither Button

  A button with a live ordered-dithering (Bayer matrix) canvas fill that animates a subtle wave across the surface, with stroked label and configurable dither color, size, and opacity. Pure 2D canvas — no WebGL.

• Slarivo Dither Button

  A button with a live ordered-dithering (Bayer matrix) canvas fill that animates a subtle wave across the surface, with stroked label and configurable dither color, size, and opacity. Pure 2D canvas — no WebGL.

• Slarivo Dither Button

  A button with a live ordered-dithering (Bayer matrix) canvas fill that animates a subtle wave across the surface, with stroked label and configurable dither color, size, and opacity. Pure 2D canvas — no WebGL.

• Slarivo Dither Button

  A button with a live ordered-dithering (Bayer matrix) canvas fill that animates a subtle wave across the surface, with stroked label and configurable dither color, size, and opacity. Pure 2D canvas — no WebGL.

• Slarivo Dither Button

  A button with a live ordered-dithering (Bayer matrix) canvas fill that animates a subtle wave across the surface, with stroked label and configurable dither color, size, and opacity. Pure 2D canvas — no WebGL.

• Slarivo New Button

  This is button component

• Slarivo The Dialog

  This is dialog component

• Slarivo 8bit Empty

  An 8-bit styled empty state built from composable retro primitives — header, media, title, description, and content slots. Use it as a placeholder when a list, table, or view has no data yet.

• Slarivo HeroUI Calendar

  HeroUI v3 Calendar — date calendar with year picker, controlled state, week/day views, min/max, unavailable dates, multiple selection, read-only, focused value, cell indicators, multiple months, booking example and custom styles.

• Slarivo Random Letter Swap CTA Buttons

  A pair of call-to-action buttons whose labels shuffle letters in random order on hover for a glitchy text effect.

• Slarivo Call To Action 3

  A centered call-to-action section with a heading, subtext, and an inline email input with a submit button for newsletter or waitlist signups.

• Slarivo Sonner Promise Toast

  A button that triggers a promise-based Sonner toast, showing loading, success, and error states for async actions like syncing data.

• Slarivo Sonner Success Toast

  A button that triggers a success toast notification with a title and description using Sonner.

• Slarivo Payment Error Toast

  A button that triggers a Sonner error toast with a title and description to notify users about a failed payment.

• Slarivo Long Press Button

  A press-and-hold confirmation button with animated fill progress and a matching useLongPress hook for building your own hold-to-confirm interactions.

• Slarivo Modal Card

  modern modal card

• Slarivo CallToAction CTA

  CallToActionHero is a reusable React component designed to showcase a compelling call-to-action section with a modern layout, decorative background blobs, and responsive buttons. It’s perfect for landing pages, product intros, or sign-up prompts. The component is fully customizable via props and styled with Tailwind CSS.

• Slarivo pixel hover effect

  A reusable component for hover effect in buttons

• Slarivo Curtain Button

  Here is Curtain Button components

• Slarivo Outline With Icon

  Here is outline with icon component.

• Slarivo Anti Metal Button

  A sleek, dark-themed CTA button featuring a cascading dot-wave animation and a colorful accent slab that smoothly expands on hover.

• Slarivo One Alert Dialog

  Buttons 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 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 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 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 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 Animated 404 Page

  A stunning dark-themed 404 page featuring an interactive fan and a framer-motion ripple effect.

• Slarivo HeroUI Button Group

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

• Slarivo HeroUI Button Group

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

• Slarivo HeroUI Button Group

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

• Slarivo HeroUI Button Group

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

• Slarivo HeroUI Button Group

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

• Slarivo BeUI Bottom Sheet

  Buttons component from the 21st.dev community.

• Slarivo HeroUI Button Group

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

• Slarivo BeUI Theme Toggle

  Buttons 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 BeUI Drawer

  Buttons component from the 21st.dev community.

• Slarivo BeUI Create Menu

  Buttons component from the 21st.dev community.

• Slarivo BeUI 404 / Not Found

  Buttons component from the 21st.dev community.

• Slarivo BeUI Command Palette

  Buttons component from the 21st.dev community.

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

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

• Slarivo Reshaped Popover

  Overlay attached to any interactive trigger element via passed attributes, opening on click or hover. Automatically repositions within the viewport with controllable fallback positions, supports custom content padding, a Dismissible close button, custom or trigger-aligned width, controlled state and focus trapping.

• Slarivo Reshaped Popover

  Overlay attached to any interactive trigger element via passed attributes, opening on click or hover. Automatically repositions within the viewport with controllable fallback positions, supports custom content padding, a Dismissible close button, custom or trigger-aligned width, controlled state and focus trapping.

• Slarivo Reshaped Popover

  Overlay attached to any interactive trigger element via passed attributes, opening on click or hover. Automatically repositions within the viewport with controllable fallback positions, supports custom content padding, a Dismissible close button, custom or trigger-aligned width, controlled state and focus trapping.

• Slarivo Reshaped Popover

  Overlay attached to any interactive trigger element via passed attributes, opening on click or hover. Automatically repositions within the viewport with controllable fallback positions, supports custom content padding, a Dismissible close button, custom or trigger-aligned width, controlled state and focus trapping.

• Slarivo Reshaped Popover

  Overlay attached to any interactive trigger element via passed attributes, opening on click or hover. Automatically repositions within the viewport with controllable fallback positions, supports custom content padding, a Dismissible close button, custom or trigger-aligned width, controlled state and focus trapping.

• Slarivo Reshaped Popover

  Overlay attached to any interactive trigger element via passed attributes, opening on click or hover. Automatically repositions within the viewport with controllable fallback positions, supports custom content padding, a Dismissible close button, custom or trigger-aligned width, controlled state and focus trapping.

• Slarivo Reshaped Tooltip

  Tooltip attached to any interactive element by passing its attributes to the trigger. Shows on hover with automatic viewport-aware repositioning, supports a configurable position, and can wrap disabled elements via the Actionable utility to keep them accessible.

• Slarivo Reshaped Tooltip

  Tooltip attached to any interactive element by passing its attributes to the trigger. Shows on hover with automatic viewport-aware repositioning, supports a configurable position, and can wrap disabled elements via the Actionable utility to keep them accessible.

• Slarivo Reshaped Tooltip

  Tooltip attached to any interactive element by passing its attributes to the trigger. Shows on hover with automatic viewport-aware repositioning, supports a configurable position, and can wrap disabled elements via the Actionable utility to keep them accessible.

• Slarivo Gradient Shadow

  A wrapper that adds an animated, gradient glowing shadow behind its child on hover.

• Slarivo Dotted Modern

  Hero section with a dotted radial-grid background, animated open-source badge, gradient headline and call-to-action buttons.

• 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 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 Not Found Page

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

• Slarivo Button

  Button - Homlu UI

• Slarivo Great UI Aceternity Button

  A soft, convex tactile button component featuring inner shadows, active scaling states, and smooth gradients for premium feedback.

• Slarivo Loading Button

  A button that morphs its label through pending, success, and error states without layout shift when running an async action.

• Slarivo 8bit Difficulty Select

  An 8-bit styled game difficulty selection screen built on the retro card and button primitives. Renders a titled card (Select Difficulty) with EASY / NORMAL / HARD pixel-font buttons; clicking one highlights it as the active difficulty. Supports controlled and uncontrolled value, custom title/description, and vertical or horizontal layout.

• Slarivo BeUI Morphing Modal

  Buttons component from the 21st.dev community.

• Slarivo HeroUI Search Field

  HeroUI v3 SearchField — search input with clear button: descriptions, required, validation, disabled, controlled, custom icons, full width, variants and form usage.

• 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 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 call to action

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

• Slarivo Nebula CTA Glow

  A call-to-action button with a pulsing nebula glow effect animated behind it.

• Slarivo Upgrade to Pro (Liquid Metal)

  An "Upgrade to Pro" CTA with an animated liquid-metal ring (metal-fx). The pill button variant sits in a toolbar next to a search field and a menu button, which pick up a soft metal reflection via reflectionTargets (dark mode). Three presets — chromatic, silver, gold — theme-aware, WebGL-driven.

• Slarivo Upgrade to Pro (Liquid Metal)

  An "Upgrade to Pro" CTA with an animated liquid-metal ring (metal-fx). The pill button variant sits in a toolbar next to a search field and a menu button, which pick up a soft metal reflection via reflectionTargets (dark mode). Three presets — chromatic, silver, gold — theme-aware, WebGL-driven.

• Slarivo Upgrade to Pro (Liquid Metal)

  An "Upgrade to Pro" CTA with an animated liquid-metal ring (metal-fx). The pill button variant sits in a toolbar next to a search field and a menu button, which pick up a soft metal reflection via reflectionTargets (dark mode). Three presets — chromatic, silver, gold — theme-aware, WebGL-driven.

• Slarivo Download 02

  Download software with logo and button

• Slarivo Gooey Button

  This file imports and renders the GooeyButton. Crucially, it also includes the hidden SVG filter that the CSS relies on to create the merge effect.

• Slarivo HeroUI Form

  HeroUI v3 Form — accessible form wrapper with built-in validation, submit/reset handling and a custom render-function API.

• Slarivo BeUI Prediction Market

  Forms component from the 21st.dev community.

• Slarivo HeroUI Close Button

  HeroUI v3 CloseButton — an accessible icon button for dismissing dialogs, drawers, alerts, chips and other transient UI. Renders a close (X) icon by default, accepts a custom icon via children, and exposes onPress, isDisabled and full React Aria button props with hover/press/focus render states. A thin re-export of the genuine @heroui/react package with @heroui/styles, so consumers install and render the real HeroUI primitive.

• Slarivo HeroUI Close Button

  HeroUI v3 CloseButton — an accessible icon button for dismissing dialogs, drawers, alerts, chips and other transient UI. Renders a close (X) icon by default, accepts a custom icon via children, and exposes onPress, isDisabled and full React Aria button props with hover/press/focus render states. A thin re-export of the genuine @heroui/react package with @heroui/styles, so consumers install and render the real HeroUI primitive.

• Slarivo HeroUI Close Button

  HeroUI v3 CloseButton — an accessible icon button for dismissing dialogs, drawers, alerts, chips and other transient UI. Renders a close (X) icon by default, accepts a custom icon via children, and exposes onPress, isDisabled and full React Aria button props with hover/press/focus render states. A thin re-export of the genuine @heroui/react package with @heroui/styles, so consumers install and render the real HeroUI primitive.

• 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 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 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 Astryx Icon Button

  Astryx (Meta) IconButton — icon-only button with a required accessible label, shown with the built-in wrench icon.

• 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 Upvote Downvote Counter

  An animated upvote and downvote counter with smoothly transitioning numbers and color feedback on the active vote.

• Slarivo Auth Verify Email

  Email verification status card with pending, verifying, verified, expired, and error states plus a resend link with cooldown.

• Slarivo Download File Button

  A button that downloads a file from a storage provider using a presigned download URL.

• Slarivo Chevrons Up Down Icon

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

• Slarivo Hold to Confirm

  A press-and-hold button that sweeps a progress fill and only fires its confirm callback after the full hold completes, guarding destructive actions against accidental clicks.

• Slarivo Ripple Button

  A button that emits a Material-style press ripple from the exact pointer or keyboard point, with a headless useRipple hook handling pointer capture, release timing and reduced-motion.

• Slarivo Theme Switcher

  Toggles component from the 21st.dev community.

• Slarivo Floating Action Button

  Apple-Inspired Floating Action Buttons. Inspired by @KumailNanji and @ln-dev7

• Slarivo Floating Button

  A floating button is a common UI component used in user interfaces. It typically appears as a button "floating" over other content, often positioned in a corner of the screen. This button allows users to quickly perform a key action. It is also known as a Floating Action Button (FAB).

• Slarivo Chat Card

  A modern chat interface component that provides a complete messaging experience with reactions, status indicators, and theme support. Features - Message Display - Message history with timestamps - Read/delivered status indicators - User avatars and names - Message reactions with emoji - Message grouping by user - Interactive Elements - Message input with emoji picker - Send button with status feedback - Reaction system with counters - More options menu - Online status indicators - Visual Design - Light and dark theme support - Smooth transitions and animations - Clean and modern interface - Responsive layout - Accessible design

• Slarivo Theme Switcher

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

• Slarivo Download Hover Button

  A rounded download button that smoothly expands on hover and collapses when not hovered, providing a clean, interactive experience.

• Slarivo Theme Switcher

  Here is Theme Switcher component

• Slarivo Promt Input with Actions

  Here is Promt Input with Actions component

• Slarivo Shirt Parallax Card

  The ShirtParallaxCard is a sleek, interactive product advertising component designed for modern e-commerce or fashion websites. It features a clean content area with the product’s title, description, price, and a call-to-action button, while the shirt image sits in the top-right corner, outside the card boundary, instantly drawing attention. The shirt gently bounces with a subtle idle animation, giving the design a lively, premium feel. On hover, the entire card tilts with a parallax effect, the card itself scales down slightly with a soft shadow, and the shirt scales up and lifts forward with a stronger shadow, creating a dynamic push-pull motion that emphasizes the product. This combination of smooth 3D interactions, motion design, and layered layout makes the component ideal for highlighting featured products, running promotional ads, or enhancing landing pages with a visually rich, engaging showcase.

• 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 Item Card

  Order Item Card A visually polished card component for displaying an order item, featuring interactive controls and smooth animations powered by Framer Motion. It's designed to be easily customizable through props.

• Slarivo Brightness Control

  An interactive brightness control component with animated transitions, providing a user-friendly interface for adjusting brightness levels from 0-6.

• Slarivo Toolbar

  A container for grouping a set of buttons and controls.

• Slarivo Toggle Group

  Here is Toggle Group component

• Slarivo Attachment Button

  Round attachment trigger button — plus or paperclip preset, or any custom icon. Self-contained port from 21st.dev Agent Elements.

• Slarivo animation presence mode

  A reusable component for animation switch

• Slarivo ReUI Button Group

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

• Slarivo Floating Button

  Here is floating action button component

• Slarivo Status Selector

  Here is modern Status Selector component

• Slarivo Contact Cards

  The whole contact row of a personal site: a copy-email button that copies in place, a GitHub icon whose card carries a year of contributions, and any other links you add. Cards cross-fade in the direction you travel while the container morphs between their sizes. Inspired by Colin Lienard's personal site (colinlienard.com), rebuilt for React from scratch.

• Slarivo Reshaped Toggle button group

  Groups ToggleButton children with value props and manages their selection state, built on Button.Group. Supports single or multiple selection via selectionMode, controlled and uncontrolled modes through value/defaultValue, per-button disabled states and full keyboard navigation.

• Slarivo AI Suggestions

  Follow-up suggestion chips that stagger in after a reply and clear themselves once one is chosen. Respects prefers-reduced-motion.

• Slarivo AI Approval

  Human-in-the-loop approval card where the chosen option expands to fill the card while the alternatives collapse away. Respects prefers-reduced-motion.

• Slarivo Astryx Button Group

  Astryx (Meta) ButtonGroup — joins related actions into a single connected control: clipboard actions and a primary split save button.

• Slarivo Icon Button Actions

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

• Slarivo Button

  A versatile button component with multiple variants and sizes, including muted, accent, and icon sizes, built on Radix Slot for use as any element via asChild.

• Slarivo Glow Effect

  A customizable glow effect with animation modes, colors, blur, and transitions

• Slarivo Theme Switch

  Here is Theme Switch component

• Slarivo Navbars

  Here is Navbars component

• Slarivo Switch

  Choose between a set of options.

• Slarivo Base Button

  Here is Button component

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Sidebar Component

  Here is Sidebar Component

• Slarivo Save Button

  A fun save button interaction.

• Slarivo AI Actions

  A group of interactive buttons with optional tooltips, commonly used for message-level interactions like copy, like, share, etc.

• Slarivo Animated Subscribe Button

  An animated subscribe button useful for showing a micro animation from intial to final result.

• Slarivo Toast

  Here is Toast component

• Slarivo Dot Flow

  here is Dot Flow component

• Slarivo Base Button

  Here is Button component

• Slarivo Checkbox

  Here is modern minimalistic checkbox component

• Slarivo Bookmark Icon Button

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

• Slarivo Animated Radio

  An animated radio button group with a smooth sliding purple glider that moves vertically to highlight the selected option.

• 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 Referral Card

  Referral Card This component provides a visually appealing and interactive card for referral programs. It uses framer-motion for smooth animations and is built with reusability in mind, allowing you to easily customize its content through props.

• Slarivo Switch Button

  Here is Switch Button component

• Slarivo Keyboard

  Mac Keyboard

• Slarivo Help Button

  Here is help button component

• Slarivo Family Button

  Here is Family Button component

• Slarivo Field Components

  Here is Field Components

• Slarivo Frame Button

  A futuristic button with animated corner frames and tactile motion interactions. On hover the corner chevrons expand outward; supports default, secondary and outline variants with an optional glow.

• Slarivo BeUI Bouncy Accordion

  Accordions component from the 21st.dev community.

• Slarivo BeUI Tabs

  Tabs component from the 21st.dev community.

• Slarivo Liquid Button

  An animated liquid-fill button with rolling waves, rising bubbles, focus states, and reduced-motion support.

• Slarivo Copy to clipboard

  A Copy to clipboard component for headlines, typography, readable content, and animated copy, featuring clipboard, copy, code block, code-block.

• Slarivo Button

  A Button component for calls to action, controls, and interactive commands, featuring action, hover feedback, responsive behavior, theme-aware styling.

• Slarivo FloatButton

  A FloatButton component for labeling status, metadata, categories, and compact counts, featuring floating action button, floating-action-button, badge, icon button.

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

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

• Slarivo FloatButton

  A FloatButton component for calls to action, controls, and interactive commands, featuring float button, float-button, click and selection states.

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

• Slarivo Code Snippet

  A Code Snippet component for headlines, typography, readable content, and animated copy, featuring code snippet, code-snippet, code block, code-block.

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

• Slarivo Reaction

  A Reaction component for adding purposeful motion, feedback, and visual emphasis, featuring reaction, emoji, click animation, click-animation.

• 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 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 Expandable Button

  A button that smoothly transitions between collapsed and expanded states using spring animations. Shows only an icon when collapsed and reveals text alongside the icon when expanded, perfect for responsive layouts and space-saving interfaces.

• Slarivo Toggle Group

  A Toggle Group component for calls to action, controls, and interactive commands, featuring toggle group, toggle-group, toggle button, toggle-button.

• Slarivo Button Group

  A Button Group component for calls to action, controls, and interactive commands, featuring button group, button-group, icon button, icon-button.

• Slarivo Button Group

  A Button Group component for grouping contextual commands, destinations, and application actions, featuring button group, button-group, toolbar, icon button.

• Slarivo Button Group

  A Button Group component for calls to action, controls, and interactive commands, featuring button group, button-group, zoom, icon button.

• Slarivo Button Group

  A Button Group component for displaying counters, timers, dates, and changing numeric values, featuring button group, button-group, number input, number-input.

• Slarivo Attachment Button

  Round attachment trigger button — plus or paperclip preset, or any custom icon. Self-contained port from 21st.dev Agent Elements.

• Slarivo Attachment Button

  Round attachment trigger button — plus or paperclip preset, or any custom icon. Self-contained port from 21st.dev Agent Elements.

• Slarivo ReUI Button Group

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

• Slarivo ReUI Button Group

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

• Slarivo ReUI Button Group

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

• Slarivo ReUI Button Group

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

• Slarivo ReUI Button Group

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

• Slarivo ReUI Button Group

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

• Slarivo ReUI Button Group

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

• Slarivo ReUI Button Group

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

• Slarivo One Clipboard

  A One Clipboard component for calls to action, controls, and interactive commands, featuring copy, button group, button-group, icon button.

• Slarivo One Clipboard

  A One Clipboard component for calls to action, controls, and interactive commands, featuring icon button, icon-button, toolbar, outline.

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

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

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

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

• Slarivo Toggle Button

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

• Slarivo Reshaped Toggle button group

  Groups ToggleButton children with value props and manages their selection state, built on Button.Group. Supports single or multiple selection via selectionMode, controlled and uncontrolled modes through value/defaultValue, per-button disabled states and…

• Slarivo Reshaped Toggle button group

  Groups ToggleButton children with value props and manages their selection state, built on Button.Group. Supports single or multiple selection via selectionMode, controlled and uncontrolled modes through value/defaultValue, per-button disabled states and…

• Slarivo Reshaped Toggle button group

  Groups ToggleButton children with value props and manages their selection state, built on Button.Group. Supports single or multiple selection via selectionMode, controlled and uncontrolled modes through value/defaultValue, per-button disabled states and…

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

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

• 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 Astryx Toggle Button

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

• Slarivo Glassmorphism CTA

  A glowing, glass-panel call-to-action button with a rotating conic shimmer border, backdrop blur, an avatar image, and a sparkle icon, for landing-page hero and signup CTAs.

• Slarivo Dot Border Button

  An animated call-to-action button whose four corner dots and dashed border segments draw themselves in sequence on hover.

• Slarivo Launch Button

  A glowing amber gradient call-to-action button with a lightning-bolt icon, used to trigger a launch or initialize action.

• Slarivo Floating Dots CTA

  A gradient call-to-action button with rising floating dot particles and an animated arrow icon on hover, for signup or primary actions.

• Slarivo Spinning Border Button

  A pill-shaped call-to-action button with a conic-gradient border beam that spins into view on hover.

• Slarivo Gradient CTA Button

  A pill-shaped call-to-action button with a warm orange gradient, layered inset shadows, and a hover-triggered fill overlay plus a send icon.

• Slarivo Help Dropdown Menu

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

• Slarivo Button

  A versatile button component supporting multiple variants, sizes, icons, and a loading state.

• Slarivo Minimal Buttons

  A tactile, retro-modern button component featuring beveled top-border highlights, inner gradients, and inset shadow detailing.

• Slarivo Aceternity Button

  A soft, convex tactile button component featuring inner shadows, active scaling states, and smooth gradients for premium feedback.

• Slarivo Outline Toggle Buttons

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

• Slarivo R3F Macro Keypad

  A transparent four-key R3F macro pad with independent spring switches, accessible controls, drag rotation, and colorful action keycaps.

• Slarivo Glitching Button

  A Glitching Button component for calls to action, controls, and interactive commands, featuring glitch, button, animated transitions, pointer-responsive feedback.

• Slarivo Exit animation

  A Motion for React box that exits with AnimatePresence when Hide is clicked, from the official Motion examples catalog.

• Slarivo Copy Button

  Animated copy-to-clipboard button with icon swap, blur transitions, and pathLength checkmark draw.

• Slarivo Create Button

  A create button that expands into a grid menu using shared layout animations and clip-path transitions.

• Slarivo Dots Morph Button

  A button where four dots morph into crossing lines with a spring-animated SVG path transition.

• Slarivo Hold to confirm

  A Motion for React example showing long-press interaction. The button's events update a progress motion value that drives multiple animations of other motion values.

• Slarivo Floating Action Button

  A FAB that expands into a staggered vertical menu of action items with spring animations and tooltip labels.

• Slarivo Confetti

  Celebratory confetti particle explosion triggered by a button press, with spring-driven button feedback and randomised particle physics.

• Slarivo Slide To Detonate

  A slide-to-confirm safety gate that requires dragging a handle across a track before the action fires.

• Slarivo KBD in Button

  Buttons with inline keyboard shortcut hints and a Mac/Windows platform switch.

• Slarivo Get Started Button

  Bouton pill avec fleche qui suit le curseur sur 360 degres.

• Slarivo Shiny Button

  A Shiny Button component for calls to action, controls, and interactive commands, featuring button, css, cta, hover.

• Slarivo Cyber Button

  A Cyber Button component for calls to action, controls, and interactive commands, featuring button, animated button, animated-button, glowing button.

• Slarivo Ripple Buttons

  A set of five click-triggered button variants (ripple, echo, sonar, ping, flash) that animate a wave or ring from the pointer position, respecting reduced-motion preferences.

• Slarivo Encrypt Button

  A button with a hover-triggered text scramble/decrypt animation and a laser sweep highlight, useful for security or crypto-themed actions like encrypting data.

• Slarivo Animated Upvote Toggle

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

• Slarivo Kbd Button

  A button with an inline keyboard-shortcut indicator (kbd) showing the key needed to trigger the action.

• Slarivo Expandable Action Bar

  A compact row of icon actions that expands into labeled controls on hover, focus, or tap, with a shared layout highlight and touch-friendly two-tap behavior.

• Slarivo Motion Button

  An animated button with corner brackets and a sliding color panel that reacts to hover and tap/click, useful as an eye-catching call-to-action.

• Slarivo Text Fall Button

  A button whose label characters drop and settle into place with an elastic GSAP animation on hover, click, or page load.

• Slarivo Magnetic Button

  A button that pulls toward the cursor and springs back on leave, used to add a playful hover interaction to CTAs and links.

• Slarivo Action Dropdown Button Group

  A split button group pairing a primary action button with an adjacent dropdown-trigger button that reveals related actions, complete with hover and open/close micro-animations.

• Slarivo Animated Upvote Button

  An upvote/like button with a ripple effect, upward-flying particles, and a sliding animated count that increments or decrements on click.

• 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 Coupon Reveal Button

  A button that peels back like a sticker to reveal a hidden coupon code, then copies the code to the clipboard on the next click.

• Slarivo Emoji Burst Button

  A like/react button that launches emoji particles which arc, collide with the button, and settle on top, using a lightweight canvas physics loop.

• Slarivo Permissions Button

  An animated approve/reject button pair with icon micro-interactions, used for permission or access request actions.

• Slarivo Flame Button

  A cursor reactive button with a warm flame glow that follows your mouse.

• Slarivo Arrow Fill Button

  Pill button with an orange border whose circular fill expands to cover the button on hover as the label recolors and an arrow slides in.

• Slarivo Scramble Link Button

  Link button that scrambles its label into random glyphs on hover before resolving, with an optional underline and arrow icon.

• Slarivo Link Button

  Minimal link button with an animated underline and a rotating arrow icon; use it for inline text links and CTAs that need a bit of motion.

• Slarivo Action Swap Cascade

  Animated button whose label swaps letter-by-letter — the old text's characters roll away as the new ones drop in, left to right — ideal for copy/copied and other stateful action toggles.

• Slarivo Material design ripple

  A Click me button that grows a #8df0cc ripple from the pointer or Enter/Space, rebuilt from the official Motion example using motion/react.

• Slarivo Morphing Button

  An animated button that smoothly morphs into an expanded interactive state.

• Slarivo HeroUI Button Group

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

• Slarivo Metal Button

  A pill-shaped button framed by a real-time WebGL liquid-metal ring, with chromatic, silver and gold color presets.