gamma logo

1

Activity Dropdown

PreviousNext

A modern, animated activity/notification dropdown with smooth accordion motion and staggered list reveal.

Installation

pnpm dlx shadcn@latest add @gammaui/activity-dropdown

Usage

import { ActivityDropdown } from "@/components/ui/activity-dropdown"
 
export default function Example() {
  return (
    <div className="p-4">
      <ActivityDropdown />
    </div>
  )
}

This renders a fully animated notification dropdown with smooth transitions and staggered item animation.

Props

PropTypeDefaultDescription
classNamestring—Add custom Tailwind classes to the wrapper.
...propsReact.HTMLAttributes<HTMLDivElement>—Pass additional DOM attributes.

Component Features

  • Smooth accordion-style open/close animation
  • Staggered activity item transitions
  • Beautiful dark mode support
  • Built-in icons using Tabler Icons
  • Fully responsive layout
  • Elegant hover states
  • Easy to customize (titles, icons, colors, animations)

Activity Object Shape

interface Activity {
  id: number
  icon: React.ReactNode
  iconBg: string
  title: string
  description: string
  time: string
}

Example: Adding Your Own Activity Items

import { ActivityDropdown } from "@/components/ui/activity-dropdown"
 
const customActivities = [
  {
    id: 99,
    icon: <IconStar className="h-4 w-4" />,
    iconBg: "bg-yellow-500/20",
    title: "Premium Feature Unlocked",
    description: "You now have access to all premium tools.",
    time: "1 min ago",
  },
]
 
export default function Example() {
  return <ActivityDropdown activities={customActivities} />
}

Tips

  • Ideal for dashboards, notifications, and activity feeds.
  • You can adjust animation speed by modifying transitionDelay.
  • Wrap it inside a card or navbar dropdown for more complex layouts.
  • Works beautifully with shadcn/ui and Tailwind themes.