Level up
XP bar with a hot leading edge; when it overflows the bar flashes and the level number bursts into pixels that reassemble as the next level.
Playground
Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.
<PxXp level={7} />Installation
pnpm dlx shadcn@latest add @lumesec/px-xpFirst timeRegister the @lumesec registry once, or install by URL+
Adds @lumesec to your components.json:
pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/px-xp.jsonUsage
import { PxXp } from "@/components/lumesec/px-xp";
export function Example() {
return (
<PxXp />
);
}Behaviour
XP pours into a pixel bar with a hot leading edge. When it overflows, the bar flashes and the level number bursts into pixels that reassemble as the next one.
API reference
Attributes
levelReact proplevelTypenumberDefault7Starting level. Read once on first connect.
Events
Events bubble and cross the shadow boundary unless the description says otherwise.
gainReact proponGainDetail{ xp: number }Fires on each gain with the amount added.
levelupReact proponLevelupDetail{ level: number }Fires when the bar overflows, with the new level.
Methods
Call them on the element, for example through a React ref.
gain(xp: number)Adds XP, fires gain and animates the bar; overflow carries into the next level.
Accessibility
- The level is text ("Level 7"). The bar canvas has
role="progressbar"witharia-label="XP towards level 8",aria-valuenow,aria-valuemaxandaria-valuetextsuch as "196 of 240 XP", updated on every gain and level-up. - The status line is an
aria-live="polite"region that announces "Level N reached". - "+40 XP" and "+180 XP" are native buttons.
- Reduced motion: the bar jumps to the new value and the level number changes in place without bursting into pixels; sparks are skipped.
Theming
The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.
This component reads --foreground, --lumesec and --muted-foreground.
To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-fg, --ui-mono and --ui-muted.
Notes
- XP starts at 196 and is not configurable. Each level needs 100 + 20 x level XP, so level 7 needs 240.
- The level number is set in the monospace font; during a level-up its pixels are sampled from the text and hand back to it once they settle. The canvas is 104px tall.
Related
Was this page helpful?