logo

8bitcn/ui

DocsComponentsBlocksThemesSponsors
Sections
  • Get Started
  • Components
  • Blocks
Components
  • Accordion
  • Alert Dialog
  • Alert
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Collapsible
  • Combo Box
  • Command
  • Context Menu
  • Date Picker
  • Dialog
  • Drawer
  • Dropdown Menu
  • Empty
  • Enemy Health Display
  • Health Bar
  • Hover Card
  • Input OTP
  • Input
  • Item
  • Kbd
  • Label
  • Mana Bar
  • Menubar
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Radio Group
  • Resizable
  • Retro Mode Switcher
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Spinner
  • Switch
  • Table
  • Tabs
  • Textarea
  • Theme Selector
  • Toast
  • Toggle Group
  • Toggle
  • Tooltip
  • XP Bar

XP Bar

Previous

Displays an 8-bit XP bar component with level up animation.

Tooltip

On This Page

InstallationUsageLevel Up Animation
SponsorsSponsored by
Shadcn Blocks

Shadcn Blocks

The ultimate block set for Shadcn

Shadcn Studio

Shadcn Studio

Shadcn blocks & templates

Built by OrcDev and Contributors. The source code is available on GitHub.

8-bit XP Bar component

Open in v0

Default XP bar

XP65%

Retro XP bar

XP45%

Level Up! (100%)

XP100%
LEVEL UP!

Installation


pnpm dlx shadcn@latest add @8bitcn/xp-bar

Usage


Level Up Animation

When the XP bar reaches 100%, it displays a flashing animation with a "LEVEL UP!" message:

You can customize the level up message: