SLARIVO / HOOKS

Hooks Components

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

• Slarivo useResponsive

  A React hook that provides responsive styles

• Slarivo Interactive 3D Analytics Dashboard Card

  Component Features 3D Perspective Effects: Real-time perspective transformation based on mouse position Subtle rotation and scaling on hover for a tactile feel Advanced Visual Design: Animated background gradients with glass morphism Multiple layers creating depth and dimension Beautiful color schemes for both light and dark modes Interactive Data Visualization: Animated bar chart with spring physics Tooltip values on hover Growth indicators with directional icons State Management: Loading state with elegant animated spinner Error state with retry functionality Smooth transitions between states Responsive and Accessible: Fully responsive design that works on all screen sizes Proper contrast ratios for accessibility Interactive elements with appropriate focus states To use this component, you'll need to install: React Tailwind CSS Framer Motion (npm install framer-motion) This component demonstrates modern UI design principles with attention to micro-interactions, performance, and visual depth that creates a premium user experience.

• Slarivo Neon Button Counter

  A simple react counter made using tailwind and useState() Hook, a good example for learners, please the buttons are neon green with hover effect which gives it a fancy trendy look

• Slarivo Drawer

  A drawer component for React.

• Slarivo Form

  Building forms with React Hook Form and Zod.

• Slarivo Terminal Card

  A React component that renders a simulated terminal interface, cycling through a predefined list of log messages at regular intervals.

• Slarivo Drawer

  A drawer component for React.

• Slarivo Simple Header

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

• Slarivo useMousePositionRef

  A custom React hook that tracks mouse/touch position using a ref to avoid re-renders. Returns a mutable ref object containing the current position relative to a container or window.

• Slarivo Spinner

  A lightweight, customizable React spinner component with dynamic sizing and smooth staggered animation for modern UIs

• Slarivo useImageUpload

  Hook for image uploading

• Slarivo Use Mobile

  use-mobile hook

• Slarivo Fullscreen Calendar

  A clean and responsive fullscreen calendar component for React applications. Built with TypeScript and Tailwind CSS, it provides a spacious layout perfect for displaying events or navigating through dates. Features Fullscreen layout with generous day cells for content Easy month navigation with previous/next controls "Today" quick access button Responsive grid layout that adapts to screen size Visual highlighting for current date and selected dates Built with TypeScript and Tailwind CSS Perfect for building event dashboards, scheduling interfaces, or any application requiring a prominent calendar view.

• Slarivo useMediaQuery

  useMediaQuery hook

• Slarivo Dashboard with Collapsible Sidebar

  This React code implements a dashboard with a collapsible sidebar featuring various options, a dark mode toggle, and displays various statistics and recent activity. It uses Lucide-React for icons and manages a dark/light theme via CSS class manipulation.

• Slarivo useAutoResizeTextarea

  A hook that automatically resizes a textarea based on its content

• Slarivo Auth Switch

  A modern animated authentication component with Sign In and Sign Up forms, social login icons, and smooth transitions between modes.

• Slarivo Event Manager

  A comprehensive event management system with full calendar functionality. Features include multiple view modes (month, week, day, and list), drag-and-drop event scheduling, color-coded categories, and a powerful tagging system. The component supports advanced search and filtering by color, tag, or category, with smooth animations and hover effects that display quick event details. Fully responsive across all devices with touch-friendly controls, horizontal scrolling filters on mobile, and an intuitive interface for creating, editing, and organizing events. Perfect for scheduling applications, project management tools, or any system requiring sophisticated calendar functionality.

• Slarivo useDimensions

  A custom React hook that tracks and returns the dimensions of a DOM element. The dimensions are updated when the element is resized, with debouncing to improve performance.

• Slarivo Full Screen Scroll FX

  React + GSAP full-screen scroll slideshow with animated sidebar navigation and smooth scroll triggered animations, fully customizable through props

• Slarivo User Dropdown

  A comprehensive user profile dropdown menu with avatar trigger, status management, and organized navigation sections. Features dark/light mode support, customizable user data, and grouped menu items for profile settings, premium features, support resources, and account management. Built with React, Tailwind CSS, and Iconify icons. Key Features: Avatar-triggered dropdown with user info display Status indicator with update submenu (Online, Focus, Offline) Organized menu sections (Profile, Premium, Support, Account) Full dark/light theme compatibility Configurable props for user data and event handlers Modern UI with icons, badges, and responsive design Perfect for SaaS platforms, dashboards, and applications requiring professional user account management interfaces.

• Slarivo Number Flow

  A React component to transition, localize, and format numbers. Dependency-free. Accessible. Customizable.

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

  Building forms with React Hook Form and Zod.

• Slarivo Sticky scroll cards section

  Sticky scroll cards section – React + Tailwind + Framer Motion

• Slarivo features

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

• Slarivo useFileInput

  A React hook for handling file input operations with validation and error handling. It supports file type restrictions, size limits, and provides a clean interface for file management. Features: • File type validation • File size limits • Error handling • File information tracking • Easy file clearing

• Slarivo useTextareaResize

  useTextareaResize

• Slarivo Animated Text

  Smoothly animate frequently–updating text, like text from a chatbot.

• Slarivo useTags

  A React hook for managing a collection of tags with support for colors, limits, and various operations. Features - Tag Management - Add/remove tags - Maximum tags limit - Color rotation - Default tags support - Change callbacks - Operations - Add single tag - Remove specific tag - Remove last tag - Check max limit - Custom color support

• Slarivo useExpandable

  A custom React hook for creating smooth expandable/collapsible elements with spring animations using Framer Motion. Parameters - `initialState` (boolean, optional): Initial expansion state. Defaults to `false`. Returns The hook returns an object with the following properties: - `isExpanded` (boolean): Current expansion state - `toggleExpand` (function): Function to toggle the expansion state - `animatedHeight` (MotionValue): Framer Motion value for animated height Features - Spring-based animations for smooth transitions - Zero-to-auto height animations - Configurable initial state - TypeScript support - Built with Framer Motion for reliable performance

• Slarivo useDebounce

  A hook that returns a debounced version of the provided value. The debounced value will only update after the specified delay has passed without any new changes to the original value.

• Slarivo useClickOutside

  A hook that handles clicks outside of a specified element

• Slarivo useMouseVector

  A custom React hook that tracks mouse/touch movement and calculates motion vectors. Provides both position coordinates and movement vectors relative to a container or the window.

• Slarivo usePagination

  usePagination hook

• Slarivo useScreenSize

  A custom React hook that provides responsive breakpoint detection with TypeScript support. Aligns with Tailwind CSS default breakpoints and provides convenient comparison methods.

• Slarivo useCopyToClipboard

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

• Slarivo useCharacterLimit

  useCharacterLimit hook

• Slarivo useMousePosition

  Hooks component from the 21st.dev community.

• Slarivo useSliderWithInput

  A React hook that manages the state and logic for a slider component with corresponding input fields. Provides validation, range constraints, and synchronized updates between slider and input values. Features - Synchronized slider and input field values - Input validation and number formatting - Range constraints for min/max values - Support for single value or range (two handles) - Reset functionality to default values

• Slarivo useElasticLineEvents

  Hooks component from the 21st.dev community.

• Slarivo useItemOverflow

  Responsive and dynamically calculates the number of items that can fit within a container without overflowing, while accounting for a "+X" overflow indicator. It automatically adjusts to container resizes and provides utilities to render responsive lists (e.g., tags, avatars, or badges) that gracefully handle overflow.

• Slarivo useDebounceCallback

  Delay function execution with useDebounceCallback, providing options for canceling, flushing, and checking if a call is pending.

• Slarivo useToggle

  Easily manage a boolean state with useToggle.

• Slarivo Loop Animation Hook

  Here is Loop animation hook

• Slarivo Hide On Scroll

  A scrollable container with a top bar that slides away as you scroll down and reveals itself when you scroll back up, with a matching useHideOnScroll hook.

• Slarivo Infinite List

  A bias-based infinite scroll wrapper and hook that manages pagination and masks child items for progressive "load more" lists.

• 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 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 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 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 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 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 Reading Progress

  A scroll-driven reading progress bar with an estimated time-left readout and a completion checkmark, plus a useReadingProgress hook for tracking how far through an article the reader has scrolled.

• 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 Snow Flakes

  Simply import and use the component anywhere in your app. It will create a full-screen overlay that doesn't interfere with user interactions.

• Slarivo Crypto Swap

  The CryptoSwapComponent is a modern, interactive crypto token swapping interface designed with advanced UX motion and clean, glassmorphic visuals. It supports live token selection, real-time price conversion, animated balance updates, slippage tolerance configuration, and a secure transaction flow with state feedback (loading, success, error). The component uses framer-motion for dynamic animations, glowing hover effects based on cursor tracking, and smooth modal transitions for selecting tokens and adjusting settings. It’s ideal for DeFi dashboards, crypto wallets, or DEX frontends looking for a polished, user-friendly swap experience that feels premium and responsive.

• Slarivo Liquid Metal Vortex

  This component uses raymarching to render a swirling vortex of reflective, metallic fluid. The UI allows you to control the vortex's color hue, the speed of its rotation and turbulence, and the complexity of the fluid's surface. The lighting is dynamic and reacts to the fluid's shape, creating realistic metallic sheens.

• Slarivo Code Block

  Code Block component used across Vercel and Next.js.

• Slarivo Dynamic Waveform

  "Dynamic Waveform" component generates a multi-layered, oscillating pattern inspired by audio visualizers and signal monitors. It uses a combination of sine waves and noise to create a constantly evolving and intricate animation. I've included new interactive controls for Wave Complexity, Amplitude, and Frequency, allowing you to transform the visual from simple, smooth waves into a complex, chaotic signal.

• Slarivo Parallax Card

  Parallax Tilt Card A visually engaging card that uses framer-motion to create a 3D parallax tilt effect based on the user's mouse position. Inner elements move at different rates to enhance the sense of depth.

• Slarivo Floating Icons Loader

  The FloatingIconsLoader component is a versatile and visually engaging React loader that animates multiple icons in a floating, staggered motion. Unlike traditional loaders, this component allows full customization: you can specify the number of icons to display, their size, and color, and even pass any React icon component to be used. Each icon follows one of three distinct animation paths, creating a dynamic and lively effect as they float, scale, and rotate smoothly across the container. Its flexible design makes it suitable for a variety of applications, from indicating loading states in dashboards and forms to adding a playful visual touch to creative websites. With full Tailwind CSS compatibility and TypeScript support, it’s easy to integrate and adapt to different themes and projects.

• Slarivo HUD Area Chart

  This is a stylized HUD-style area chart component with an SVG-based sci-fi frame, interactive data hover, and dynamic theming support. It overlays a custom dot-matrix grid, uses a clipped polygon container to shape the graph, and reacts to pointer movement by displaying real-time data feedback in the corner. Perfect for futuristic dashboards, HUDs, gaming overlays, trading UIs, or any app that needs immersive data visualization with retro-tech or cyberpunk aesthetics.

• Slarivo WaveTextCanvas

  A React component that renders bold, “WAVES” lettering as a flowing wave effect on HTML5 canvas. It uses a mask to detect text pixels and draws vertical scanlines that oscillate inside the letters with a larger amplitude and thicker stroke, while lines outside the text ripple subtly in a contrasting color. Perfect for hero titles, interactive headings, or generative text animations.

• Slarivo Liquid Reveal

  LiquidReveal is a React component that animates image loading with a dynamic liquid wipe effect. It uses SVG filters to simulate fluid distortion and waviness, creating a visually engaging reveal. Ideal for portfolios, hero sections, and immersive UI transitions.

• Slarivo Radial Animated Doodle

  Features: Fully customizable props: count: Number of animated circles (default: 100) size: Size in vmin units (default: 80) duration: Animation duration in seconds (default: 4) hue: Base hue for color rotation (default: 240) className: Additional CSS classes for styling Responsive design: Uses vmin units to maintain proportions across different screen sizes Performance optimized: Uses CSS custom properties and hardware-accelerated transforms Tailwind integration: Uses Tailwind classes where possible while maintaining the complex CSS animations Key Changes: Component structure: Created a reusable RadialAnimation component with props Tailwind classes: Used Tailwind for layout (flex, items-center, justify-center, etc.) and colors (bg-slate-900) Dynamic generation: Uses Array.from() to generate the circles programmatically

• Slarivo IMG Reveals

  LiquidReveal is a React component that animates image loading with a dynamic liquid wipe effect. It uses SVG filters to simulate fluid distortion and waviness, creating a visually engaging reveal. Ideal for portfolios, hero sections, and immersive UI transitions.

• Slarivo Hover Card

  For sighted users to preview content available behind a link.

• Slarivo Cool Blob Effect

  A fun blob effect in pure css. Uses keyframes and blur filters.

• Slarivo Scroll-Triggered Video Hero

  A robust hero section that transitions between video chapters based on viewport position. Uses sticky positioning for performance, with z-index layering for smooth cross-fades. Includes a synchronized progress indicator and accessible text overlays.

• Slarivo Asther Anomaly

  An interactive 3D web experience built with three.js. It renders a rotating, semi-transparent crystalline structure illuminated by dynamic, orbiting lights. The scene includes a deep-space starfield that creates a parallax effect in response to the user's…

• Slarivo Use Toast

  A React hook for creating and managing toast notifications with a global queue, dismiss and update controls.

• Slarivo Keyframes wildcards

  A Motion for React box that uses null wildcard keyframes on hover so scale can interrupt from the current value, from the official Motion examples catalog.

• Slarivo usePresenceData

  An example of using usePresenceData to pass custom data through AnimatePresence to exiting elements.

• Slarivo Value transform & path drawing

  An example of linking SVG path length to a drag gesture using Motion for React's easy useTransform hook.

• Slarivo Alqemist Usp

  Alqemist value proposition block pairing end-user workflow benefits with developer control.