Label Card
A Parcel Shop label pack row with usage progress or a status badge.
PS200 - PS3999
Activada el 7 may 2026
73%366/500 usadas- Consumido
PS4000 - PS4499
Consumido el 7 may 2026
- Desactivada
PS4500 - PS4999
Desactivada el 6 may 2026
Installation
npx shadcn@latest add @ecodeliver/label-cardUsage
Pass a label pack. For an active pack, onMarkConsumed fires with the pack id when the consume action is pressed. Consumed and disabled packs show a badge instead.
import { LabelCard } from "@/components/registry/label-card";
export function Example() {
return (
<LabelCard
label={{
id: "lbl-001",
rangeFrom: "PS200",
rangeTo: "PS3999",
status: "active",
updatedAt: "2026-05-07T10:00:00.000Z",
used: 366,
}}
onMarkConsumed={(id) => console.log(id)}
/>
);
}packSize defaults to 500 and is used for the usage percentage.
API Reference
LabelCard
| Prop | Type | Default |
|---|---|---|
label | Label | - |
onMarkConsumed | (id: string) => void | - |
packSize | number | 500 |
className | string | - |
Label
| Prop | Type | Default |
|---|---|---|
id | string | - |
rangeFrom | string | - |
rangeTo | string | - |
status | "active" | "consumed" | "disabled" | - |
updatedAt | string | - |
used | number | - |