Apple Activity Card
Inspired by Apple activity app.
Installation
Usage
import { AppleActivityCard } from "viora-ui";import { AppleActivityCard } from "viora-ui";
export default function AppleActivityCardDemo() {
return (
<div className="flex min-h-[350px] w-full items-center justify-center p-6">
<AppleActivityCard />
</div>
);
}API Reference
ActivityData
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | - | Configuration for label. |
| value | number | - | Configuration for value. |
| color | string | - | Configuration for color. |
| size | number | - | Size option for the component. |
| current | number | - | Configuration for current. |
| target | number | - | Configuration for target. |
| unit | string | - | Configuration for unit. |
CircleProgress
| Prop | Type | Default | Description |
|---|---|---|---|
| data | ActivityData | - | List of data to render. |
| index | number | - | Configuration for index. |
Built by Otis
Last updated: 10/12/2026