Activity Card

A compact card component for displaying user activities or notifications.

Daily Focus Rings

A quick snapshot of how you’re spending your energy today.

DEEP WORK ring – 80%
CREATIVE ring – 62%
COMMUNICATION ring – 45%
Today
DEEP WORK80% today
5.2/ 6 hrs

Time spent in distraction-free focus blocks

CREATIVE62% today
2.5/ 4 hrs

Design, writing, exploration & ideation

COMMUNICATION45% today
14/ 30 msgs

Replies across email, chat & comments

Installation

bash
npm install motion lucide-react

Usage

tsx
import ActivityCard from '@/components/ui/activity-card';

<ActivityCard
  title="AI Workspace"
  className=""
/>