Components
Loading preview...
This is a points awards component
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/points-awardsimport { PointsAwards } from "@/components/ui/points-awards"
export default function Demo() {
return (
<div style={{ padding: "16px 8px" }}>
<PointsAwards
awards={[
{
id: "1",
awarded: 12,
date: "2026-05-07T10:00:00Z",
total: 20148,
trigger: { id: "t1", type: "time", points: 12, timeInterval: 1, timeUnit: "day" },
},
{
id: "2",
awarded: 20,
date: "2026-05-06T18:00:00Z",
total: 20136,
trigger: { id: "t2", type: "streak", points: 20, streakLengthThreshold: 7 },
},
{
id: "3",
awarded: 8,
date: "2026-05-06T09:00:00Z",
total: 20116,
trigger: { id: "t3", type: "user_creation", points: 8 },
},
{
id: "4",
awarded: 10,
date: "2026-05-04T14:00:00Z",
total: 20108,
trigger: { id: "t4", type: "metric", points: 10, metricName: "words written", metricThreshold: 1000 },
},
]}
/>
</div>
)
}