SLARIVO / PROGRESS

Progress Components

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

• Slarivo Progress Indicator

  This fluid steps animation is perfect for progress indicators or onboarding flows! 🚀✨

• Slarivo Progress

  Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

• Slarivo Progress Tracker

  A multi-step progress tracker that shows real-time status (pending, in-progress, completed, failed) for each step of an operation, with an elapsed-time badge and a receipt summary state.

• Slarivo Progress Bar

  A HeroUI progress bar for showing completion of a task — loading, uploads, multi-step flows. Built on react-aria with an accessible label and formatted output. Supports accent/success/warning/danger colors, sm/md/lg sizes, an indeterminate animated state, and an optional label.

• Slarivo Progress

  Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

• Slarivo Progress

  Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

• Slarivo Reshaped Progress indicator

  Dot-based step indicator that takes a total amount of steps and the current activeIndex as a controlled component. Pairs with Carousel and Pagination for syncing scroll or navigation state, and supports a media color for static dark backgrounds.

• Slarivo Progress Circle

  A HeroUI circular progress indicator for showing task completion in a compact ring — loading states, uploads, dashboards. Built on react-aria with an accessible label. Supports accent/success/warning/danger colors, sm/md/lg sizes, an indeterminate spinning state, and an optional adjacent label.

• Slarivo Progress

  Display progress relative to a limit or related to a task.

• Slarivo Progress Bar

  An accessible progress bar that tracks task completion, loading, or step-based processes with determinate and indeterminate states.

• Slarivo Stepper

  A step-by-step process for users to navigate through a series of steps.

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

  Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

• Slarivo Progress

  Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

• Slarivo Progress

  Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

• Slarivo Progress

  Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

• Slarivo Progress

  Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

• Slarivo Progress

  Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

• Slarivo Progress

  Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

• Slarivo Progress

  Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

• Slarivo Wave Loader

  An animated loading indicator featuring vertical bars that scale up and down in a wave-like pattern to indicate loading states.

• Slarivo Quantum Pulse Loade

  A sleek and modern loading indicator featuring a smooth, pulsating gradient bar that conveys a sense of sophisticated progress and anticipation. Ideal for premium applications and interfaces.

• Slarivo Bouncing Dots

  An animated loading indicator featuring three bouncing dots with customizable colors and spacing.

• Slarivo LoadingLines

  The LoadingLines component is a vibrant, text-based loading animation that displays the word “Generating” with each letter glowing in sequence to create a smooth wave effect. Built using React, TypeScript, and Tailwind CSS, it combines modern styling with custom keyframe animations to produce a visually appealing loader. The letters scale slightly, glow with a white highlight, and fade in and out as they animate, giving the impression of continuous motion. Behind the text, a masked gradient made of colorful radial patterns slides back and forth, adding depth and energy to the animation. This component is lightweight, reusable, and ideal for situations such as AI-driven content generation screens, creative dashboards, or any UI that needs an engaging “in-progress” indicator to enhance the user experience.

• Slarivo Progress [react-aria-components]

  Progress bars show either determinate or indeterminate progress of an operation over time. The <progress> HTML element can be used to build a progress bar, however it is very difficult to style cross browser. ProgressBar helps achieve accessible progress bars and spinners that can be styled as needed.

• Slarivo Progress

  Here is Progress component

• Slarivo Progress

  Here is Progress component

• Slarivo Gauge

  A circular visual for conveying a percentage.

• Slarivo Gauge

  Gauge, Speed, Meter

• Slarivo Interactive Hover Button

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

• Slarivo Apple Activity Ring

  Animated rings based on Apple Fitness.

• Slarivo Circular Progress Card

  Circular Progress Card This component displays progress towards a goal using an animated circular bar. The color of the progress bar, along with other content, can be easily customized through props, making it highly reusable.

• Slarivo Progress Bar

  A beautiful segmented progress bar with rounded rectangular segments - filled segments in a terracotta/coral color and unfilled ones in dark gray.

• Slarivo Progress

  Display progress relative to a limit or related to a task.

• Slarivo Progress

  Display progress relative to a limit or related to a task.

• Slarivo Progress

  Progress bar component built on Radix UI with smooth value transitions.

• Slarivo Progress

  Progress bar component built on Radix UI with smooth value transitions.

• Slarivo Stats

  Here is minimalistic beautiful stats component

• Slarivo Gauge

  A circular visual for conveying a percentage.

• Slarivo Loader

  Upload Progress Loader An animated loader showing a laptop with an upward arrow, symbolizing file upload or data transfer. Creates a clear, modern, and purposeful loading indicator. Ideal for upload screens, cloud storage apps, and file-sharing platforms.

• Slarivo Google Drive Uploader Toast

  Displays a minimalistic toast in the corner of the UI that shows real-time upload progress for multiple files. Features include file type detection, expandable/collapsible list, progress tracking, success/error states, and the ability to cancel uploads.

• Slarivo Progress

  Here is Progress component

• Slarivo LoaderProgressiveBar

  This LoaderProgressiveBar component is a visually appealing radar-style loading animation built using React and styled with Tailwind CSS. It creates a circular radar effect with concentric rings and a rotating scanning beam to simulate a real radar sweep. The animation is powered by CSS keyframes that rotate the beam continuously in a 360-degree loop, giving users a dynamic and modern loading indicator. Its clean and lightweight design makes it perfect for dashboards, data-heavy applications, or any interface that requires an engaging loading state while maintaining good performance and responsiveness.

• Slarivo Progress Card

  Animated Progress Card Description: A card component designed to display a specific goal or statistic. It features a title, an icon, an animated progress bar, and customizable labels to track progress over time. The card is fully responsive and adapts to both light and dark themes using shadcn/ui's CSS variables.

• Slarivo File Uploader

  A clean, modern, and accessible file upload component for React/Next.js. Features drag-and-drop support, multi-file selection with badge-style display, single-file image preview, animated upload progress, and a compact, monochromatic design. Includes accessible remove actions, file name truncation, and a scrollable badge list for large selections.

• Slarivo Modern Verticle Progress

  The Modern Progress component creates a modern progress bar. It supports hover effects, color changes, and pixel shape customization.

• Slarivo Streak Card

  Progress component from the 21st.dev community.

• Slarivo Progress

  Here is Progress component

• Slarivo Feature Section

  A sleek, animated feature section showcasing steps with engaging visuals and smooth transitions. Features - Auto-advancing steps with progress - Smooth animations and transitions - Responsive design - Image carousel with transitions - Customizable timing and appearance - shadcn/ui theme integration - Progress indicators - Checkmark for completed steps

• Slarivo Stepper

  Stepper

• Slarivo Spinner

  Spinner Loaders component from the 21st.dev community.

• Slarivo Highlighter

  Highlighter, Particle, CTA

• Slarivo Get Started Button

  An animated call-to-action button that reveals a chevron icon on hover, perfect for primary actions and onboarding experiences.

• Slarivo Stepper

  A step-by-step process for users to navigate through a series of steps.

• Slarivo Stepper

  Display content divided into a steps sequence.

• Slarivo Project Showcase

  A minimal, list-based portfolio section with a cursor-following image preview. On hover, a smooth floating image appears and tracks your mouse using lerp-based animation.

• Slarivo Gantt

  Maps component from the 21st.dev community.

• 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 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 layout preloader

  An animated image preloader with GSAP transitions, featuring sequential image reveals, smooth zoom effects, and grid-based layout animations with interactive restart functionality

• Slarivo Preloader

  he Preloader React component creates an animated loading screen using Framer Motion and React hooks. It cycles through greeting words in various languages ("Hello", "Bonjour", etc.) with a fade-in effect and a small animated dot. A morphing SVG path animates at the end, sliding up to reveal content. The component is responsive, adjusting to window size changes, and supports an optional onComplete callback triggered after the exit animation. It features a full-screen black background with centered, responsive text.

• 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 File Upload

  Interactive and animated file upload component with drag-and-drop and progress animations.

• 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 simple animated counter component.

• Slarivo Steps

  Here is Steps component

• Slarivo Scroll Progress

  Animated scroll progress for your web pages.

• Slarivo Activity Card

  A versatile card component for displaying fitness and activity tracking data with interactive goals and metrics visualization. Features - Metric Rings - Circular progress indicators - Percentage-based visualization - Hover animations - Color-coded categories - Value and unit display - Daily Goals - Interactive checkboxes - Completion status - Add new goals functionality - Visual feedback for completed items - Hover states - Visual Elements - Category icon - Progress rings - Gradient dividers - Interactive buttons - Status indicators

• Slarivo Mini Chart

  This is a mini chart which shows real time analytics.

• 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 Process Timeline

  process section with scroll trigger animations showing process step depending on current scroll position

• Slarivo Waitlist Landing Page with Countdown Timer

  A sleek waitlist component featuring a mesmerizing ethereal beam background, countdown timer, and social proof indicators. Perfect for product launches, beta releases, or early access campaigns. Includes email capture, user avatars showing recent signups, and a live countdown creating urgency. The dark theme with vibrant gradient effects creates an engaging, modern aesthetic that converts visitors into early adopters.

• Slarivo Loading Indicator

  This React component renders a visually appealing loading indicator using CSS animations. It features customizable size, colors, spin and squeeze durations, and allows for styling customization via className props. The loader consists of two elements that rhythmically squeeze and spin, creating a dynamic loading effect.

• Slarivo Battery Indicator

  Interactive battery component with themes and animations

• Slarivo Animated Progress Bar

  Here is Animated Progress Bar component

• Slarivo Spinner

  Here is Spinner component

• Slarivo Progress

  A versatile progress component for displaying completion status, loading states, and step-by-step processes.

• Slarivo 8bit Health Bar

  An 8-bit styled health bar built on the retro progress primitive. Shows a smooth red fill (default) or pixelated squares (retro variant), driven by a 0-100 value.

• Slarivo Order Tracking Parallax Card

  The OrderTrackingParallaxCard is a highly interactive, content-rich UI component designed to make order tracking both informative and visually engaging. Built with Framer Motion, it uses subtle 3D parallax tilt effects to bring depth to different layers — the delivery truck image, order details, and the progress tracker each shift independently as the user moves the cursor, creating a dynamic sense of motion. The card includes comprehensive details such as the order number, product name, current status badge, ETA, and a visual step tracker that clearly communicates progress from processing to delivery. Its clean design, layered depth, and real-time feedback make it ideal for e-commerce platforms, logistics dashboards, or delivery apps, offering users not just information but a premium, interactive experience.

• Slarivo Achievement badge

  This is achievement badge

• Slarivo Upload Multiple Files

  A drag-and-drop dropzone to upload multiple files to a storage provider, with per-file previews and upload progress via a presigned upload URL.

• Slarivo Progress Bar

  A HeroUI progress bar for showing completion of a task — loading, uploads, multi-step flows. Built on react-aria with an accessible label and formatted output. Supports accent/success/warning/danger colors, sm/md/lg sizes, an indeterminate animated state, and an optional label.

• Slarivo Storage Usage Progress

  A progress bar showing storage usage with a color-coded status badge indicating usage level.

• Slarivo Progress Circle

  A circular progress indicator for showing task completion, uploads, or loading states, with determinate and indeterminate modes.

• Slarivo Circular Progress with Custom Color

  A circular (radial) progress indicator rendered with SVG that supports custom ring colors, sizes, stroke widths, and a centered percentage label.

• Slarivo indevuiProgress

  here is modern indevui progress bar

• Slarivo Reshaped Progress bar

  Progress bar controlled by a value within a 0-100 range by default, with custom min/max boundaries. Comes in medium and small sizes, primary/critical/warning/positive colors plus a media color for use over images and video, and a CSS-driven duration property for timeout animations.

• Slarivo Reshaped Progress bar

  Progress bar controlled by a value within a 0-100 range by default, with custom min/max boundaries. Comes in medium and small sizes, primary/critical/warning/positive colors plus a media color for use over images and video, and a CSS-driven duration property for timeout animations.

• Slarivo Reshaped Progress bar

  Progress bar controlled by a value within a 0-100 range by default, with custom min/max boundaries. Comes in medium and small sizes, primary/critical/warning/positive colors plus a media color for use over images and video, and a CSS-driven duration property for timeout animations.

• Slarivo Reshaped Progress bar

  Progress bar controlled by a value within a 0-100 range by default, with custom min/max boundaries. Comes in medium and small sizes, primary/critical/warning/positive colors plus a media color for use over images and video, and a CSS-driven duration property for timeout animations.

• Slarivo Progress With Value

  A progress bar that displays its percentage value inline, with configurable label positions inside or outside the track.

• Slarivo UploadThing Progress

  An upload progress indicator with linear bar, circular ring, and minimal percentage variants in three sizes.

• Slarivo Progress

  A composable progress bar built on Base UI with track, indicator, label and value slots for showing task completion.

• Slarivo Status Indicator

  A dependency-free status indicator whose selected dot expands into a labeled pill through an interruptible spring-driven morph.

• Slarivo Progress Circle

  A HeroUI circular progress indicator for showing task completion in a compact ring — loading states, uploads, dashboards. Built on react-aria with an accessible label. Supports accent/success/warning/danger colors, sm/md/lg sizes, an indeterminate spinning state, and an optional adjacent label.

• Slarivo Spinner

  A minimal loading spinner that renders an animated rotating icon, sizable and colorable via className.

• Slarivo Progress Bar

  An accessible linear progress bar with animated fill, indeterminate shimmer, and pending/complete state labels.

• Slarivo Download Progress Spinner

  A compact download-progress card with an animated spinner, title, file-size details, and a cancel button.

• Slarivo Timeline

  A timeline component with sticky header and scroll beam follow.

• Slarivo Loader

  A loading component with multiple variants to indicate processing states and provide visual feedback to users during wait times.

• Slarivo Project Data Table

  Project Data Table This component provides a responsive, animated table for displaying a list of projects. It features a clean, modern design inspired by your image, with status badges and contributor avatars. The rows gracefully animate into view using framer-motion.

• Slarivo Modern Timeline

  A responsive, accessible, and fully themable Timeline / Roadmap component built with ShadCN UI and Tailwind CSS. Supports vertical and horizontal layouts, animated progress, dark/light modes, and rich content like icons, dates, and status badges. Ideal for SaaS roadmaps, onboarding flows, or project timelines. Cleanly structured and highly customizable via props.

• Slarivo Steps

  Here is Steps component

• Slarivo Orbital Loader

  A customisable orbital loader component for indicating loading states in your application. Features smooth orbital animations and optional loading messages.

• Slarivo Roadmap Card

  The RoadmapCard component is a minimal, animated product roadmap built with shadcn/ui and Framer Motion. It displays key project milestones in a clean timeline format, supporting light and dark modes out-of-the-box. Features: 📅 Display quarterly milestones with title, description, and status ✨ Animated timeline dots with fade and slide-in effects 🎨 Minimal, modern design with hover scale effect on dots 🌗 Fully theme-aware (light/dark mode compatible) 🔹 Reusable and dynamic via items prop Ideal for showcasing product plans, feature releases, or project timelines in a visually appealing and interactive way.

• Slarivo Loader

  A loading component with multiple variants to indicate processing states and provide visual feedback to users during wait times.

• Slarivo Hero Section

  Animated Roadmap This component visualizes a series of milestones on a path, with animations that trigger on scroll. It's designed to be highly reusable—you can pass any number of milestones with different statuses and positions.

• Slarivo Project Detail View

  Project Detail View A comprehensive view component designed to display the details of a project or a complex task. It includes sections for status, assignees, dates, tags, description, attachments, and a detailed task list. The component is built to be highly reusable and is styled using shadcn/ui theme variables for seamless light and dark mode support. It incorporates animations with framer-motion for a more dynamic user experience.

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

  Animated onboarding progress card showing three steps with visual loaders, transitions, and completion indicators.

• Slarivo File Upload

  Here is File Upload 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 Member List

  Here is modern Member list by indev ui

• Slarivo System Monitor

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

• Slarivo Animated Badge

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

• Slarivo Gradient bars Background

  A stunning, fully customizable animated gradient bars background component for modern React applications. Perfect for hero sections, landing pages, and eye-catching website backgrounds.

• Slarivo Stats Widget

  The UI has a card-style widget showing a financial amount, percentage change, and an arrow. An animated line graph indicates the trend, turning green for positive and orange for negative changes.

• Slarivo Stats Card

  Freelancer Stats Card A comprehensive card component for displaying key statistics, rankings, and availability. It features a clean layout, theme-adaptive styling, and a subtle animation for the availability chart to draw user attention to their capacity.

• Slarivo Card Status List

  This component displays a dynamic list of status-driven cards with built-in syncing animations, hover-activated actions, and staggered motion transitions using framer-motion. It supports syncing state transitions (updates-found → syncing → completed), animated status indicators, and optional back/add button callbacks. Perfect for onboarding flows, document indexing, status updates, guided setup sequences, or any app section where users must complete a set of progressive tasks.

• 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 Animated Radial Chart

  This is a dynamic radial progress chart component that animates a semi-circular arc to visually represent a percentage value, using smooth framer-motion transitions, SVG gradients, and drop shadows for a polished 3D feel. Perfect for dashboards, analytics UIs, or progress visualizations where you want to display performance, goal completion, or system usage in a clean and engaging format.

• Slarivo Warning Graphic

  This component renders an animated SVG warning graphic with a triangle, exclamation mark, stripes, and path outlines, using framer-motion for a layered entrance sequence with configurable animation speed and color. It supports motion-reduction detection, progressive draw effects, and modular fade/scale transitions for accessibility and customization. Perfect for alert banners, system status messages, onboarding visuals, HUD, sci-fi or gaming themes, or any UI needing a bold, animated warning indicator.

• 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 Animated Loading SVG + Text Shimmer

  An animated loading breadcrumb component with a spinning SVG loader icon, shimmer text effect, and chevron. Perfect for indicating loading states in a visually appealing way.

• Slarivo Scroll Progress Bar

  The Scroll Progress Bar component enhances user experience by providing a visually dynamic indicator as the user scrolls through the page. It visually informs users how much of the page has been scrolled, making it especially useful for longer content. Unlike static progress bars, this animated indicator offers a more modern and interactive experience. The scroll bar can be configured as a circular or linear bar and can be positioned in specific corners of the page, such as the bottom-right or top-left. Built using Framer Motion and Tailwind CSS, the Scroll Progress Bar ensures smooth transitions and an aesthetically pleasing design.

• Slarivo Progress

  Vo2 Max Card A visually polished card for displaying a key metric with an animated radial progress indicator. It's ideal for dashboards, fitness trackers, or any application needing to represent progress or a value within a range.

• Slarivo Stats Card

  Stats Card This is a reusable card component designed to display a key metric, a descriptive summary, and a mini bar chart for trend visualization. It features animations that trigger when the component enters the view.

• Slarivo Spinner

  A loading spinner component with customizable size and color.

• Slarivo Progressive Flux Loader

  A glowing flux progress bar with phase labels that fly in letter by letter.

• Slarivo Globe Live Badge

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

• Slarivo Onboarding Stages

  This is a dynamic, themed onboarding checklist component that visually breaks down setup stages with animated progress indicators, completion badges, and a customizable action button. It supports detailed theming, staged animations via framer-motion, and responsive layout variants for compact or expanded views. Perfect for onboarding flows, setup wizards, user education dashboards, or milestone-driven tasks where visual clarity and motivation matter.

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

  Here is colored feedback slider component

• Slarivo Gradient Selector Card

  This is a highly interactive and animated gradient-based selector component that visualizes progress through milestone dots connected by gradient lines. Each option is represented by a glowing circle, and the currently selected option triggers radial background effects and orbiting dots for visual emphasis. Perfect for onboarding flows, pricing tiers, goal selection, slider replacement or any UI needing a visually rich, progressive milestone picker.

• Slarivo Progress Metric Card

  A KPI stat card pairing a large headline figure with a data-driven chart, rendered with Recharts and switchable between a smooth progression curve and bars.

• Slarivo Globe Analytics

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

• 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

  Proposal Tracker Card This component provides a clear, visual timeline for tracking the status of proposals or applications. It's designed to be flexible, allowing you to pass in step data dynamically. Animations are included using framer-motion to enhance the user experience.

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

  Here is animated scrolling progress bar

• Slarivo Bar Visualizer

  Here is Bar Visualizer component

• Slarivo ProjectProgressCard

  The ProjectProgressCard is a visually engaging dashboard component built entirely with Shadcn UI and Framer Motion. It provides a clear overview of a project’s status, showing key details such as the project title, manager, due date, and a list of milestones. Each milestone is displayed in a vertical timeline with a progress line, with completed milestones marked distinctly from pending ones. The card includes smooth animations for loading and interactions, making it feel dynamic and responsive. A “Next Step” button at the bottom allows users to take immediate action, making this component ideal for project management dashboards or workflow tracking. Its clean layout, vertical progress visualization, and interactive design help users quickly understand project progress at a glance.

• Slarivo Loader

  Creative pencil loader animation featuring a rotating blue pencil with eraser tip, drawing a circular progress path to indicate loading in an engaging, education-themed style.

• Slarivo Process Pillars

  Process Pillars is a visually intuitive component that represents a typical product development lifecycle. It uses a segmented progress bar style to display five distinct phases. Each phase is represented with a partial fill to visually communicate stage-wise progression. Use Case: Ideal for portfolio sites, agency websites, SaaS dashboards, onboarding flows, or any platform that needs to communicate a linear process or workflow.

• Slarivo Progress

  Here is Progress component

• Slarivo Progress

  Here is Progress component

• Slarivo Progress Card

  Upload Progress Card This component displays the progress of a file upload, including the filename, size, percentage, and a visual progress bar. It is highly reusable and customizable through props.

• Slarivo Hud Status

  This is a themed status indicator component that renders a glowing SVG badge with animated text to signal system activity. It adapts dynamically to light/dark themes using color logic tied to the HUD palette, and uses framer-motion for a smooth entrance slide-in. The HyperText element pulses "ACTIVE" with a typewriter-style animation effect for attention. Perfect for live status dashboards, AI system UIs, bot presence indicators, or futuristic HUD overlays that require a subtle but animated signal of system readiness.

• Slarivo Radial Orbital Timeline

  A dynamic orbital visualization component that displays nodes in a circular pattern around a central point. Each node represents a data point with title, status, and energy level.

• 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 Progressive blur

  A Progressive Blur component creates a layered blur effect using motion and gradient masks. It progressively blurs layers based on direction and intensity, adding visual depth.

• Slarivo Stepper

  Stepper

• Slarivo Modern Animated Sign In

  This design presents a sleek and user-friendly login page. The UI features a contemporary dark mode aesthetic with a deep blue background accented by subtle radial gradients that give depth.

• Slarivo Interactive Icon Cloud

  An interactive 3D tag cloud component

• Slarivo Message loading

  Message Loading animation

• Slarivo AI Input With Loading

  A chat input component with a loading state animation featuring an auto-resizing textarea, loading spinner, and status message. Features: • Loading state animation • Auto-resizing textarea • Customizable loading durations • Dark mode support • Status messages • Keyboard shortcuts • Auto-animation mode • Mobile responsiveness

• Slarivo Banner

  Banner alert inspired by shadcn/ui format

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

  Cool Animated Loader

• Slarivo Progressive Carousel

  Timelines component from the 21st.dev community.

• Slarivo Animated Loading Skeleton

  Animated Loading Skeleton

• Slarivo Prompt Input dynamic grow

  A prompt input that grow on click, with subtle glow, and a onFocus on click ripple effect. shrink when not anymore inFocus

• Slarivo Animated Scroll

  An animated two-panel scroll adventure

• Slarivo Globe Pulse

  A dark-themed WebGL globe with animated pulsing rings at marker locations. Concentric rings expand and fade out.

• Slarivo Animated State Icons

  12 icons that continuously morph between two meaningful states — loading→checkmark, hamburger→X, play→pause, lock→unlock, copy→copied, bell→notification, heart fill/unfill, download→done, send→fly, toggle switch, eye→hidden, volume→mute. Each cycles on its own timer with spring physics and smooth transitions. Import individually and control the toggle programmatically.

• Slarivo Rolling List

  Animated process list with hover roll text and image preview.

• Slarivo Interactive Accordion

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

• Slarivo Progressive Blur

  Here is Progressive Blur

• Slarivo Tubes Curor

  A fullscreen WebGL cursor animation built with Three.js that renders animated colorful tube trails and reactive lights; click to randomize tube and light colors. Ideal as an interactive hero background or pointer effect for landing pages and portfolios

• Slarivo Marquee

  Infinite scrolling marquee component with customizable speed and direction.

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

  An interactive background component that renders glowing animated tubes powered by Three.js. Designed for Next.js + React, it features customizable tube colors, light palettes, intensity, and text overlays. Includes an option to randomize colors on click for a dynamic user experience.

• Slarivo Line Graph Statistics

  This UI displays mobile vs desktop usage trends over June, with mobile consistently higher. A sidebar lets users toggle data for the last 7 days, 30 days, or 3 months.

• Slarivo Interactive-Gradient-Background

  Interactive Graident Background with pointer movement

• Slarivo Globe Interactive

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

• 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 Image Cursor Trail

  A unique interactive component

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

  Here is KPI card component

• Slarivo Progressive Blur Modal

  Here is Progressive Blur Modal 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 Hero with bg video

  here is progressive hero

• Slarivo Public Stats

  Here is Public Stats component

• Slarivo Onboarding Dialog

  A multi-step onboarding dialog with carousel navigation, animated progress dots, and cross-fading content. Built with Embla Carousel and Motion.

• Slarivo Advanced Normalized Incident Report

  here is example of advanced-normalized-incident-report

• Slarivo Multiple Form

  Features Progress Indicator: Visual steps tracker with completed, current, and pending steps Form Validation: Client-side validation with clear error messages Smooth Animations: Page transitions using Framer Motion Responsive Design: Fully responsive layout that works on all screen sizes Dark Mode Support: Styling that adapts to both light and dark modes Accessibility: Proper labeling and semantic HTML for screen readers Modern UI: Clean design with Tailwind CSS styling Step Navigation: Move forward/backward between form steps Data Review: Final step to review all entered information Success State: Completion confirmation with next steps Dependencies React Tailwind CSS Framer Motion (for animations) This multi-step form component demonstrates modern React patterns and Tailwind styling techniques, creating an engaging and user-friendly form experience.

• Slarivo Publish Button

  A hold to publish button

• Slarivo Globe Bars

  A WebGL globe with progress bar cards anchored to city markers showing completion percentages.

• Slarivo Stats

  Here is minimalistic stats with progress bar

• Slarivo Scroll Progress

  A minimal scroll progress indicator that tracks how far a user has scrolled down a page or container. Fully theme-aware and built with composability in mind, it supports both horizontal and vertical directions and works seamlessly in light and dark mode.

• Slarivo Badge

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

• Slarivo Scroll Legend

  A sleek, interactive scroll legend component inspired by the elegant UI of Raycast. Built with accessibility and performance in mind, this component enhances user experience by providing clear visual guidance during scroll interactions. Fully responsive, theme-aware (light/dark), and easy to integrate into any React or Next.js project. Perfect for dashboards, documentation sites, or any interface where progressive scrolling needs a little extra magic.

• Slarivo Animated Live Visitor

  Animated Avatars Live Visitor Counter

• Slarivo Daily Tracker Dialog

  This component is a Daily Productivity Tracker modal that allows users to manage and track their daily tasks in a simple, interactive way. Users can mark tasks as completed, add new tasks, and instantly see their progress for the day. Designed to be minimal and responsive, it provides visual feedback with checkmarks and strikethroughs for completed tasks, making it easy and motivating for users to stay on top of their daily goals.

• Slarivo Achievement Card

  Lists component from the 21st.dev community.

• Slarivo Achievement List

  Lists component from the 21st.dev community.

• Slarivo Points Chart

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

• Slarivo 3D Interactive Card Gallery

  Features This advanced 3D interactive card gallery includes: 3D Perspective Effects: Dynamic rotation based on mouse position Perspective transformations that respond to user interaction Parallax depth effects between card elements Advanced Animations: Smooth transitions between cards with cubic-bezier easing Card scaling and position animations Floating particles in the background Pulse animations on interactive elements Glassmorphism & Modern UI: Backdrop blur effects Semi-transparent overlays Dynamic gradient backgrounds that follow mouse movement Noise texture overlay for added depth Responsive Design: Adapts between horizontal carousel on desktop Vertical stacking on mobile devices Fluid typography and spacing Interactive Elements: Navigation controls with visual feedback Progress indicators Hover state animations Click interactions to change the active card Visual Polish: Custom gradient overlays unique to each card Dynamic depth-of-field effect (blur on inactive cards) Atmospheric lighting that responds to mouse position Category badges with glassmorphism effect To use this component, make sure to install Framer Motion: bash npm install framer-motion This component represents a highly polished, production-ready UI element that combines advanced CSS techniques with modern React patterns to create an immersive, interactive experience.

• Slarivo 8-bit Stats Dashboard

  KPI metrics dashboard with stat cards and 8-bit progress bars, in the retro pixel style.

• Slarivo Points Levels Timeline

  Timelines component from the 21st.dev community.

• Slarivo clipped-video-tab

  A cinematic clipped video section built with React, TailwindCSS, and Framer Motion for modern UI experiences.

• Slarivo Model Selector Prompt

  A benchmark-informed prompt composer with an advanced LLM model selector for comparing frontier models across capability, speed, context, and cost. The model dropdown is searchable; hovering a model opens a preview card with animated metric bars (intelligence, speed, context, cost) and inline reasoning/speed configuration that adjusts the metrics live. Includes provider marks, per-model configuration badges, a scroll-faded list, and a Send action. Built on Base UI Combobox + Preview Card.

• Slarivo Skills Progress Dashboard

  A compact skills overview card with color-coded, animated progress bars and an entrance fill effect.

• Slarivo Analyzing Image

  An animated image-scanning loader that sweeps a highlight bar across a picture icon to indicate image analysis in progress.

• Slarivo Button Spinner

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

• Slarivo Steps Breadcrumb

  A breadcrumb navigation that displays a horizontal sequence of icon steps connected by short lines to show progress through a multi-stage flow.

• Slarivo Live Activity

  An iOS-style live activity pod that shows a single ongoing task with running, success and error states, morphing between a compact glyph and an expanded card with progress and a retry action.

• Slarivo Multi-step Wizard

  Features This multi-step onboarding wizard includes: Responsive Design - Works beautifully on mobile and desktop Progress Tracking - Visual step indicator with completed checkmarks Form Validation - Client-side validation with error messages Smooth Transitions - Step transitions with directional animations Dark Mode Support - Styled for both light and dark themes Accessibility - Proper labels, focus states, and semantic HTML Complete Form Flow - Personal info → Company details → Preferences → Completion To use this component, you'll need to install Framer Motion for the animations: bash npm install framer-motion The component handles a complete user onboarding flow with validation at each step and a final completion screen that summarizes the collected information.

• Slarivo Activity Dropdown

  An animated activity dropdown menu with smooth transitions and icon indicators.

• Slarivo Reshaped Progress indicator

  Dot-based step indicator that takes a total amount of steps and the current activeIndex as a controlled component. Pairs with Carousel and Pagination for syncing scroll or navigation state, and supports a media color for static dark backgrounds.

• Slarivo UploadThing Paste

  A clipboard paste zone that accepts pasted images and files, showing upload progress and success states — ideal for quick screenshot uploads.

• Slarivo AI Loading State

  An animated AI loading state that cycles through task statuses with scrolling terminal-style log lines and a colorful circular progress spinner.

• Slarivo Scroll Bars

  An animated ruler-style scroll progress indicator that moves an accent marker across a row of bars as the page scrolls.

• Slarivo Task Steps

  An animated vertical checklist that shows a multi-step task's progress with pending, active, done and error states.

• Slarivo Wizard Steps

  An animated multi-step wizard with a clickable progress rail, direction-aware panel transitions, keyboard navigation, and a completion state.

• Slarivo Progressive blur

  A Progressive Blur component creates a layered blur effect using motion and gradient masks. It progressively blurs layers based on direction and intensity, adding visual depth.

• Slarivo Progress

  Here is Progress component

• Slarivo Progress

  Here is Progress component

• Slarivo Progress

  Here is Progress component

• Slarivo Progress

  Display progress relative to a limit or related to a task.

• Slarivo Liquid Progress Loader

  A liquid-style progress bar that fills horizontally with a soft glowing gradient as it advances.

• Slarivo 8bit Loading Screen

  An 8-bit styled loading screen block with an animated retro progress bar, rotating gameplay tips, and a pulsing pixel-font title. Supports auto-progress, custom tips, percentage toggle, and a fullscreen overlay variant.

• Slarivo 8bit Game Progress

  An 8-bit styled game progress card composing retro health, mana, and experience bars. Displays a player's level stats at a glance with pixel-art styling and labeled progress values.

• Slarivo 8-bit Progress

  Pixel-art progress bar from 8bitcn.com — chunky pixel fill, self-contained (no shadcn primitive dependency).

• Slarivo Gauge

  A circular visual for conveying a percentage.

• Slarivo Upload Ui

  Here is Upload Ui component

• Slarivo Flight Status Card

  Flight Status Card A modern, animated card component to display real-time flight information, including boarding status, gate details, and timelines, designed to be easily integrated into any travel-related application.

• Slarivo 8bit Enemy Health Display

  An 8-bit styled enemy health display built on the retro health-bar primitive. Shows enemy name, level, and a health bar with a percentage overlay, driven by current/max health values.

• Slarivo Podcast Card Player

  The Podcast Card Player is a sleek, theme-aware component designed to display podcast episodes in a compact card layout. Each card includes an image, title, and episode information, along with an inline audio player featuring play/pause functionality, a progress bar, and a live timestamp. Built using Shadcn UI, it provides a clean and consistent design that adapts seamlessly to both light and dark themes. This component is perfect for podcast apps, media sections, or content platforms where users can quickly browse and listen to episodes without leaving the page. Its modular design also allows easy configuration for multiple cards or different audio sources.

• Slarivo 8bit Mana Bar

  An 8-bit styled mana bar built on the retro progress primitive. Shows a smooth blue fill (default) or pixelated squares (retro variant), driven by a 0-100 value.

• Slarivo 8-bit Xp Bar

  Pixel-art XP / experience bar from 8bitcn.com — chunky pixel borders, retro fill. Wraps Radix Progress; default and retro variants; flashing 'LEVEL UP!' animation at 100%.

• Slarivo MusicEqualizer Upload

  The Music Equalizer Upload component is a dynamic and visually engaging file upload interface designed specifically for audio files. Each uploaded file is represented with its name and an animated equalizer, where bars bounce rhythmically to indicate ongoing upload progress—perfect for music or media applications. Users can select multiple audio files either by clicking the upload button or dragging files into the input area. Only audio files are accepted, ensuring file-type integrity, while non-audio files are automatically ignored. Each file can be individually removed using a dedicated trash icon without affecting other uploads. Built with Shadcn UI, Lucide icons, and Framer Motion, this component supports both light and dark themes and offers smooth entry and removal animations, making audio uploads visually appealing and highly interactive.

• Slarivo Meter

  A HeroUI meter for visualizing a value within a range — storage, usage, progress toward a goal. Built on react-aria with an accessible label and formatted output. Supports accent/success/warning/danger colors, sm/md/lg sizes, an optional label, custom min/max, currency and percent formatting, and threshold-driven colors.

• Slarivo API Usage Meter Card

  A card that shows per-member API usage as labeled meter bars against a shared plan limit.

• Slarivo BeUI File Upload

  File Uploads component from the 21st.dev community.

• Slarivo Progress

  Here is Progress component

• Slarivo Progress

  Here is Progress component

• Slarivo Progress

  Here is Progress component

• Slarivo Progress

  Here is Progress component

• Slarivo Progress

  Here is Progress component

• Slarivo Loading State

  A compact pixel-grid loader with an animated wavefront, a shimmering status label, and a live elapsed timer for long-running or agent tasks.

• Slarivo Gauge

  A Gauge component for showing task completion, loading state, and multi-step advancement, featuring gauge, radial progress, radial-progress, progress.

• Slarivo Gauge

  A Gauge component for showing task completion, loading state, and multi-step advancement, featuring gauge, progress, indicator, loading.

• Slarivo Gauge

  A Gauge component for showing task completion, loading state, and multi-step advancement, featuring gauge, progress, radial, meter.

• Slarivo First Place Leaderboard

  A First Place Leaderboard component for representing people, teams, and account identity, featuring leaderboard, profile card, profile-card, avatar.

• Slarivo Progress

  A Progress component for showing task completion, loading state, and multi-step advancement, featuring progress, progress bar, progress-bar, label.

• Slarivo Futuristic File Uploader

  This component has a distinctly futuristic, high-tech vibe with its dark theme, glowing accents, and sleek interface. It's practical and functional while also being visually impressive with a sci-fi aesthetic that would make it stand out in a competition.

• Slarivo Collapsible

  A Collapsible component for displaying ordered records, tasks, activity, and repeated content, featuring collapsible, list, avatar, task.

• Slarivo Achievement badge

  A Achievement badge component for labeling status, metadata, categories, and compact counts, featuring badge, award badge, award-badge, progress.

• Slarivo Achievement badge

  A Achievement badge component for labeling status, metadata, categories, and compact counts, featuring badge, award badge, award-badge, progress.

• Slarivo Progress Bar

  A HeroUI progress bar for showing completion of a task — loading, uploads, multi-step flows. Built on react-aria with an accessible label and formatted output. Supports accent/success/warning/danger colors, sm/md/lg sizes, an indeterminate animated state,…

• Slarivo Meter

  A HeroUI meter for visualizing a value within a range — storage, usage, progress toward a goal. Built on react-aria with an accessible label and formatted output. Supports accent/success/warning/danger colors, sm/md/lg sizes, an optional label, custom…

• Slarivo Meter

  A HeroUI meter for visualizing a value within a range — storage, usage, progress toward a goal. Built on react-aria with an accessible label and formatted output. Supports accent/success/warning/danger colors, sm/md/lg sizes, an optional label, custom…

• Slarivo Meter

  A HeroUI meter for visualizing a value within a range — storage, usage, progress toward a goal. Built on react-aria with an accessible label and formatted output. Supports accent/success/warning/danger colors, sm/md/lg sizes, an optional label, custom…

• Slarivo Meter

  A HeroUI meter for visualizing a value within a range — storage, usage, progress toward a goal. Built on react-aria with an accessible label and formatted output. Supports accent/success/warning/danger colors, sm/md/lg sizes, an optional label, custom…

• Slarivo Meter

  A HeroUI meter for visualizing a value within a range — storage, usage, progress toward a goal. Built on react-aria with an accessible label and formatted output. Supports accent/success/warning/danger colors, sm/md/lg sizes, an optional label, custom…

• Slarivo Reshaped Progress bar

  Progress bar controlled by a value within a 0-100 range by default, with custom min/max boundaries. Comes in medium and small sizes, primary/critical/warning/positive colors plus a media color for use over images and video, and a CSS-driven duration…

• Slarivo Reshaped Progress bar

  Progress bar controlled by a value within a 0-100 range by default, with custom min/max boundaries. Comes in medium and small sizes, primary/critical/warning/positive colors plus a media color for use over images and video, and a CSS-driven duration…

• Slarivo Meter

  A HeroUI meter for visualizing a value within a range — storage, usage, progress toward a goal. Built on react-aria with an accessible label and formatted output. Supports accent/success/warning/danger colors, sm/md/lg sizes, an optional label, custom…

• Slarivo Progress Bar

  A HeroUI progress bar for showing completion of a task — loading, uploads, multi-step flows. Built on react-aria with an accessible label and formatted output. Supports accent/success/warning/danger colors, sm/md/lg sizes, an indeterminate animated state,…

• Slarivo Progress Bar

  A HeroUI progress bar for showing completion of a task — loading, uploads, multi-step flows. Built on react-aria with an accessible label and formatted output. Supports accent/success/warning/danger colors, sm/md/lg sizes, an indeterminate animated state,…

• Slarivo Collapsible Billing Card

  A billing usage card with a progress bar that expands via a floating bottom-center trigger to reveal a detailed cost breakdown.

• Slarivo Circular Progress

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

• Slarivo Element scroll-linked animation

  An example of a scroll-linked animation using a specific element's scroll position using Motion for React's useScroll hook.

• Slarivo Partition Bar

  A horizontal bar chart that splits into proportional colored segments to visualize parts of a whole, with labeled titles and values under each segment.

• Slarivo Progress

  An animated progress bar and circular progress ring with spring-smoothed fill, optional label/helper text, tone variants, and an indeterminate loading state.

• Slarivo Runway Loader

  An animated progress bar where a small airplane taxis along a runway track and takes off when it reaches 100%, useful for onboarding, file import, or deploy-pipeline loading states.

• Slarivo Onboarding Checklist Drawer

  A right-side drawer panel showing onboarding progress with a progress bar and an interactive, checkable task checklist.

• Slarivo Loading progress bar

  An example of creating a progress bar loading animation with Motion for React.

• Slarivo Circular Progress

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

• Slarivo Circular Progress

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