Stats Card

// Code for stats-card/basic

Installation

Usage

import { StatsCard } from "@/components/pluto-ui/stats-card"

Basic

The simplest usage with default values:

<StatsCard value="750k" label="Views" />

Custom Size

Adjust the card dimensions:

<StatsCard 
  value="1.2M" 
  label="Subscribers" 
  width={320} 
  height={280} 
/>

Custom Animation Speed

Change the dot animation duration:

<StatsCard 
  value="45k" 
  label="Downloads" 
  animationDuration={4} 
/>

Props

Examples

Basic

The default stats card with animated dot:

// Code for stats-card/basic

Custom

Multiple cards with different sizes and animation speeds:

// Code for stats-card/custom

Minimal

A smaller, more compact version:

// Code for stats-card/minimal

Features

• Animated Dot: A glowing dot that continuously moves around the card corners in a loop
• Gradient Backgrounds: Radial gradients that create depth and visual interest
• Ray Effect: A subtle glowing ray effect that adds a futuristic touch
• Gradient Text: The stat value uses a gradient text effect for emphasis
• Decorative Lines: Subtle lines on all edges that enhance the card's structure
• Theme Support: Automatically adapts to light/dark themes using shadcn CSS variables
• Customizable: Full control over size, animation speed, and styling

How It Works

The component consists of several visual layers:

1. Outer Container: A radial gradient border that creates the card's frame
2. Animated Dot: A small glowing dot that moves in a rectangular path around the corners using Framer Motion
3. Card Background: A radial gradient background that creates depth
4. Ray Effect: A blurred, rotated element that simulates a light ray
5. Text Content: The stat value with gradient text and a label below
6. Decorative Lines: Four lines (top, bottom, left, right) positioned at 10% from edges

The dot animation follows a 4-point path:

• Top-right corner (10%, 10%)
• Top-left corner (10%, 10% from right)
• Bottom-left corner (10% from bottom, 10% from right)
• Bottom-right corner (10% from bottom, 10%)

Customization

Custom Dimensions

Adjust the card size to fit your layout:

<StatsCard 
  value="99.9%" 
  label="Uptime" 
  width={320} 
  height={280} 
/>

Custom Animation Speed

Make the dot move faster or slower:

<StatsCard 
  value="42" 
  label="Active Users" 
  animationDuration={3} // Faster (3 seconds)
/>

<StatsCard 
  value="1.2M" 
  label="Subscribers" 
  animationDuration={10} // Slower (10 seconds)
/>

Custom Styling

Add custom classes for additional styling:

<StatsCard 
  value="750k" 
  label="Views" 
  className="shadow-lg" 
/>

Multiple Cards

Display multiple stats cards in a grid:

<div className="grid grid-cols-3 gap-4">
  <StatsCard value="750k" label="Views" />
  <StatsCard value="1.2M" label="Subscribers" />
  <StatsCard value="45k" label="Downloads" />
</div>

Styling

The component uses shadcn CSS variables for all colors, ensuring seamless theme integration:

• Background: hsl(var(--background))
• Foreground: hsl(var(--foreground))
• Muted: hsl(var(--muted))
• Border: hsl(var(--border))

All colors automatically adapt to light/dark mode through your theme configuration.

Browser Support

This component uses:

• CSS radial gradients (supported in all modern browsers)
• Framer Motion animations (requires JavaScript)
• CSS backdrop-filter for blur effects

The component works in all modern browsers:

• Chrome 12+
• Firefox 10+
• Safari 4+
• Edge 12+

Notes

• Requires motion (framer-motion) as a dependency
• The dot animation runs continuously in an infinite loop
• All measurements use pixels for precise control
• The component is fully responsive and can be used in any layout
• Colors respect prefers-color-scheme through shadcn variables

Credits

This component was inspired by the Stats Card design from Uiverse.io, reimplemented with React, Tailwind CSS, and Framer Motion.