FreeApplication UI

Notification Stack

Use this component inside dashboards, admin panels, notification centers, and hero mockups to show compact activity updates.

ReactTailwind CSSMotionNotifications

Payment confirmed

Workspace activity update

New comment added

Workspace activity update

Deploy completed

Workspace activity update

Overview

A layered notification stack for showing recent app events and workspace updates.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

npm install framer-motion

Usage

tsx

<NotificationStack />

Notification Stack.tsx

tsx

"use client";

import { motion } from "framer-motion";

const notifications = ["Payment confirmed", "New comment added", "Deploy completed"];

export function NotificationStack() {
  return (
    <div className="relative h-40 w-full max-w-sm">
      {notifications.map((item, index) => (
        <motion.div
          key={item}
          animate={{ y: index * 34, scale: 1 - index * 0.04 }}
          className="absolute inset-x-0 rounded-xl border border-white/10 bg-zinc-950 p-4 text-white shadow-xl shadow-black/20"
          style={{ zIndex: notifications.length - index }}
        >
          <p className="text-sm font-semibold">{item}</p>
          <p className="mt-1 text-xs text-zinc-400">Workspace activity update</p>
        </motion.div>
      ))}
    </div>
  );
}