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.
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-cardUsage
import AppleActivityCard from "@/components/kokonutui/apple-activity-card";
export default function Example() {
return <AppleActivityCard />;
}Dependencies
Built with React, Tailwind CSS and motion.

