Notify Zepa

Name: Zepa UI
Author: Sameer Shaik

Notification card — a slowly turning aurora behind a halftone screen, a bell sitting in the dark eye at its centre, and a badge that ticks up every time the pointer crosses the bell. The backdrop is built from blurred gradients rather than a hosted clip, so it renders with nothing to download; pass a video source to swap it.

Install

shadcn CLI

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

GitHub: @vij-sameerb5

Code

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

import { NotifyZepa } from "./ui/notify-zepa"

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

export const __demoId = "4657148d604e"

Live demo

Loading demo…