Report Zepa

Name: Zepa UI
Author: Sameer Shaik

Stacked area report card — three series drawn as smooth gradient areas with glowing top lines. The plot wipes in when it scrolls into view, and moving the pointer across it snaps a dashed marker to the nearest column with a readout. Paths are Catmull-Rom splines computed from the data, so there is no charting library behind it.

Install

shadcn CLI

npx shadcn@latest add https://zepa.design/r/report-zepa.json

GitHub: @vij-sameerb5

Code

/**
 * Zepa UI — report-zepa
 * https://zepa.design/components/report-zepa
 * Free to use in your projects. Please don't republish or resell as your own.
 */
"use client"

import { ReportZepa } from "./ui/report-zepa"

export default function ReportZepaDemo() {
  return (
    <section
      className="relative flex w-full items-center justify-center bg-[#0b0b0e] px-6 py-16 text-white"
      style={{
        minHeight: "100vh",
        fontFamily: "var(--font-manrope), ui-sans-serif, system-ui, sans-serif",
      }}
    >
      <ReportZepa />
    </section>
  )
}

export const __demoId = "cf55b49e805b"

Live demo

Loading demo…