Zepa Diagram

Name: Zepa UI
Author: Sameer Shaik

Interactive data-viz illustration — a caption chip and a half-hidden donut at rest; on hover the chip drops away, the donut lifts and fills, six labelled nodes fly out around it, and a gradient rises from the floor. Container-query sized and re-colourable, so it drops into a bento tile, a feature card or a hero.

Install

shadcn CLI

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

GitHub: @vij-sameerb5

Code

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

import { ZepaDiagram } from "./ui/zepa-diagram"

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

export const __demoId = "2323d8d9f303"

Live demo

Loading demo…