SLARIVO / NUMBERS

Numbers Components

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

• Slarivo neumorphic counter

  a neumorphic counter that can be adapted to different uses

• Slarivo Count Up

  An animated number counter that springs to its target value when it enters the viewport, with support for decimals, thousands separators, count direction, and per-digit slide, fade, and blur effects.

• Slarivo Animated Counter

  An animated counter with increase and decrease buttons

• Slarivo Upstash Counter

  Animated number counter with smooth transitions, compact formatting, and optional increment/decrement controls for displaying Redis counters.

• Slarivo Number Ticker Real-Time Metrics Counter

  An animated statistics counter that displays large numbers clearly with a live "active" pulse indicator, ideal for user counts, page views, or total downloads.

• Slarivo Number Ticker Currency Counter

  An animated currency counter that smoothly rolls between values for displaying prices, balances, or real-time financial figures.

• Slarivo Number Ticker

  An animated number counter that smoothly tweens from a starting value to a target, with ref-based control to trigger the count on demand.

• Slarivo Animated Counter

  A simple animated counter component.

• Slarivo Count Animation

  The count animation component is designed to create a captivating user experience by animating numerical values as they increase or decrease. This effect draws the user's attention to important data, making the information more dynamic and engaging. Whether it's displaying statistics, financial figures, or progress counters, the smooth animation of numbers adds a sense of liveliness and interactivity to your interface. This example was created using Tailwind CSS and Framer Motion.

• Slarivo Rolling Digits

  An animated number counter where each digit springs and rolls vertically into place when the value changes.

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Number Ticker

  Animate numbers to count up or down to a target number

• Slarivo Sliding Number

  A component that slides numbers.

• Slarivo Sliding Number

  A component that slides numbers.

• Slarivo Sliding Number

  A component that slides numbers.

• Slarivo Countdown Timer

  Countdown Timer / Clock Countdown

• Slarivo Moving Dot Card

  A dynamic views counter card featuring an animated dot traversing the border, gradient-highlighted count display, and stylized corner lines for a sci-fi UI effect

• Slarivo Animated Circular Progress Bar

  Animated Circular Progress Bar is a component that displays a circular gauge with a percentage value.

• Slarivo Animated Counter

  A counter that animates in response to React state changes.

• Slarivo Circle Progress

  CircleProgress displays progress, completion status, or usage metrics in a circular format. It provides visual feedback about processes, tasks completion, or resource utilization. ## When to use - To show completion percentage of a task or process - To display resource usage (disk space, memory, CPU) - To create countdown or elapsed time indicators - For data visualization that needs to show parts of a whole ## Accessibility - Progress indicator includes ARIA attributes for screen readers - Value text provides detailed information about current progress value - Ensure sufficient color contrast for the progress indicator - Consider providing text alternatives that describe the progress value

• Slarivo Slider Number Flow

  Slider with animated value number by Number Flow

• Slarivo Countdown Number

  Here is Countdown Number component

• Slarivo Animated Number

  Here is Animated Number component

• Slarivo Scroll Reel Testimonials

  Testimonial carousel with a counter-rotating portrait reel and per-character rising text, the middle column scrolls one way while the outer columns slide the opposite direction.

• Slarivo Sliding Number

  Here is Sliding Number component

• Slarivo FlipCountdown

  Create a stunning, retro-style animated counter for your React applications with the FlipCountdown component. This component mimics the classic split-flap display of old-school clocks and airport departure boards, providing a visually engaging way to display numbers. Built for ultimate flexibility, FlipCountdown can handle both counting down and counting up between any two numbers, no matter how large, thanks to its use of BigInt. It's perfect for launch pages, event timers, displaying real-time statistics, or adding a dynamic flair to any dashboard. The component is fully responsive and allows for easy customization of the card and text colors to perfectly match your theme. Simply set the countFrom and countTo props and watch the numbers flip!

• Slarivo FlipCountdown

  Create a stunning, retro-style animated counter for your React applications with the FlipCountdown component. This component mimics the classic split-flap display of old-school clocks and airport departure boards, providing a visually engaging way to display numbers. Built for ultimate flexibility, FlipCountdown can handle both counting down and counting up between any two numbers, no matter how large, thanks to its use of BigInt. It's perfect for launch pages, event timers, displaying real-time statistics, or adding a dynamic flair to any dashboard. The component is fully responsive and allows for easy customization of the card and text colors to perfectly match your theme. Simply set the countFrom and countTo props and watch the numbers flip!

• Slarivo Animated Number

  Easily animate numbers.

• 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 Countdown Timer

  Countdown Timer

• Slarivo CountDown Numbers

  Here is CountDown Numbers component

• Slarivo Word Counter

  Word Count

• Slarivo 7 segment number

  7 segment number

• Slarivo counter loader

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

• Slarivo Animated Number Flip

  The Animated Number Flip component brings a sleek, odometer-like animation to number changes, making dashboards, reports, or pagination feel more dynamic and engaging. Instead of numbers simply updating, each value flips with a smooth slot-machine style motion that immediately draws attention to the change. Built with Framer Motion and styled using shadcn/ui, it integrates naturally into both dark and light themes while maintaining a professional look. Its responsive and reusable design makes it ideal for showing page numbers, key performance metrics, or live data updates in any modern web application.

• Slarivo Basic Slider

  Here is Slider component

• Slarivo Card

  Animated Steps Tracker Card This component provides a visually engaging way to display step-count data for a given period. It features a fluid counter animation for the total steps and a staggered bar chart animation, making data presentation dynamic and modern. It is fully themeable using shadcn/ui CSS variables.

• Slarivo Guest Selector

  Guest Selector A dynamic and interactive counter for selecting a number of guests, with animated visuals that update with the count.

• Slarivo Stars Scrolling Wheel

  Here is Stars Scrolling Wheel component

• Slarivo Motion Number

  Here is modern number motion component

• Slarivo Badge

  Displays a small indicator positioned relative to another element, commonly used for notification counts, status dots, and labels.

• Slarivo Badge

  Displays a small indicator positioned relative to another element, commonly used for notification counts, status dots, and labels.

• Slarivo Badge

  Displays a small indicator positioned relative to another element, commonly used for notification counts, status dots, and labels.

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Stepper

  Stepper

• Slarivo Stepper

  Stepper

• Slarivo Stepper

  Stepper

• Slarivo Stepper

  Stepper

• Slarivo Stepper

  Stepper

• Slarivo 3D Testimonails

  A marquee component continuously scrolls text, images, or videos in an infinite loop, with customizable speed, direction, and responsive design for engaging displays.

• Slarivo Banner

  Banner alert inspired by shadcn/ui format

• Slarivo Number Flow

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

• Slarivo dot-pattern

  Quote

• Slarivo Animated Blur Number

  An animated number that transitions digit-by-digit with an iOS-style spring, blurring only the digits that change. A drop-in for counters, stats, prices and live metrics.

• Slarivo Stats

  Here is Stats component

• Slarivo Shuffle Number

  Here is Shuffle Number component

• Slarivo Numbered Pagination

• Slarivo QR Code

  QR Code Generator

• Slarivo Pagination Ant

  Here is Pagination component

• Slarivo Pagination

  Here is Pagination component

• Slarivo Password Strength Meter

  Visual indicator for password strength with validation criteria.

• Slarivo Number Input

  Here is Number Input component

• Slarivo Number Pad

  A customizable number pad component for entering numeric values, supporting various formats like currency, phone, decimal, integer, percentage, pin, and time. Features both button-based and keyboard input with type-specific validation and formatting.

• Slarivo Badge

  Displays a small indicator positioned relative to another element, commonly used for notification counts, status dots, and labels.

• Slarivo Badge

  Displays a small indicator positioned relative to another element, commonly used for notification counts, status dots, and labels.

• Slarivo Badge

  Displays a small indicator positioned relative to another element, commonly used for notification counts, status dots, and labels.

• Slarivo Badge

  Displays a small indicator positioned relative to another element, commonly used for notification counts, status dots, and labels.

• Slarivo Follower Counter

  Here is follower counter card

• 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 Animated Live Visitor

  Animated Avatars Live Visitor Counter

• Slarivo Animated Stepper

  A draggable stepper component that lets users increment or decrement a number by dragging up or down. It includes smooth animations, clamping between min and max values, and works with both mouse and touch input.

• Slarivo 8-bit Pagination

  Pixel-art pagination control from 8bitcn.com — pixel-corner border on active page, retro chevron prev/next.

• Slarivo BeUI Number Animation

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

• 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 Pulse Ladder

  An animated dot-matrix loading spinner whose lit dots trace a clockwise snake route column by column across a 5x5 grid.

• Slarivo Animate Digits

  A number display where each digit blur-slides on change, animating only the digits that actually change — ideal for timers, counters, and live metrics.

• Slarivo Points Badge

  Badges component from the 21st.dev community.

• Slarivo 8bit CTA 1 — Comparison

  An 8-bit styled CTA comparison block: a retro card with a three-column us-vs-them feature table, built on the 8bit card primitive with the Press Start 2P pixel font.

• Slarivo HeroUI Number Field

  HeroUI v3 NumberField — numeric input with steppers, min/max, step values, format options, validation, variants and form usage.

• Slarivo HeroUI Number Field

  HeroUI v3 NumberField — numeric input with steppers, min/max, step values, format options, validation, variants and form usage.

• Slarivo HeroUI Number Field

  HeroUI v3 NumberField — numeric input with steppers, min/max, step values, format options, validation, variants and form usage.

• Slarivo HeroUI Number Field

  HeroUI v3 NumberField — numeric input with steppers, min/max, step values, format options, validation, variants and form usage.

• Slarivo HeroUI Number Field

  HeroUI v3 NumberField — numeric input with steppers, min/max, step values, format options, validation, variants and form usage.

• Slarivo HeroUI Number Field

  HeroUI v3 NumberField — numeric input with steppers, min/max, step values, format options, validation, variants and form usage.

• Slarivo Number Flow

  An animated numeric stepper with rolling, blur-transitioned digits and increment/decrement buttons for counters and quantity inputs.

• Slarivo countdown

  A reusable component for countdown

• Slarivo Role Filter Chips

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

• Slarivo ReUI Button Group

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

• Slarivo ReUI Number Field

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

• Slarivo Tags Breadcrumb

  A tag list Breadcrumb component with counters, ideal for displaying categories, filters, or topics with their associated counts.

• Slarivo Number Flow Trading

  Animated trading price display that smoothly transitions the currency value and percentage change with a colored up/down indicator.

• Slarivo Animated Countdown

  A flip-style countdown timer with animated number transitions and modern, digital, minimal, and classic variants.

• Slarivo Number Ticker

  An animated number counter that smoothly tweens from a starting value to a target, with ref-based control to trigger the count on demand.

• Slarivo Stepper

  Stepper

• Slarivo Sidebar Component

  Here is Sidebar Component

• Slarivo Background Components

  Here is Background Components component

• Slarivo Integrations Component

  Here is Integrations Components

• Slarivo Stacking card

  Here is scroll stacking card

• Slarivo CTA with Marquee

  Here is CTA with Marquee component

• Slarivo CTA with Marquee

  Here is CTA with Marquee component

• Slarivo Pricing Cards

  Here is Pricing Cards components

• Slarivo Card Carousel

  Here is Card Carousel component

• Slarivo Pie Chart

  Here is Pie Chart component

• Slarivo Button

  Here is magic button component

• Slarivo argent-loop-infinite-slider

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

• Slarivo Kanban Board

  Here is Kanban Board component

• Slarivo 3D Marquee

  Here is 3D Marquee component

• Slarivo Scroll Card

  Here is scrolling stacking card

• Slarivo Marquee

  Infinite scrolling marquee component with customizable speed and direction.

• Slarivo Registration Stepper

  Registration Stepper A responsive and animated stepper component designed to guide users through a multi-step process. It visualizes the current, completed, and pending steps using an accordion-style layout with smooth transitions powered by framer-motion. The component is built with shadcn/ui principles, ensuring it's theme-adaptive and highly customizable through props.

• Slarivo Bot Detection

  Here is Bot Detection component

• Slarivo Particle Hero

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

• Slarivo Cursor Cards

  Here is Cursor Cards component

• Slarivo Security Card

  Here is Security Card component

• Slarivo dock

  Here is dock component

• Slarivo Financial Score Cards

  This is a beautiful financial score card component with animated half-circle progress indicators, strength badges, and staggered entrance animations.

• Slarivo Numeric Input

  A customizable numeric input component with increment/decrement buttons and a visual progress indicator. Features - Input Controls - Increment/decrement buttons - Min/max value constraints - Custom step size - Default value support - Visual Feedback - Progress bar indicator - Focus states - Min/max labels - Dark mode support

• Slarivo Morphing Page Dots

  The Morphing Page Dots component is a sleek, interactive pagination indicator that replaces traditional numbers with animated dots. Instead of static circles, the active dot dynamically morphs into a pill shape, creating a smooth, modern transition that clearly highlights the current page. A subtle ripple effect enhances the interaction whenever the page changes, adding polish without overwhelming the UI. All inactive dots remain visible in a muted tone, ensuring clarity and accessibility across light and dark themes. Navigation is handled through clean Lucide arrow icons, giving users intuitive control without bulky buttons. This component is especially well-suited for carousels, sliders, or any multi-page content where a minimal yet visually engaging pagination experience is desired.

• Slarivo Circular Command Menu

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

• Slarivo Image Cursor Trail

  A unique interactive component

• Slarivo Fraud Card

  Here is Fraud Card component

• Slarivo Selector Chips

  Selector Chips are used to display a list of items that can be selected.

• Slarivo Notification Center

  Here is Notification Center component

• Slarivo Card

  Stat Card This card is designed to display a key metric, its title, and a percentage change from a previous period. It features a count-up animation for the main value and uses theme-aware colors for positive and negative trends.

• Slarivo Pin List

  Here is animated Pin List component

• Slarivo Horizontal Bar Chart

  Here is horizontal bar chart

• Slarivo Linear Card

  Here is linear card component

• Slarivo The Pagination

  Navigation Menus component from the 21st.dev community.

• 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 QR Code Generator

  Here is QR Code Generator component

• Slarivo Card

  Review Summary Card This component provides an animated display for product or service ratings. It features a count-up animation for the rating and review numbers and a staggered animation for the stars, making the presentation dynamic and engaging.

• Slarivo Image Masking

  Here is image masking componen

• Slarivo Number Field

  Here is Number Field component

• Slarivo Stats Card

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

• Slarivo Tracker Card

  Package Tracker Card This component provides a visually appealing card to display package tracking information. It's designed to be highly reusable, accepting props for status, package details, destination, and more.

• Slarivo Bar Visualizer

  Here is Bar Visualizer component

• Slarivo Activity Stats Card

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

• Slarivo Card

  Spending Limit Card A responsive card component that displays a spending limit with an animated, segmented progress bar.

• Slarivo Processing Card

  Here is Processing Card component

• Slarivo Battery Card

  Battery Card A visually polished component to display device battery status, featuring a dynamic, animated liquid-fill effect that reflects the current charge level.

• Slarivo Editable Chip

  An interactive editable chip component with smooth animations for editing.

• Slarivo System Monitor

  A system monitor component, can be used for resources, AI agents, GPU, CPU, network, etc.

• Slarivo Activity with Number Flow

  A component of social media sharing buttons with Number Flow animations

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

  Infinite scrolling slider component that smoothly loops through its children. It supports both horizontal and vertical directions, with customizable speed and speed on hover. Ideal for creating continuous carousels, marquee displays, or dynamic content showcases.

• Slarivo Infinite Slider

  Infinite scrolling slider component that smoothly loops through its children. It supports both horizontal and vertical directions, with customizable speed and speed on hover. Ideal for creating continuous carousels, marquee displays, or dynamic content showcases.

• Slarivo Infinite Slider

  Infinite scrolling slider component that smoothly loops through its children. It supports both horizontal and vertical directions, with customizable speed and speed on hover. Ideal for creating continuous carousels, marquee displays, or dynamic content showcases.

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Interactive Icon Cloud

  An interactive 3D tag cloud component

• Slarivo Scroll Morph Hero

  A stunning hero section that morphs from a scattered layout to a circle, and finally to a scroll-driven interactive rainbow arc.

• Slarivo AI Chat Input

  Animated and interactive AI chat input component.

• Slarivo Interactive Selector

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

• Slarivo Interactive Globe

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

• Slarivo IntegrationHero

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

• Slarivo AI Assistant Interface

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

• Slarivo infinite grid integration

  A reusable component for grid integration animation.

• Slarivo Marquee

  Marquee, Scroll infinite

• Slarivo Interactive Neural Vortex Background

  This code creates a dynamic, immersive WebGL background featuring a swirling, organic "neuro" effect that reacts to user interaction

• Slarivo Interactive Accordion

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

• Slarivo Infinite Text Marquee

  Awesome infinite text scrolling effect using framer-motion

• Slarivo Animated Hero Section

  PromptingIsAllYouNeed: Interactive Pixel-Art Pong Canvas Celebrate the spirit of innovation with PromptingIsAllYouNeed, a unique React component that transforms your browser into an interactive, full-screen Pong-like game. This component ingeniously spells out the phrase "PROMPTING IS ALL YOU NEED" using a grid of customizable pixels, which then become breakable blocks in a classic arcade experience. To celebrate the 21st Dev anniversary, here's a description of your PromptingIsAllYouNeed component, perfect for sharing! PromptingIsAllYouNeed: Interactive Pixel-Art Pong Canvas Celebrate the spirit of innovation with PromptingIsAllYouNeed, a unique React component that transforms your browser into an interactive, full-screen Pong-like game. This component ingeniously spells out the phrase "PROMPTING IS ALL YOU NEED" using a grid of customizable pixels, which then become breakable blocks in a classic arcade experience. What It Is: This component renders a dynamic canvas where a bouncy ball navigates the screen, interacting with four paddles positioned at each edge. The core phrase, "PROMPTING IS ALL YOU NEED," is displayed in a retro pixel-art style. As the ball collides with these pixels, they change color, simulating a "hit" effect, much like breaking blocks in a game of Breakout. The paddles on all four sides automatically track and follow the ball's movement, keeping the action continuous and mesmerizing. Key Features: Pixel Art Text: The central message "PROMPTING IS ALL YOU NEED" is rendered using custom pixel maps for each letter, offering a distinct retro aesthetic. Interactive Gameplay: A ball continuously bounces around the screen, changing direction upon hitting the canvas edges, the paddles, or the pixel-art letters. Dynamic Paddles: Four automated paddles (top, bottom, left, right) intelligently track the ball's position, ensuring constant interaction and deflections. Breakable Pixels: Each time the ball hits a pixel in the text, its color changes from white to gray, visually indicating a "hit." Responsive Design: The canvas and all game elements (pixel size, ball radius, paddle dimensions, and speeds) dynamically adjust to fit any screen size, ensuring a seamless experience across devices. Configurable Colors: Easily customize the background, ball, paddle, text, and hit-pixel colors directly within the component's constants. Smooth Animations: Utilizes requestAnimationFrame for fluid game loops, providing a smooth and engaging visual experience.

• Slarivo PricingSlider Loops

  1:1 replica of Loops pricing. An interactive pricing calculator component designed to help users estimate their monthly cost based on subscriber count. It features a range slider limited to discrete pricing breakpoints (from 0 to 1M+ subscribers) and dynamically updates both the subscription label and corresponding price in real time.

• Slarivo Animated Badge

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

• Slarivo Ruixen Stats

  A bold, asymmetric analytics section where a hero CountUp figure overlays a live area chart, instantly drawing focus. Floating side stats and a clean CTA create a premium, dashboard-inspired Ruixen UI showcase.

• Slarivo Text Marquee

  Animated text marquee component with vertical scrolling.

• Slarivo Interactive-Gradient-Background

  Interactive Graident Background with pointer movement

• Slarivo Interactive Particle Typography

  A React component that renders a full-screen interactive particle animation forming the word "21ST.DEV". Particles are attracted to text-shaped targets and respond to mouse or touch movements, creating a dynamic typography effect.

• Slarivo Globe Interactive

  A WebGL globe with clickable markers that expand to show user counts. Click markers to toggle detail panels.

• 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 Cyber Matrix Hero

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

• Slarivo Event Countdown Card

  This Event Countdown Card is a fully animated promotional block designed to highlight and convert users for upcoming live events. It features a real-time countdown timer, urgency cues (like “Starts Soon!”), dynamic hover states, and pulsing time units—all wrapped in a theme-aware, motion-optimized layout. It supports image backdrops, attendee stats, and customizable join actions. Perfect for workshop landing pages, webinars, tech meetups, product launches, or any scenario where live countdown urgency drives engagement and conversions.

• Slarivo Interactive Hover Button

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

• Slarivo Hero Block

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

• Slarivo Orbiting Carousel with Animated Icons

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

• Slarivo Globe Live Badge

  A WebGL globe with live streaming badges showing real-time viewer counts at each marker location.

• Slarivo NumberField [react-aria-components]

  A NumberField allows users to enter a number, and increment or decrement the value using stepper buttons or the keyboard. Number fields can be built with <input type="number">, but the behavior is very inconsistent across browsers and platforms, it supports limited localized formatting options, and it is challenging to style the stepper buttons. NumberField helps achieve accessible number fields that support internationalized formatting options and can be styled as needed.

• Slarivo Globe Analytics

  A WebGL globe with real-time visitor analytics badges. Numbers update live with trend arrows showing growth.

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

  Interactive Dots with props

• Slarivo Interactive String

  An interactive canvas of glowing strings that respond to mouse movement with elegant animations.

• Slarivo Text Scrammble

  Beautiful Text Scramble effect

• Slarivo Number Input

  Here is Number Input component

• Slarivo Number Input

  Here is Number Input component

• Slarivo Number Input

  Here is Number Input component

• Slarivo Number Input

  Here is Number Input component

• Slarivo Number Input

  Here is Number Input component

• Slarivo Number Input

  Here is Number Input component

• Slarivo Pagination

  Here is Pagination component

• Slarivo Interactive Canvas

  Interactive Canvas with dot pattern frid

• Slarivo Vertical Bars

  Here is Vertical Bars component

• Slarivo Stats 2

  Stats with numbers

• Slarivo Correct Number Input

  This is a sleek, minimal number input with custom chevron buttons and a floating label. It hides the browser’s default arrows, keeps the label clean, and ensures 0 doesn’t overlap, working seamlessly in both light and dark themes.

• Slarivo tech-curosr

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

• Slarivo Flip Coin Button

  Here is flip coin button component

• Slarivo Dot Particles

  Here is Dot Particles component

• Slarivo Interactive Dots

  You can customize colors, spacing, dot size, repel force, and other parameters through props, and it includes proper cleanup and responsive behavior.

• Slarivo Pricing Card Triple

  Here is Pricing Card Triple component

• Slarivo Chip

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

• Slarivo Mouse Following Line

  Mouse-Following Line Field Animation A dynamic grid of lines that react and rotate smoothly toward cursor movement, creating an engaging motion effect. Perfect for interactive backgrounds, modern websites, or eye-catching hero sections.

• Slarivo Points Chart

  Charts & Data Viz component from the 21st.dev community.

• Slarivo Streak Badge

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

• Slarivo Tracker Card

  Calorie Tracker Card A visually engaging card to track daily calorie intake. It features an animated counter, a dynamic progress bar, and a list for food suggestions, all styled using shadcn/ui principles.

• Slarivo Reshaped Number field

  Numeric input with increase/decrease controls and keyboard arrow support, based on TextField so it inherits its variants and sizes. Works in controlled and uncontrolled modes, supports icons, and integrates with the FormControl utility for labels and status messages.

• Slarivo Reshaped Number field

  Numeric input with increase/decrease controls and keyboard arrow support, based on TextField so it inherits its variants and sizes. Works in controlled and uncontrolled modes, supports icons, and integrates with the FormControl utility for labels and status messages.

• Slarivo Reshaped Number field

  Numeric input with increase/decrease controls and keyboard arrow support, based on TextField so it inherits its variants and sizes. Works in controlled and uncontrolled modes, supports icons, and integrates with the FormControl utility for labels and status messages.

• Slarivo Reshaped Number field

  Numeric input with increase/decrease controls and keyboard arrow support, based on TextField so it inherits its variants and sizes. Works in controlled and uncontrolled modes, supports icons, and integrates with the FormControl utility for labels and status messages.

• Slarivo you can scroll.

  you can scroll. component

• Slarivo HalftoneTrail

  HilftoneTrail component

• Slarivo HeroUI Number Field

  HeroUI v3 NumberField — numeric input with steppers, min/max, step values, format options, validation, variants and form usage.

• Slarivo HeroUI Number Field

  HeroUI v3 NumberField — numeric input with steppers, min/max, step values, format options, validation, variants and form usage.

• Slarivo HeroUI Number Field

  HeroUI v3 NumberField — numeric input with steppers, min/max, step values, format options, validation, variants and form usage.

• Slarivo Spiral Animation

  A mesmerizing animated golden spiral component featuring 600+ pulsing dots arranged in the mathematically perfect Fibonacci spiral pattern. Each dot pulses with smooth radius and opacity animations, creating a hypnotic wave effect that flows from center to edge. Built with TypeScript, fully customizable with props for dot count, colors, size, and animation timing. Perfect for landing pages, loading screens, or any interface that needs an elegant mathematical visualization.

• Slarivo Simple Code Block

  A clean code block component that shows the formatted text with the line numbers. Credit: https://ui.aceternity.com/components/code-block

• Slarivo Animated OTP

  Here is Animated OTP component

• Slarivo ReUI Number Field

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

• Slarivo ReUI Number Field

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

• Slarivo ReUI Number Field

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

• Slarivo ReUI Number Field

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

• Slarivo ReUI Number Field

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

• Slarivo Unit Field

  Headless, composable numeric input field with drag-to-scrub, keyboard stepping, format/parse controls, and committed-value events for building any unit field.

• Slarivo Unit Field

  Headless, composable numeric input field with drag-to-scrub, keyboard stepping, format/parse controls, and committed-value events for building any unit field.

• Slarivo Card

  Article Card This card component is designed to showcase an article, event, or location in a visually appealing and structured format. It's fully responsive and uses shadcn/ui theme variables for seamless light/dark mode integration.

• Slarivo Coming Soon Countdown

  A coming-soon page section with a live countdown timer and an email signup form.

• Slarivo Flip Clock

  This NeonClock component is a modern, animated digital clock built with React and Framer Motion. It features glowing neon digits with smooth 3D flip transitions, giving it a futuristic cyberpunk feel. The clock updates in real time, displaying hours, minutes, and seconds inside a sleek dark panel with soft shadows and vibrant green highlights. Its compact, all-in-one design makes it easy to drop into any project while adding a visually striking, animated centerpiece.

• Slarivo Loading Overlay

  The component animates a percentage counter from 0% to 100% over 2 seconds, then clips out the overlay and reveals the content with a smooth fade-in effect.

• Slarivo Clock

  Clock watch time with current location

• Slarivo Relative Time

  Here is Relative Time component

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

  Here is Toolbar component

• Slarivo Brightness Control

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

• Slarivo Flip Clock

  A flip clock UI that displays real-time or a countdown to a target date with smooth 3D flip digit animations, size and color variants.

• Slarivo Analog Clock Component

  This React component renders an analog clock with moving hands, hour markers, minute markers, and a digital time display. It uses the useState hook to track the current time and useEffect to update the time every second. The clock hands' positions are calculated based on the current time.

• Slarivo Timer

  A countdown/stopwatch timer component with customizable duration, variants, sizes, and compound parts for building custom timers.

• Slarivo Snail Timer

  An animated countdown timer where a snail slowly crawls across the screen leaving a dust trail while the remaining seconds tick down.

• Slarivo Clock Ring

  A circular loading spinner with a rotating clock-hand tick that inherits the current text color.

• Slarivo Clock 5 Icon

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

• Slarivo Weather Widget

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

• Slarivo Calendar

  Here is Calendar component

• Slarivo Calendar

  A Calendar component for date planning, schedules, events, and availability, featuring calendar, date picker, date-picker, shadcn/ui.

• Slarivo Calendar

  A Calendar component for date planning, schedules, events, and availability, featuring calendar, date picker, date-picker, date.

• Slarivo Calendar

  A Calendar component for date planning, schedules, events, and availability, featuring calendar, date picker, date-picker, date.

• Slarivo Calendar

  A Calendar component for date planning, schedules, events, and availability, featuring calendar, date picker, date-picker, date.

• Slarivo Relative Time

  A Relative Time component for highlighting key metrics, performance, and business outcomes, featuring relative time, relative-time, time, date.

• Slarivo Subagent Tool

  Render a subagent task row with elapsed time and the last nested tool while running. State-driven (completed / pending / interrupted). Self-contained port from 21st.dev Agent Elements.

• Slarivo Reshaped Calendar

  Functional without any properties by default, rendering the current month with single date selection and a month-selection view. Supports controlled and uncontrolled values, range selection, rendering multiple months, individual selected and disabled…

• Slarivo Reshaped Calendar

  Functional without any properties by default, rendering the current month with single date selection and a month-selection view. Supports controlled and uncontrolled values, range selection, rendering multiple months, individual selected and disabled…

• Slarivo Reshaped Calendar

  Functional without any properties by default, rendering the current month with single date selection and a month-selection view. Supports controlled and uncontrolled values, range selection, rendering multiple months, individual selected and disabled…

• Slarivo Reshaped Calendar

  Functional without any properties by default, rendering the current month with single date selection and a month-selection view. Supports controlled and uncontrolled values, range selection, rendering multiple months, individual selected and disabled…

• Slarivo Reshaped Calendar

  Functional without any properties by default, rendering the current month with single date selection and a month-selection view. Supports controlled and uncontrolled values, range selection, rendering multiple months, individual selected and disabled…

• Slarivo Reshaped Calendar

  Functional without any properties by default, rendering the current month with single date selection and a month-selection view. Supports controlled and uncontrolled values, range selection, rendering multiple months, individual selected and disabled…

• Slarivo Reshaped Calendar

  Functional without any properties by default, rendering the current month with single date selection and a month-selection view. Supports controlled and uncontrolled values, range selection, rendering multiple months, individual selected and disabled…

• Slarivo Reshaped Calendar

  Functional without any properties by default, rendering the current month with single date selection and a month-selection view. Supports controlled and uncontrolled values, range selection, rendering multiple months, individual selected and disabled…

• Slarivo Reshaped Calendar

  Functional without any properties by default, rendering the current month with single date selection and a month-selection view. Supports controlled and uncontrolled values, range selection, rendering multiple months, individual selected and disabled…

• 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 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 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 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 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 HeroUI Time Field

  Time input field with labels, descriptions, and validation built on React Aria, from HeroUI v3. Segmented hour/minute editing with a blue accent focus highlight, prefix/suffix icons, controlled value, validation (invalid), disabled and on-surface variants.

• Slarivo HeroUI Time Field

  Time input field with labels, descriptions, and validation built on React Aria, from HeroUI v3. Segmented hour/minute editing with a blue accent focus highlight, prefix/suffix icons, controlled value, validation (invalid), disabled and on-surface variants.

• Slarivo HeroUI Time Field

  Time input field with labels, descriptions, and validation built on React Aria, from HeroUI v3. Segmented hour/minute editing with a blue accent focus highlight, prefix/suffix icons, controlled value, validation (invalid), disabled and on-surface variants.

• Slarivo Range Calendar

  A HeroUI range calendar for selecting a contiguous span of dates, built on react-aria. Supports default and controlled values, min/max bounds, unavailable and non-contiguous ranges, read-only and disabled states, per-day indicators, and multiple visible…

• Slarivo Range Calendar

  A HeroUI range calendar for selecting a contiguous span of dates, built on react-aria. Supports default and controlled values, min/max bounds, unavailable and non-contiguous ranges, read-only and disabled states, per-day indicators, and multiple visible…

• Slarivo Range Calendar

  A HeroUI range calendar for selecting a contiguous span of dates, built on react-aria. Supports default and controlled values, min/max bounds, unavailable and non-contiguous ranges, read-only and disabled states, per-day indicators, and multiple visible…

• Slarivo Range Calendar

  A HeroUI range calendar for selecting a contiguous span of dates, built on react-aria. Supports default and controlled values, min/max bounds, unavailable and non-contiguous ranges, read-only and disabled states, per-day indicators, and multiple visible…

• Slarivo Relative Time

  A Relative Time component for highlighting key metrics, performance, and business outcomes, featuring relative time, relative-time, time, date.

• Slarivo Relative Time

  A Relative Time component for highlighting key metrics, performance, and business outcomes, featuring relative time, relative-time, time, clock.

• 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 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 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 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 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 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 Countdown Timer

  A Countdown Timer component for displaying counters, timers, dates, and changing numeric values, featuring countdown timer, countdown-timer, timer, countdown.

• Slarivo Label with Character Counter

  A form field label that shows a live character count for its textarea, updating as the user types.

• Slarivo HTML content

  A Motion for React counter that animates a motion value from 0 to 100 and renders the rounded number as children, from the official Motion examples catalog.

• Slarivo useTime

  An example of using the useTime hook to animate an element at a constant speed.

• Slarivo LED Dot Matrix Display

  An LED dot matrix display component with SVG pixels, radial glow, built-in digit and animation presets, and a VU meter mode.

• Slarivo Rate Limit Alert Dialog

  An alert dialog that warns a user they hit an API rate limit, with a live MM:SS countdown to automatic retry and an upgrade call to action.

• Slarivo Coming Soon Launch Page

  A full-viewport "coming soon" launch page with a live countdown timer, an email notify-me form with an inline success state, and a footer GitHub link.

• Slarivo Animated Upvote Toggle

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

• Slarivo Gooey Counter

  A Gooey Counter component for displaying counters, timers, dates, and changing numeric values, featuring click and selection states, responsive behavior.

• Slarivo Number counter

  An example of a number counter with plus and minus buttons, rebuilt from the official Motion example using motion/react.

• Slarivo Tabs with Count Badges

  A line-style tabbed interface whose trigger labels are paired with secondary count badges, ideal for inbox, drafts, and archive style views.

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