# Level Progress

Level and XP progress as a bar, ring or segments beside a level medallion. Levelling up is a real moment: the bar fills, the medallion pops, and leftover XP refills the new level.

> Composed · Pro · Feedback — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/level-progress
```

## Import

```tsx
import { LevelMedallion, LevelProgress } from "@/components/ui/level-progress/level-progress";
```

## Variants

- `fitness` — Fitness challenge: `npx @lumioui/cli add pro/level-progress-fitness`
- `game` — Game profile: `npx @lumioui/cli add pro/level-progress-game`
- `lesson` — Lesson streak: `npx @lumioui/cli add pro/level-progress-lesson`
- `loyalty` — Loyalty tiers: `npx @lumioui/cli add pro/level-progress-loyalty`

## Props

### LevelMedallion

| Prop | Type | Notes |
| --- | --- | --- |
| `level` | `number` | — |
| `shape?` | `"circle" | "shield" | "hex"` | — |
| `size?` | `"md" | "lg"` | — |
| `children?` | `React.ReactNode` | Replace the number with custom content (an icon for a tier). |
| `className?` | `string` | — |

### LevelProgress

| Prop | Type | Notes |
| --- | --- | --- |
| `level` | `number` | Current level. Raising it plays the level-up. |
| `xp` | `number` | XP earned inside the current level. |
| `goal` | `number` | XP needed to finish the current level. |
| `layout?` | `"bar" | "ring" | "segments"` | "bar" — medallion + bar (default). "ring" — level number inside a  ring. "segments" — one segment per unit (lessons, workouts). |
| `segments?` | `number` | Segment count for layout "segments". Default `goal` (max 12). |
| `medallion?` | `"circle" | "shield" | "hex" | "none"` | Medallion shape for bar/segments. "none" hides it. Default "circle". |
| `renderBadge?` | `(level: number) => React.ReactNode` | Custom medallion content per level (tier icon). |
| `levelLabel?` | `(level: number) => string` | Label for a level — default "Level 7". Tier names go here. |
| `unit?` | `string` | Unit after the XP numbers. Default "XP". |
| `milestones?` | `LevelMilestone[]` | Ticks on the bar — drawn as hairline cuts in the card colour, so the  bar should sit on a `bg-card` surface. Labels switch on as the fill  crosses them. |
| `hint?` | `string` | Line under the bar. Default "160 XP to Level 8". |
| `size?` | `"md" | "lg"` | — |
| `onLevelUp?` | `(level: number) => void` | Fires on the wrap of a level-up. |
| `haptic?` | `boolean` | Haptics: success on level-up, selection as a milestone switches on. Default true. |
| `className?` | `string` | — |

Source: https://lumioui.com/components/level-progress