Building Retro Blocks for the Web

Clean, retro building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever.

Chapter intro

pnpm dlx shadcn@latest add @8bitcn/chapter-intro@8bitcn/chapter-introOpen in

LEVEL 1: FIERY SKELETONS

Defeat the skeletons to unlock the gate.

Main menu

pnpm dlx shadcn@latest add @8bitcn/main-menu@8bitcn/main-menuOpen in

Main Menu

Retro 8-bit Quest

START GAME

OPTIONS

HIGH SCORES

MULTIPLAYER

QUIT

Difficulty select

pnpm dlx shadcn@latest add @8bitcn/difficulty-select@8bitcn/difficulty-selectOpen in

Select Difficulty

EASY

NORMAL

HARD

Dialogue

pnpm dlx shadcn@latest add @8bitcn/dialogue@8bitcn/dialogueOpen in

Orc

Orc

I bring you a gift… it's called AXE TO THE FACE! SLASH!!

Goblin

`Screeches like a dying flute`

Goblin

Pause menu

pnpm dlx shadcn@latest add @8bitcn/pause-menu@8bitcn/pause-menuOpen in

Paused

RESUME

RESTART

QUIT

Game over

pnpm dlx shadcn@latest add @8bitcn/game-over@8bitcn/game-overOpen in

Game Over

Continue?

Retry

Exit

Audio settings

pnpm dlx shadcn@latest add @8bitcn/audio-settings@8bitcn/audio-settingsOpen in

Audio Settings

Master Volume

SFX Volume

Mute Audio

Vibration

Health bar

pnpm dlx shadcn@latest add @8bitcn/health-bar@8bitcn/health-barOpen in

Default

Retro

Mana bar

pnpm dlx shadcn@latest add @8bitcn/mana-bar@8bitcn/mana-barOpen in

Default

Retro

Enemy Health Display

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

Boss Enemy (High Health)

Fire DragonLv.25

850/1000

85%

Regular Enemy (Low Health)

Goblin WarriorLv.5

45/100

45%

Elite Enemy (Critical Health)

Dark KnightLv.15

12/200

6%

Player Profile Card

pnpm dlx shadcn@latest add @8bitcn/player-profile-card@8bitcn/player-profile-cardOpen in

Default Variant

OD

OrcDev

Lv.25

Web Dev Warrior

Health850/1000

Mana320/400

Experience7500/10000 XP

Custom Stats Example

SK

Sir Knight

Lv.42

Fighter

Health1200/1500

Mana500/600

Experience15000/20000 XP

Stamina72/100

Leaderboard

pnpm dlx shadcn@latest add @8bitcn/leaderboard@8bitcn/leaderboardOpen in

LEADERBOARD

OD

OrcDev

125,000

S

Shadow Mage

98,500

D

Dragon Slayer

87,500

F

Fire Wizard

76,500

Y

Retro Lover

YOU

68,500

I

Ice Queen

59,500

S

Storm Knight

55,000

M

Moon Elf

50,500

Showing top 8 players

Quest Log

pnpm dlx shadcn@latest add @8bitcn/quest-log@8bitcn/quest-logOpen in

Quest Log

3 Active

Defeat the Goblin King

Defeat the Goblin King in the Dark Forest to restore peace to the village.

ACTIVE

Collect Dragon Scales

Collect 10 dragon scales from the Dragon's Lair for the blacksmith.

ACTIVE

Collect 4 sweet fruits

Collect 4 sweet fruits from the forest to make a cake for the orc chieftain.

ACTIVE

Deliver the Potion

Deliver healing potion to the wounded knight in the castle.

COMPLETED

Find the Lost Artifact

Investigate the stolen artifact and find the thief.

FAILED

Escort the Merchant

Protect the merchant while traveling through the mountain pass.

PENDING