Level 7 unlocked
+0points
Level 8 at 400 points
The unlock line rises into place while the points count up beside it and the bar fills toward the next level, then everything holds.
The import and the props worth knowing about, in one place.
import { Badge5 } from "@/components/beste/piece/badge5";
<Badge5
title="Level 7 unlocked"
points={250}
progress={62}
nextLabel="Level 8 at 400 points"
tone="primary"
/>