SLARIVO / STATS & KPIS

Stats & KPIs Components

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

• Slarivo KPI Card

  Here is KPI card component

• Slarivo Weekly KPI Chart

  This is an interactive day-based data chart that visualizes values (like revenue or activity) using minimalistic vertical lines and animated gradient highlights. It’s perfect for dashboards or financial summaries where users need quick, clean visual feedback with a focus on a specific day.

• Slarivo Advanced Stats

  Analytics dashboard stats section with an animated area chart, KPI cards, and scroll-triggered timeline reveals.

• 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 8-bit Stats Dashboard

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

• Slarivo Stat Cards Skeleton

  A responsive grid of KPI stat card placeholders with label, value, and trend line skeletons for loading states.

• Slarivo Bold Stats

  A bold statistics section highlighting a headline metric with a supporting image and a row of key figures.

• Slarivo Stats

  Here is Stats 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 Public Stats

  Here is Public Stats component

• Slarivo Glowy Waves Hero

  Hero section with glowy waves effect

• Slarivo Interactive Logs Table

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

• Slarivo Mini Chart

  This is a mini chart which shows real time analytics.

• Slarivo Hero Section

  Hero section with staggered text and button reveal

• Slarivo Glowing Card

  A sleek, glassmorphic stat display card with a subtle glowing effect that highlights the featured metric. The card uses soft light streaks, rounded corners, and a dark translucent background to create a modern, futuristic look. Perfect for dashboards, analytics tools, and live data displays to showcase key stats like views, likes, or revenue in an eye-catching way.

• Slarivo Trail Card

  Trail Card A visually polished card component to display trail or location information, featuring a prominent image, key stats, and an interactive call-to-action. It includes a subtle hover animation for a modern feel.

• Slarivo Featured Section Stats

  This component showcases a modern CRM/dashboard statistics section with a clean, responsive layout. It highlights key business metrics alongside a smooth blue-gradient area chart for visual impact.

• Slarivo Statistics Card 1

  Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Stat Card

  stat card animated

• Slarivo Stats Section with Text

  Statistics Section with Text

• Slarivo Statistics Card 5

  Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and

• Slarivo Stats Cards

  shadcn stats cards

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

  Here is Stats component

• Slarivo Stats

  Here is Stats component

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

  Testimonial Card Section – Social proof showcase. Displays client reviews, star ratings, and impact stats in a clean grid layout with strong visual hierarchy. Perfect for building trust on portfolio sites, agency pages, or product landing screens.

• 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 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 Stats cards with links

  Here is Stats cards with links

• Slarivo Stats cards with links

  Here is Stats cards with links

• Slarivo Stats cards with links

  Here is Stats cards with links

• Slarivo Stats cards with links

  Here is Stats cards with links

• Slarivo Total Sales Chart

  A compact total sales chart, showing revenue trends with an interactive line chart, quick period filters, and channel breakdowns for clear insights at a glance.

• Slarivo Stats Defautlt

  Here is Stats component

• Slarivo Stats Defautlt

  Here is Stats component

• Slarivo Stats Defautlt

  Here is Stats component

• Slarivo Stats Defautlt

  Here is Stats component

• Slarivo Card

  Activity Card – Showcase adventures. Engaging UI element to display activities with images, duration, distance, and difficulty. Perfect for travel, fitness, and experience booking apps.

• Slarivo Statistics Card 7

  Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Statistics Card 10

  Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Snippet

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

• Slarivo Statistics Card 13

  Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Statistics Card 2

  Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Shuffle Number

  Here is Shuffle Number component

• 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 Stock Market Tracker Chart

  An interactive Stock Market Tracker Card with dynamic line charts, period filters, and company selection, showing price trends, percentage changes, and highest/lowest values in a clean, responsive layout built with Recharts and shadcn/ui.

• Slarivo KPI Card

  Here is KPI card component

• Slarivo Tooltip

  Enhanced shadcn/ui tooltip

• Slarivo Hero Section

  Hero Section Component This component creates a dynamic and engaging hero section, perfect for landing pages. It features a two-column layout with animated text, actionable buttons, social proof statistics, and a visually appealing image collage.

• Slarivo Feature Sections

  Here is Feature Sections component

• Slarivo Profile Card

  This is a high-fidelity Animated Profile Card component designed for user discovery or social interactions. It includes layered blur effects, animated reveal of bio/stats, motion-enhanced name rendering (letter-by-letter), and an interactive follow button. It adapts to theme and motion preferences, making it production-ready for profile previews in social apps, team dashboards, or creator platforms. Perfect for social networks, SaaS teams, influencer marketplaces, or any UI needing rich identity previews with motion-driven engagement.

• Slarivo Bento Grid

  Grids & Bento component from the 21st.dev community.

• Slarivo Globe CDN

  A Vercel-style WebGL globe with spinning 3D pyramid markers at edge regions and live traffic stats on arcs.

• Slarivo Dashboard Overview

  Dashboard overview for the admin dashboard

• Slarivo Dashboard

  Marketing Dashboard Description: An animated dashboard card to display marketing activities and team statistics. It features a main header, two distinct stat cards, and a call-to-action banner. The component uses framer-motion for smooth, engaging animations on load and hover.

• Slarivo KPI Card

  Here is KPI card component

• Slarivo Stats Card

  Animated Activity Stats Card Description: A responsive and theme-adaptive card component designed to display key statistics and a corresponding bar chart. It's built to be highly reusable, with all content and data passed via props. The bar chart features smooth, staggered animations powered by framer-motion to enhance the user experience

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

  A beautiful, animated screen time statistics card component inspired by macOS Screen, Time widget design. Displays usage patterns with an interactive bar chart and top app breakdown.

• Slarivo Category Bar Chart

  A clean, responsive category bar chart component for visualizing sales channel performance. Perfect for dashboards and analytics pages.

• Slarivo Card

  Payment Summary Card A visually appealing card to display financial summaries, featuring a main metric, a clickable sub-section, and an avatar stack.

• Slarivo Stats

  Here is minimalistic beautiful stats component

• Slarivo Stats

  Here is advanced charts with chart

• Slarivo Block Game

  Block Game

• Slarivo Card

  Highlight Card A visually rich card component designed to draw attention to key metrics or highlights. It features a gradient background with a subtle dot pattern, a distinctive bookmark-style icon holder, and smooth animations powered by framer-motion. The component is fully customizable through props, allowing for easy reuse throughout an application.

• 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 Stock Portfolio Card

  Stock Portfolio Card This component provides a comprehensive view of a user's stock portfolio, including total gain, individual holdings, and related news. It's designed to be highly reusable, accepting all data through props.

• Slarivo Ticker

  A composable finance ticker for displaying a stock symbol, logo, price, and color-coded price change.

• Slarivo Data Card Display

  This React component efficiently displays data in a visually appealing and responsive grid of cards. It's designed to present key metrics or information concisely, making it ideal for dashboards or summary views. The component leverages the shadcn/ui library for styling and accessibility, ensuring a consistent and professional look and feel across light and dark themes. Each card displays a title, value, description, and optionally an icon and an action button. The component handles various scenarios, including cases with no data, and provides clear ARIA attributes for accessibility. The `CardDisplay` component accepts an array of `CardDisplayItem` objects, each defining the content of a single card. Each `CardDisplayItem` includes properties for `id`, `title`, `value`, `description`, an optional `icon` (which can be a React component or function), an optional `actionLabel`, a boolean `isDisabled` flag for the action button, and an `onActionClick` callback function. The component dynamically renders the cards in a responsive grid layout, adjusting the number of columns based on the screen size. It uses the `cn` utility function (likely from shadcn/ui) to efficiently manage CSS classes. For example, it can be used to display key performance indicators (KPIs) on a dashboard, showing metrics like active users, revenue, or task completion rates. Each card could link to a more detailed view using the optional action button. The component's use of ARIA attributes ensures it is accessible to users of assistive technologies. The component gracefully handles the case where no data is provided, displaying a user-friendly message. This allows for flexibility and robustness in different application contexts.

• Slarivo Stats

  Here is minimalistic stat block

• Slarivo Card

  Animated Stats Card This component provides a visually appealing card to display a key statistic, such as "Fitness Age," against a benchmark. It features a smooth, count-up animation that triggers when the component enters the viewport, and it's fully theme-adaptive using shadcn variables.

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

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

• Slarivo Workout Summary Card

  Workout Summary Card This component is designed to display a detailed summary of a physical activity. It's built with props for easy customization of content, including the main activity, detailed stats, and header actions.

• Slarivo Stock Trends Carousel

  StockTrendsCarousel A responsive and animated carousel to display trending stock information. It features a clean header, a horizontally scrollable list of stock cards, and a navigation button.

• Slarivo Heat Map middle

  Here is heat map middle sized

• Slarivo Animated Hero

  Beautifully designed, fully responsive, expertly crafted with amazing jelly animation.

• Slarivo Stats 2

  Stats with numbers

• Slarivo Stats

  Here is minimalistic stats with progress bar

• Slarivo Animated Live Visitor

  Animated Avatars Live Visitor Counter

• Slarivo Shine Border Stats Card

  An animated conic-gradient shine border wrapping a business stats dashboard card with live metrics and a call-to-action button.

• Slarivo Skill Level Meters

  A stacked list of labeled meter bars that visualize skill levels as animated percentage fills.

• Slarivo Subscription Card

  Subscription Card

• Slarivo Sidebar Dashboard Skeleton

  Loading placeholder that mirrors a sidebar dashboard layout with a nav rail, header actions, stat cards, and list rows.

• Slarivo Card

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

• Slarivo Streak Badge

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

• Slarivo Multi Series Bar

  Here is multi series bar chart medium size

• Slarivo Stacked Bar XL

  Here is stacked bar xl sized component

• Slarivo Stats

  Here is minimalistic stats component

• Slarivo Feature Bento

  A responsive bento-grid feature section with a hero card, stat tiles, and CTA blocks for product landing pages.

• Slarivo Stacked Diverging bar

  here is Stacked diggering bar chart medium

• Slarivo Funnel Chart medium

  Here is Funnel Chart medium sized

• Slarivo BeUI Number Animation

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

• Slarivo The Item one

  Here is The Item components

• Slarivo Features Card

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

• Slarivo Grid Beam

  Animated canvas background that sends soft glowing light beams along grid dividers, with color palette presets and composable headless pieces.

• Slarivo Text Scramble

  Characters scramble through random glyphs before resolving to the final text, creating a cipher-decoding effect on mount.

• Slarivo Text Roll

  Characters roll in and out with a 3D perspective flip — each letter animates independently for a mechanical, tactile reveal effect.

• Slarivo Impact-section

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

• Slarivo Points Awards

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

• 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 Upstash Counter

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

• 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 Counting Number

  An animated number that smoothly counts from a start value up to a target, with imperative replay and start/complete callbacks.

• Slarivo AI Latency Meter

  Response time visualization for AI requests showing TTFB and total duration with color-coded performance indicators, an animated progress bar, and compact or expanded variants.

• Slarivo Relative Time

  Here is Relative Time component

• Slarivo Toolbar

  Here is Toolbar component

• Slarivo Stacked Bar medium

  Here is stacked bar medium sice

• Slarivo Tweet Card

  A polished tweet-style card built with React, Framer Motion, and Tailwind, featuring interactive actions, hover-based lighting, and support for avatars, rich media, and live-like stats.

• Slarivo Neomorphism Metric Card

  A stunning Neomorphism style metric card featuring soft dynamic shadows, positive/negative trend indicators, and premium Framer Motion hover animations.

• Slarivo Relative Time

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

• Slarivo Neomorphism Metric Card

  A stunning Neomorphism style metric card featuring soft dynamic shadows, positive/negative trend indicators, and premium Framer Motion hover animations.

• 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 GitHub Repository Cards

  A vertical list of GitHub repository cards showing name, description, visibility badge, language, star and fork counts.

• Slarivo Stats Bento

  A responsive bento-grid stats section that highlights key metrics like market share, growth, awards, and ratings in mixed-size cards.

• Slarivo About Bento

  A responsive bento-grid about section showcasing company impact stats, growth metrics, and a community call-to-action.

• Slarivo Upstash Leaderboard

  A ranked leaderboard display for Redis sorted sets with positions, scores, avatars, and gold/silver/bronze styling for the top three.

• Slarivo Segmented Control Tabs

  A compact segmented-control style tab switcher with icons that toggles between daily, weekly, monthly and yearly stat cards.

• Slarivo Feature Overview Bento

  A bento-grid feature section that mixes a customer quote with avatar, two metric tiles, a product-update card with an action button, and a checklist of steps, all laid out on a hairline grid.

• Slarivo Tier List Maker

  A polished drag-and-drop tier list builder. Rank avatars into S/A/B/C/D rows, rename and reorder tiers, add or remove rows, and drag anyone back to the bench. Custom pointer-based drag and drop, macOS-style dock magnification on the bench tray, ghost-slot…

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

  A compact KPI card showing a metric value with an icon and a tinted trend badge comparing to a previous period.