KokonutUI Logo

CD-04CardsUpdated, October 15, 2026

Apple Activity Card

Activity rings that draw with a count-up, lap past 100% with a shadowed end cap and dim to focus, built with React and Motion.

Install with
motion

PROOnboarding Checklist and more like it are in Kokonut UI Pro

Installation

Apple Activity Card is a free, open-source React component in the Kokonut UI Cards collection. Add it with the shadcn CLI, which copies the source into components/kokonutui/apple-activity-card.tsx, so the code is yours to change.

npx shadcn@latest add @kokonutui/apple-activity-card

Usage

import AppleActivityCard from "@/components/kokonutui/apple-activity-card";

export default function Example() {
  return <AppleActivityCard />;
}

Dependencies

Built with React, Tailwind CSS and motion.

On this page

No Headings