From your wrist. To your website.

Apple Health,
with a little
personality.

Your daily movement deserves a place on your site. Meet the Activity Card: three familiar metrics, beautifully at home on the web.

Open source · React + Next.js · Your own database

Made for life beyond the screen.
Activity CardInteractive preview
Today / Activitysynced
Activity rings
Move
544/ 600 kcal
Exercise
80/ 30 min
Steps
6,480/ 8,000 steps
Up to date

Sample data · configurable demo goals

a good day, in a small card
01 / Your activity

A little more you.

Move, exercise and steps. A small window into your day, right alongside the things you make.

02 / Your data

Yours, all the way.

Your iPhone sends activity straight to your own database. Wristkit never receives your health data.

03 / Your style

Make yourself at home.

Six themes. Light and dark. Source code you can shape to fit your corner of the internet.

the activity card01 / component

A day in motion.
Every state considered.

Fresh numbers, a quiet day, or a missed sync. The card always tells you what it knows. Try the five states in the preview above.

Three familiar metrics

Movement, at a glance.

Active calories, exercise minutes and steps, with progress toward the goals you configure. Clear numbers accompany every ring.

Move · kcalExercise · minSteps
Designed to belong

Your palette. Your place.

Choose a theme from the switcher in the corner. The whole site follows along, including the card. Your preference stays with you.

Explore the Activity Card
from wrist to web02 / how it works

A small connection.
A personal touch.

Wristkit is currently a kit for your own Next.js project. Bring a Supabase database and connect your iPhone with an iOS Shortcut.

  1. Make room on your site

    Copy the component and sync route. Add the database tables using the SQL in the docs.

    Read the guide
  2. Connect your iPhone

    Install the Shortcut, add your endpoint and API key, then run your first sync.

    Read the guide
  3. Give your day a home

    Render the card on your site. Set an automation in Shortcuts to keep your activity updated.

    Read the guide

A little activity.
A lot of personality.

Make it yours
Active theme: Entrepta, dark mode.