1 GitHub star = 1 new component.

Star the repo
Data Displaygraphstatdata

Metric with Sparkline

Compact stat card with inline SVG trend sparkline.

Sessions

2,415

Usage

Copy and paste this code into your React component:

tsx
import { SparklineStatCard } from 'react-component-kit-ui/data';

<SparklineStatCard>Content</SparklineStatCard>

Manual Installation

If you are not using the npm package, create a new file and paste the following code: src/components/SparklineStatCard.tsx + SparklineStatCard.css:

SparklineStatCard.tsx
'use client';

import './SparklineStatCard.css';

/** SparklineStatCard โ€” ported from astro-component-kit. */
export interface SparklineStatCardProps {
}

export function SparklineStatCard({}: SparklineStatCardProps) {
  return (
    <>
      <div className="spark-card" data-rk-37980c="">
        <div className="top" data-rk-37980c=""><span data-rk-37980c="">Sessions</span><h3 data-rk-37980c="">2,415</h3></div>
        <div className="graph" data-rk-37980c="">
          <svg viewBox="0 0 100 30" data-rk-37980c="">
            <path d="M0 25 L10 20 L20 22 L30 15 L40 18 L50 25 L60 10 L70 12 L80 5 L90 8 L100 2" fill="none" stroke="#6366f1" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" data-rk-37980c="" />
          </svg>
        </div>
      </div>
    </>
  );
}

export default SparklineStatCard;
SparklineStatCard.css
/* SparklineStatCard โ€” ported from astro-component-kit (data/SparklineStatCard.astro) */

.spark-card:where([data-rk-37980c]) { padding: 1.5rem; background: #111; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; min-width: 160px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
h3:where([data-rk-37980c]) { margin: 4px 0; color: #fff; font-size: 1.5rem; font-weight: 800; }
span:where([data-rk-37980c]) { font-size: 0.75rem; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.graph:where([data-rk-37980c]) { margin-top: 15px; height: 30px; opacity: 0.8; }

Quick Info

Category
Data Display
Filename
SparklineStatCard.tsx
Dependencies
None โ€” pure React + CSS
Tags
graphstatdata