SLARIVO / TOOLTIPS

Tooltips Components

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

• Slarivo Tooltip

  Enhanced shadcn/ui tooltip

• Slarivo Tooltip

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

• Slarivo 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 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 MarkerTooltip

  Hover tooltip content for MapLibre markers.

• Slarivo Tooltip

  Here is Tooltip component

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Tooltip

  Here is Tooltip component

• Slarivo Popover

  Enhanced shadcn/ui popover

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

  Enhanced shadcn/ui slider

• Slarivo LumaBar

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

• Slarivo AI Actions

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

• Slarivo Analytics Bento

  Polished budget bento card with smooth interactions.

• Slarivo Infinite Text Marquee

  Awesome infinite text scrolling effect using framer-motion

• Slarivo Minimal Dock

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

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

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

• Slarivo Hover Link Preview

  When a user hovers over a link, a preview of the link's destination appears.

• Slarivo Quick Tooltip Actions

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

• Slarivo HyperText with Decryption

  Interactive hypertext bio card where specific keywords decrypt into animated highlights on hover, perfect for personal sites or “about me” sections.

• Slarivo Area Chart

  Here is Area Chart component

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Tooltip

  Enhanced shadcn/ui tooltip

• Slarivo Chatgpt Prompt Input

  This is a complete replica of the chatgpt prompt input some may call it chat input or prompt box or promptbox

• Slarivo Marquee

  Very useful while showcasing comments or technologies

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Popover

  Enhanced shadcn/ui popover

• Slarivo Popover

  Enhanced shadcn/ui popover

• Slarivo Popover

  Enhanced shadcn/ui popover

• Slarivo Toggle

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

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Highlighter

  Highlighter, Particle, CTA

• Slarivo Animated Tooltip

  A cool tooltip that reveals on hover, follows mouse pointer Features: - Mouse Following: The tooltip moves and rotates with your cursor. - Spring Animation: Enjoy smooth, springy animations for a natural feel. - Hover Effects: Tooltips pop up with fade and scale effects when you hover. - Avatar Display: Circular profile pics with a stylish border. - Gradient Accents: Cool gradient lines add flair to the tooltip. - Group Layout: Stack avatars for a neat overlapping look. - Responsive Images: Next.js Image takes care of loading and optimizing images. Example Use Cases: - Team Member Display: Show team info when you hover. - User Lists: Highlight user details in social features. - Contributor Sections: Feature project contributors. - Member Grids: Showcase community or organization members. Props: - id: A unique identifier. - name: The display name. - designation: The role or title. - image: The avatar image URL.

• Slarivo Dock

  Cool Animated Dock

• Slarivo Chart

  Beautiful charts. Built using Recharts. Copy and paste into your apps. Note: If you are using charts with React 19 or the Next.js 15, see the note here - https://ui.shadcn.com/docs/react-19#recharts

• Slarivo Pricing

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

• Slarivo Bottom menu

  original by @raunofreiberg icons by @nucleoicons

• Slarivo Alert

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

• Slarivo Dock

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

• Slarivo Bolt Style Chat

  A Bolt inspired hero chat interface with a prompt input, model selector, glowing ray background, and modern dark UI for AI product landing pages.

• Slarivo Toast

  A succinct message that is displayed temporarily.

• Slarivo Bar Chart

  Here is Bar Chart component

• Slarivo Interactive Logs Table

  Observability logs panel with animated filters, search, and expandable rows

• Slarivo Toolbar

  A text editor toolbar component with toggles

• Slarivo Description

  Displays a brief heading and subheading to communicate any additional information or context a user needs to continue.

• Slarivo Lamp Tooltip

  A beautiful tooltip with a lamp/glow effect

• Slarivo Tooltip

  Here is Tooltip component

• 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 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 compose with buttons, toggle groups and inputs while keeping a single roving-tabindex focus model. Demos compose it with the Button, Tooltip and ToggleGroup components (shipped alongside).

• Slarivo Contemt Tooltip

  Here is content tooltip component

• Slarivo Hover Blog Card

  Here is hover blog component

• Slarivo Tooltip

  Here is Tooltip component

• Slarivo Tooltip

  Here is Tooltip component

• Slarivo Tooltip

  Here is Tooltip component

• Slarivo Rounded Tooltip

  Here is a rounded tooltip component

• Slarivo Error Tooltip

  Shadcn Tooltip is an easy, simple way to hint users to provide extra context, guidance, or pop-up for users in your React and Next.js applications. They help increase the usability of a website but it doesn’t mean that they need to be displayed always on your interface, especially not in forms, inputs or any other kind of interactive element for navigation. Developed with React, TypeScript and Tailwind CSS, these tooltips are lightweight, highly customizable and extremely accessible out of the box.

• Slarivo 8-bit Tooltip

  Pixel-art tooltip from 8bitcn.com — retro pixel-border bubble appearing on hover with Press Start 2P font.

• Slarivo Copy to Clipboard Tooltip

  A compact credentials card that copies API keys, endpoints, and webhook URLs to the clipboard, each row using a tooltip that confirms when the value was copied.

• Slarivo indevuitooltip

  here is indev ui tooltip

• Slarivo BeUI Tooltip

  Tooltips component from the 21st.dev community.

• Slarivo Canvas Zoom Toolbar

  A compact canvas toolbar with light/dark theme toggle, zoom in/out controls with a live percentage readout, and a reset action, each with tooltips.

• Slarivo Image Editor Toolbar

  An image editor toolbar with grouped transform, zoom, adjustment, and export actions using tooltips.

• 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 Light Tooltip via Dark Class

  A light-colored tooltip that inverts the default dark style by applying the dark class to its content, so it reads clearly on light backgrounds.

• Slarivo Tooltip Without Arrow

  A tooltip that hides its pointer arrow for a flat, clean look, shown in default and primary tones.

• Slarivo Great UI Avatar Stack

  A dynamic stack of overlapping user avatars featuring custom tooltip display variants that track hover directions or coordinates with spring dynamics.

• Slarivo Tooltip Group

  A shared-delay tooltip group where the first tooltip waits before opening and every neighbour after it appears instantly, with a single label that morphs and glides between triggers.

• Slarivo Keyboard Shortcut Toolbar

  A compact text-formatting toolbar of icon buttons that reveal tooltips showing each action's keyboard shortcut on hover.

• Slarivo Avatar Group

  An avatar group component made with framer-motion and Tailwind CSS

• Slarivo Location Tag

  A compact, interactive location indicator with a live pulsing dot and smooth text-swap animation. Hover reveals your current local time.

• Slarivo Mini Chart

  This is a mini chart which shows real time analytics.

• Slarivo Avatar Group

  A component that displays a group of avatars.

• Slarivo Social Icons

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

• Slarivo MultiOrbitSemiCircle

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

• Slarivo Input Group

  Here is Input Group component

• Slarivo Onboarding Checklist

  An Interactive Onboarding Checklist that guides users step-by-step through key actions in your app, with a slide-out checklist panel, progress indicator, and coachmarks that spotlight targeted UI elements.

• Slarivo Typewriter

  a fully-featured typewriter component with typing and word-changing effects!

• Slarivo Popover

  Here is Popover component

• Slarivo Cursor

  A custom cursor component with optional spring animations. It can be globally applied to the page or attached specifically to a parent element.

• Slarivo Tour

  Make your own product tour with shadcn/tour.

• Slarivo Type Table

  A table component for displaying type definitions and props documentation. Features - Prop descriptions with tooltips - Type information display - Default value support - Links to type documentation - Responsive design - Dark mode support

• Slarivo Cursor

  Here is advanced cursor component

• Slarivo Profile Card

  Clean identity showcase. Features a rounded, shadowed layout to highlight user details in a minimal, floating style. Ideal for portfolios, team sections, or contact cards on modern websites.

• Slarivo Tooltip

  A set of headings, vertically stacked, that each reveal an related section of content. Commonly referred to as an accordion.

• Slarivo Author Form Card

  AuthorFormCard A responsive and theme-adaptive card component for creating or updating author profiles. It features an image upload area, input fields with tooltips, and integrated animations using framer-motion.

• Slarivo Circular Command Menu

  Circular Command Menu, toggled circular menu with default 5 menu components ,easily custamizable animated menu component

• Slarivo Context Card

  Tooltip

• Slarivo Social Media

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

• Slarivo Date Badge

  Badge to display date shorten.

• Slarivo Finance Chart

  here is finance chart example

• Slarivo Tabs

  Display tab content.

• Slarivo Avatar with name

  Avatar component that displays a name tooltip on hover with directional animations.

• Slarivo Tooltip

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

• 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 Avatar Smart Group

  The Avatar Smart Group component is a versatile and reusable UI element designed to elegantly display a group of user profile images with interactive tooltips. It supports two layout variants — uniform, where all avatars are equal in size, and centered, where the middle avatar is highlighted to draw focus. Each avatar includes hover animations, smooth scaling effects, and customizable features such as size, overlap spacing, ring color, tooltip background, and hover scale intensity. Built with React and Tailwind CSS, it maintains a clean aesthetic while remaining highly configurable for any project — from team displays and contributor sections to community dashboards or collaboration tools. The component ensures a visually engaging and professional way to showcase team members or user groups.

• Slarivo Animated Menu Bar

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

• Slarivo Gooey Dock

  This Dock component is a modern, interactive navigation bar inspired by the macOS-style dock, built with React, Framer Motion, and shadcn/ui. It displays a row of circular icon buttons, each wrapped in a tooltip for clear labeling. The highlight of the component is the gooey liquid background effect: when a user hovers over an icon, a softly animated blob expands behind it, creating a smooth, fluid-like motion. Framer Motion handles the scaling and spring-based animations, making the hover transitions feel natural and responsive. To maintain clarity, only the background blobs are passed through an SVG goo filter, while the icons themselves remain crisp and sharp. This ensures a visually playful yet professional design that can be used for app shortcuts, quick actions, or feature navigation in dashboards. Overall, the component balances aesthetic depth with practical usability, giving users both an engaging interaction and a clear navigation experience.

• Slarivo Animated Tooltip

  Here is animated tooltip component

• Slarivo Health Stat Card

  The HealthStatCard component is a modern, reusable, and fully customizable Shadcn UI–based card designed for displaying health and performance metrics in an engaging, data-driven way. Built with Framer Motion for smooth, spring-based animations and Shadcn tooltips for contextual insights, it features bubble-style bars that animate in 3D on hover to make data visualization more interactive and appealing. Each bar can display a tooltip with a short description and value, making it perfect for dashboards that track metrics such as sleep quality, hydration, fitness, nutrition, or productivity. With flexible props for configuring icons, statistics, colors, legends, and animations, this component provides a clean, professional, and visually rich way to represent health-related data across any Next.js application.

• Slarivo Tree Node Tooltip

  This TreeView component is a modern, lightweight file explorer built with React, Framer Motion, and shadcn/ui. It displays a hierarchical structure of folders and files, where users can expand or collapse folders by clicking on either the folder icon or the name. Each item shows a tooltip on hover, making it easy to identify long or truncated file names. The design follows shadcn UI styling principles with clean hover effects, accent colors, and rounded corners, while Framer Motion adds smooth expand/collapse animations. This makes the component both visually appealing and intuitive to use, ideal for dashboards, code editors, or any application that needs a structured tree navigation system.

• Slarivo MarkerPopup

  Marker popups for rich location cards with labels, media, ratings, hours, and actions.

• Slarivo Context Card

  Tooltip.

• Slarivo Popover

  Here is Popover component

• Slarivo Bubble Button

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

• Slarivo Avatar Group

  Here is Avatar Group component

• Slarivo Slider

  A fluid animated slider with single and range modes, step dots, tooltip value display, and hover preview. Built on Radix UI with Framer Motion.

• Slarivo Slider

  A fluid animated slider with single and range modes, step dots, tooltip value display, and hover preview. Built on Radix UI with Framer Motion.

• Slarivo Avatar Group with Tooltip

  A visually interactive avatar group with hover effects and tooltips, allowing users to easily view and highlight avatars with smooth animations.

• Slarivo InsuranceSummaryCard

  The InsuranceSummaryCard component is a sleek, modern, and fully configurable Shadcn UI–based card designed to display key insurance details in a clean and interactive way. It features a dynamic gradient header, animated hover effects, and smooth progress visualization to represent coverage usage. Each card can show the policy number, insured and premium amounts, expiry details, and policy type, with optional tooltips for quick explanations. Built using Framer Motion for subtle motion and Shadcn UI components for consistent styling, it fits perfectly into modern dashboards or client portals. The component is reusable across multiple insurance categories—like car, health, or travel—and can easily be customized with icons, colors, and tooltips, making it ideal for professional, data-driven insurance applications.

• Slarivo Relative Time Card

  Popover to show a given date in local time.

• Slarivo Preview Card

  Here is Preview Card component

• Slarivo Marker Highlight

  A typography primitive that mimics a marker stroke sweeping behind a word while the highlighted text shifts to a contrasting color.

• Slarivo Relative Time Card

  Popover to show a given date in local time

• Slarivo Tooltip

  Here is tooltip component

• Slarivo Tooltip Chart

  Here is Tooltip Chat component

• 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 8-bit Step Area Chart

  A retro 8-bit step area chart block with hoverable data points and pixel styling.

• Slarivo Button

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

• Slarivo Sidebar Component

  Here is Sidebar Component

• Slarivo Background Components

  Here is Background Components component

• Slarivo Faq

  Here is Faq component

• Slarivo Faq

  Here is Faq component

• Slarivo Features

  Here is Features Component

• Slarivo Testimonials

  Here is Testimonials components

• Slarivo Lets Work Section

  A minimal, standout "Let's Work Together" component with a hover effect and smooth micro-interactions

• Slarivo Dot Loader

  Here is Dot Loader component

• Slarivo Button

  Here is magic button component

• Slarivo Basic Toast

  Here is Toast component

• Slarivo Container Text Flip

  Here is Container Text Flip component

• Slarivo Testimonial

  Here is Testimonial component

• Slarivo Testimonial

  Here is Testimonial component

• Slarivo Testimonial

  Here is Testimonial component

• Slarivo Typewriter Testimonial

  Here is Typewriter Testimonial component

• Slarivo Alert Toast

  Alert Toast A responsive and theme-aware alert component designed to provide contextual feedback for different user actions. It includes variants for success, warning, info, and error states, with support for both filled and subtle visual styles.

• Slarivo Feature Spotlight

  Feature Spotlight A responsive section component designed to highlight a key product feature. It juxtaposes a detailed text description, including a pre-header, main heading, and call-to-action, with a dynamic visual element. The component includes subtle, continuous animations on floating images to draw user attention and add a modern feel. It is fully theme-adaptive, using shadcn/ui variables for colors and styling.

• Slarivo Toast

  Here is Toast component

• Slarivo Dot Flow

  here is Dot Flow component

• Slarivo Pricing Component

  Pricing Component with sleek design and better handling

• Slarivo Composer Input

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

• Slarivo Testimonal Slider

  Here is Testimonal Slider component

• Slarivo OTP Dialog

  This component is an OTP (One-Time Password) verification dialog designed for secure and user-friendly authentication. It allows users to enter a 4-digit OTP sent to their email or phone, shows a live countdown timer indicating when the OTP can be resent, and provides clear feedback messages for success or errors. The layout is compact, responsive, and visually appealing, featuring centered inputs, rounded borders, and distinct buttons for verifying or resending the OTP, making the verification process intuitive and seamless.

• Slarivo Floating Label

  Here is Floating Label component

• Slarivo Testimonals Carousel

  Here is Testimonals Carousel component

• Slarivo Checkbox

  Here is modern minimalistic checkbox component

• Slarivo Feature Highlight

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

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Expandable

  Here is expandable component

• Slarivo Tilt Card

  Here is Tilt Card component

• Slarivo Notification Alert Dialog

  Here is Notification Alert Dialog component

• Slarivo Tree

  Here is Tree component

• Slarivo Expanded Tabs

  Here is Expanded Tabs component

• Slarivo Dashboard Card With Modal

  A versatile dashboard card component featuring a modal overlay for data management, designed to display user information alongside interactive elements like copy-to-clipboard functionality and update confirmations. This component excels at presenting structured data in a clean, accessible format while providing smooth blur-based transitions that enhance user experience without disrupting workflow. Ideal for administrative interfaces, policy management systems, or any application requiring organized data display with intuitive modal interactions.

• Slarivo Feature Accordion Section

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

• Slarivo Alert

  An alert component made with framer motion and tailwind css.

• 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 Hover Testimonial Card

  A sophisticated testimonial card component featuring smooth hover animations, supporter avatars grid, and elegant typography. Perfect for showcasing customer feedback with visual impact and professional polish.

• Slarivo Price

  Pricing Card Component This component is designed to be highly reusable and customizable through props. It uses framer-motion for animations, cva for handling style variants (like the "popular" state), and shadcn/ui theme variables for seamless light and dark mode support.

• Slarivo Icon Accordion

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

• Slarivo FloatButton

  Here is FloatButton component

• Slarivo Toast

  Here is Toast component

• Slarivo Comic Text

  Here is Comic Text

• Slarivo Alert Dialog Icon

  Here is Alert Dialog Icon component

• Slarivo The Typewriter

  Texts component from the 21st.dev community.

• Slarivo Alert

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

• Slarivo Floating Card

  A reusable card component

• Slarivo Chip

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

• Slarivo Accordion

  A fluid accordion with spring animations, collapsible sections, proximity hover effects in grouped mode, and smooth content transitions. Built on Radix UI with Framer Motion.

• Slarivo Feedback Toast

  The FeedbackToast is a animated UI component designed to collect quick feedback from users in a non-intrusive way. It presents a thumbs-up/down prompt with an optional comment input when negative feedback is given. This component supports delayed auto-close behavior, smooth animations via framer-motion, and flexible feedback handling through a callback function.

• Slarivo Special Card

  Here is Special Card component

• Slarivo Tag Input

  Here is tag input component

• Slarivo Hero Modern

  Here is Hero Modern component

• Slarivo Default

  Here is according default component

• 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 Vertical Bars

  Here is Vertical Bars component

• Slarivo Bar Chart

  Here is Bar Chart component

• Slarivo Icon Pagination

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

• Slarivo Accordion Space

  Here is Accordion component

• Slarivo Dot Particles

  Here is Dot Particles component

• Slarivo Folder Components

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

• Slarivo Bar Stack

  here is a bar stac

• Slarivo QuadrantChart

  A quadrant chart with tooltips

• Slarivo Hover Card

  Here is Hover Card component

• Slarivo NotificationsAlt

  This Notifications component is designed to provide users with a richer, more informative experience. Unlike a standard notification list, it allows embedding interactive elements such as links and info icons within individual notifications. The info icons are paired with tooltips (powered by shadcn UI) that appear on hover, offering additional context without cluttering the message itself. The component uses a popover aligned to the center of the bell icon, ensuring a clean, intuitive placement.

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

  Here is Tooltip component

• Slarivo Tooltip

  Here is Tooltip component

• Slarivo Prime Button

  Here is Prime Button component

• Slarivo Bar Chart

  Here is Bar Chart component

• Slarivo Kbd

  Here is Kbd component

• Slarivo Logo Cloud Grid

  A responsive grid of company logos that turns from grayscale to full color and shows a name tooltip on hover.

• Slarivo Popover

  An accessible popover panel anchored to a trigger button, with title, description, and optional compact tooltip styling, built on Base UI.

• Slarivo Inline Citations

  Prose text with inline numbered citation chips that link to sources, reveal the reference name on hover, and list all references in a footer.

• Slarivo Tabs

  A Tabs component for switching between related views without leaving the current context, featuring tabs, segmented control, segmented-control, pill.

• Slarivo Slider

  A fluid animated slider with single and range modes, step dots, tooltip value display, and hover preview. Built on Radix UI with Framer Motion.

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

  A Hover Card component for explaining controls and compact details on hover or focus, featuring hover card, hover-card, link preview, link-preview.

• 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 Floating Tooltip

  A cursor-following tooltip that floats near the pointer with springy motion, supporting a title, description, and style variants.

• Slarivo Form Fields with Tooltip Hints

  A vertical form with labeled inputs where each field label has an info icon that reveals validation hints in a tooltip on hover.

• Slarivo Chart Tooltip

  A styled tooltip content block for data charts that shows labeled values with colored dot, line, or dashed indicators next to each series.