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%

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