logo

8bitcn/ui

DocsComponentsBlocksThemesSponsors
Sections
  • Get Started
  • Components
  • Blocks
Getting Started
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

    Enemy Health Display

    PreviousNext

    A retro-styled enemy health display component with health bar, name, and level.

    EmptyHealth Bar

    On This Page

    InstallationUsageCustomizationPropsRequired PropsOptional Props
    SponsorsSponsored by
    Shadcn Blocks

    Shadcn Blocks

    The ultimate block set for Shadcn

    Shadcn Studio

    Shadcn Studio

    Shadcn blocks & templates

    Shadcn UI Kit

    Shadcn UI Kit

    Admin dashboards, blocks, components & examples

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

    8-bit Enemy Health Display component

    Open in v0
    Fire DragonLv.25
    850/1000
    85%
    Goblin WarriorLv.5
    45/100
    45%

    Installation


    pnpm dlx shadcn@latest add @8bitcn/enemy-health-display

    Usage


    Customization


    Props


    Required Props

    • enemyName - Enemy name to display
    • currentHealth - Current health value
    • maxHealth - Maximum health value

    Optional Props

    • level - Enemy level
    • showLevel - Show level (default: true)
    • showHealthText - Show health text (default: true)
    • healthBarVariant - "retro" | "default"
    • healthBarColor - Health bar color class
    • variant - "retro" | "default"
    • size - "sm" | "md" | "lg"
    • color - Text color variant
    • className - Additional CSS classes