Components
Loading preview...
This is a points level list component
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/points-levels-listimport { PointsLevelsList } from "@/components/ui/points-levels-list"
export default function Demo() {
return (
<div style={{ padding: "16px" }}>
<PointsLevelsList
levels={[
{ id: "beginner", points: 0, name: "Beginner", iconType: "beginner" },
{ id: "novice", points: 500, name: "Novice", iconType: "novice" },
{
id: "intermediate",
points: 2500,
name: "Intermediate",
iconType: "intermediate",
},
{
id: "professional",
points: 5000,
name: "Professional",
iconType: "professional",
},
{ id: "expert", points: 7500, name: "Expert", iconType: "expert" },
{ id: "master", points: 10000, name: "Master", iconType: "master" },
{
id: "grand-master",
points: 20000,
name: "Grand Master",
iconType: "grand-master",
},
{
id: "enlightened",
points: 50000,
name: "Enlightened",
iconType: "enlightened",
},
]}
/>
</div>
)
}