Notification Zepa

Name: Zepa UI
Author: Sameer Shaik

Lock-screen notification stack — two alerts rest on a wallpaper card, then the rest arrive one at a time, landing on top and pushing the stack down before the sequence loops. Cards are placed by transform rather than document flow, so the shuffle animates without any layout projection.

Install

shadcn CLI

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

GitHub: @vij-sameerb5

Code

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

import { NotificationZepa } from "./ui/notification-zepa"

export default function NotificationZepaDemo() {
  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",
      }}
    >
      <NotificationZepa />
    </section>
  )
}

export const __demoId = "9e1be80ef716"

Live demo

Loading demo…