@8bitcn

Open-source retro/8-bit styled React component library with ~35+ components (accordion, alert, avatar, badge, breadcrumb, button, calendar, card, carousel, chart, checkbox, collapsible, combo-box, command, context-menu, date-picker, dialog, drawer, dropdown-menu, enemy-health-display, and more) plus a blocks section. Built on shadcn/ui conventions with Tailwind CSS; install individual pieces via the shadcn CLI. Fully free, MIT-licensed, ~1.9k GitHub stars. Use for: landing pages, game-themed projects, or any app that wants a deliberate pixelated/retro aesthetic without building custom pixel-art CSS from scratch.

121 components react shadcn-cli MIT

website ↗ github ↗ registry ↗ agent brief (.md) ↗ clone source (120 .json) ↗ clone brief (PROMPT.md) ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://www.8bitcn.com/r/registry.json

pnpm pnpm dlx shadcn@latest add https://www.8bitcn.com/r/registry.json

bun bunx shadcn@latest add https://www.8bitcn.com/r/registry.json

fetch registry curl -s https://www.8bitcn.com/r/registry.json

Components

121 total

8-bit Chapter Intro block

A cinematic chapter/level intro with pixel art background.

npx shadcn@latest add https://www.8bitcn.com/r/chapter-intro.json

8-bit Button component

A simple 8-bit button component

npx shadcn@latest add https://www.8bitcn.com/r/button.json

8-bit Button Group component

Groups multiple 8-bit buttons together inside a shared retro pixelated border.

npx shadcn@latest add https://www.8bitcn.com/r/button-group.json

8-bit Input component

A simple 8-bit input component

npx shadcn@latest add https://www.8bitcn.com/r/input.json

8-bit Toast component

A simple 8-bit toast component

npx shadcn@latest add https://www.8bitcn.com/r/toast.json

8-bit Input-OTP component

A simple 8-bit input-otp component

npx shadcn@latest add https://www.8bitcn.com/r/input-otp.json

8-bit Badge component

A simple 8-bit badge component

npx shadcn@latest add https://www.8bitcn.com/r/badge.json

8-bit Textarea component

A simple 8-bit textarea component

npx shadcn@latest add https://www.8bitcn.com/r/textarea.json

8-bit Calendar component

A simple 8-bit calendar component

npx shadcn@latest add https://www.8bitcn.com/r/calendar.json

8-bit Date Picker component

A simple 8-bit date picker component

npx shadcn@latest add https://www.8bitcn.com/r/date-picker.json

8-bit Card component

A simple 8-bit card component

npx shadcn@latest add https://www.8bitcn.com/r/card.json

8-bit Card component

A simple 8-bit carousel component

npx shadcn@latest add https://www.8bitcn.com/r/carousel.json

8-bit Dialog component

A simple 8-bit dialog component

npx shadcn@latest add https://www.8bitcn.com/r/dialog.json

8-bit Dropdown Menu component

A simple 8-bit dropdown-menu component

npx shadcn@latest add https://www.8bitcn.com/r/dropdown-menu.json

8-bit Hover Card component

A simple 8-bit hover card component

npx shadcn@latest add https://www.8bitcn.com/r/hover-card.json

8-bit Popover component

A simple 8-bit popover component

npx shadcn@latest add https://www.8bitcn.com/r/popover.json

8-bit Resizable Panel component

Accessible resizable panel groups and layouts with keyboard support.

npx shadcn@latest add https://www.8bitcn.com/r/resizable.json

8-bit Select component

A simple 8-bit select component

npx shadcn@latest add https://www.8bitcn.com/r/select.json

8-bit sheet component

A simple 8-bit sheet component

npx shadcn@latest add https://www.8bitcn.com/r/sheet.json

8-bit Label component

A simple 8-bit label component

npx shadcn@latest add https://www.8bitcn.com/r/label.json

8-bit Checkbox component

A simple 8-bit checkbox component

npx shadcn@latest add https://www.8bitcn.com/r/checkbox.json

8-bit Scroll Area component

A simple 8-bit Scroll Area component

npx shadcn@latest add https://www.8bitcn.com/r/scroll-area.json

8-bit Switch component

A simple 8-bit switch component

npx shadcn@latest add https://www.8bitcn.com/r/switch.json

8-bit Alert component

A simple 8-bit switch component

npx shadcn@latest add https://www.8bitcn.com/r/alert.json

8-bit Alert Dialog component

A simple 8-bit Alert Dialog component

npx shadcn@latest add https://www.8bitcn.com/r/alert-dialog.json

8-bit Tooltip component

A simple 8-bit tooltip component

npx shadcn@latest add https://www.8bitcn.com/r/tooltip.json

8-bit Avatar component

A simple 8-bit avatar component

npx shadcn@latest add https://www.8bitcn.com/r/avatar.json

8-bit Skeleton component

A simple 8-bit skeleton component

npx shadcn@latest add https://www.8bitcn.com/r/skeleton.json

8-bit Breadcrumb component

A simple 8-bit breadcrumb component

npx shadcn@latest add https://www.8bitcn.com/r/breadcrumb.json

8-bit Collapsible component

A simple 8-bit collapsible component

npx shadcn@latest add https://www.8bitcn.com/r/collapsible.json

8-bit Progress component

A simple 8-bit progress component

npx shadcn@latest add https://www.8bitcn.com/r/progress.json

8-bit Enemy Health Display component

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

npx shadcn@latest add https://www.8bitcn.com/r/enemy-health-display.json

8-bit Health Bar component

A simple 8-bit health bar component

npx shadcn@latest add https://www.8bitcn.com/r/health-bar.json

8-bit Mana Bar component

A simple 8-bit mana bar component

npx shadcn@latest add https://www.8bitcn.com/r/mana-bar.json

8-bit XP Bar component

A simple 8-bit XP bar component with level up animation

npx shadcn@latest add https://www.8bitcn.com/r/xp-bar.json

8-bit Game Progress block

A simple 8-bit game progress component

npx shadcn@latest add https://www.8bitcn.com/r/game-progress.json

8-bit Dialogue block

A simple 8-bit dialogue component

npx shadcn@latest add https://www.8bitcn.com/r/dialogue.json

8-bit Profile Card component

A simple 8-bit profile card component

npx shadcn@latest add https://www.8bitcn.com/r/profile-card.json

8-bit Slider component

A simple 8-bit slider component

npx shadcn@latest add https://www.8bitcn.com/r/slider.json

8-bit Context Menu component

A simple 8-bit context menu component

npx shadcn@latest add https://www.8bitcn.com/r/context-menu.json

8-bit Menu Bar component

A simple 8-bit menu bar component

npx shadcn@latest add https://www.8bitcn.com/r/menubar.json

8-bit Toggle component

A simple 8-bit toggle component

npx shadcn@latest add https://www.8bitcn.com/r/toggle.json

8-bit Table component

A simple 8-bit table component

npx shadcn@latest add https://www.8bitcn.com/r/table.json

8-bit Tabs component

A simple 8-bit tabs component

npx shadcn@latest add https://www.8bitcn.com/r/tabs.json

8-bit Combo Box component

A simple 8-bit combo box component

npx shadcn@latest add https://www.8bitcn.com/r/combo-box.json

8-bit Command component

A simple 8-bit command component

npx shadcn@latest add https://www.8bitcn.com/r/command.json

8-bit Separator component

A simple 8-bit separator component

npx shadcn@latest add https://www.8bitcn.com/r/separator.json

8-bit Radio Group component

A simple 8-bit radio group component

npx shadcn@latest add https://www.8bitcn.com/r/radio-group.json

8-bit Pagination component

A simple 8-bit pagination component

npx shadcn@latest add https://www.8bitcn.com/r/pagination.json

8-bit Friend List block

A simple 8-bit friend list component

npx shadcn@latest add https://www.8bitcn.com/r/friend-list.json

8-bit Login Form block

A simple 8-bit login form component

npx shadcn@latest add https://www.8bitcn.com/r/login-form.json

8-bit Login Form 2 block

A simple 8-bit login form component

npx shadcn@latest add https://www.8bitcn.com/r/login-form-2.json

8-bit Login Form with Image block

A simple 8-bit login form component with image

npx shadcn@latest add https://www.8bitcn.com/r/login-form-with-image.json

8-bit Login Page page

A simple 8-bit login page component

npx shadcn@latest add https://www.8bitcn.com/r/login-page.json

8-bit Chart block

A simple 8-bit chart component

npx shadcn@latest add https://www.8bitcn.com/r/chart.json

8-bit Chart Bar block

A simple 8-bit chart bar component

npx shadcn@latest add https://www.8bitcn.com/r/chart-bar.json

8-bit Chart Area Step block

A simple 8-bit chart area step component

npx shadcn@latest add https://www.8bitcn.com/r/chart-area-step.json

8-bit Main Menu block

A simple 8-bit main menu component

npx shadcn@latest add https://www.8bitcn.com/r/main-menu.json

8-bit Pause Menu block

A simple 8-bit pause menu component

npx shadcn@latest add https://www.8bitcn.com/r/pause-menu.json

8-bit Game Over block

A simple 8-bit game over component

npx shadcn@latest add https://www.8bitcn.com/r/game-over.json

8-bit Audio Settings block

A simple 8-bit audio settings component

npx shadcn@latest add https://www.8bitcn.com/r/audio-settings.json

8-bit Toggle Group component

A simple 8-bit toggle group component

npx shadcn@latest add https://www.8bitcn.com/r/toggle-group.json

8-bit Sidebar block

A simple 8-bit sidebar component

npx shadcn@latest add https://www.8bitcn.com/r/sidebar.json

8-bit Accordion component

A simple 8-bit accordion component

npx shadcn@latest add https://www.8bitcn.com/r/accordion.json

8-bit Drawer component

A simple 8-bit drawer component

npx shadcn@latest add https://www.8bitcn.com/r/drawer.json

8-bit Navigation Menu component

A simple 8-bit navigation menu component

npx shadcn@latest add https://www.8bitcn.com/r/navigation-menu.json

8-bit Difficulty Select block

A reusable 8-bit difficulty selector with Easy, Normal, Hard.

npx shadcn@latest add https://www.8bitcn.com/r/difficulty-select.json

8-bit Leaderboard block

A retro-styled leaderboard component for displaying player rankings with avatars and scores.

npx shadcn@latest add https://www.8bitcn.com/r/leaderboard.json

8-bit Player Profile Card block

A comprehensive player profile card component with stats, health/mana bars, and custom stats support.

npx shadcn@latest add https://www.8bitcn.com/r/player-profile-card.json

8-bit Quest Log block

A retro-styled quest log component for tracking game missions and tasks with accordion functionality and status indicators.

npx shadcn@latest add https://www.8bitcn.com/r/quest-log.json

8-bit Save Slots block

A retro-styled save/load game interface with slot previews, timestamps, and empty slot handling.

npx shadcn@latest add https://www.8bitcn.com/r/save-slots.json

8-bit Dashboard 01 page

A complete 8-bit styled dashboard with sidebar navigation, stats cards, charts, and data table with drag-and-drop functionality.

npx shadcn@latest add https://www.8bitcn.com/r/dashboard-01.json

8-bit Theme Selector component

A complete theme selector component with dropdown selection and code copy functionality. Includes theme context provider for managing active themes across the …

npx shadcn@latest add https://www.8bitcn.com/r/theme-selector.json

8-bit Spinner component

Displays an 8-bit spinner component.

npx shadcn@latest add https://www.8bitcn.com/r/spinner.json

8-bit Kbd component

A simple 8-bit kbd component

npx shadcn@latest add https://www.8bitcn.com/r/kbd.json

8-bit Retro Mode Switcher component

A retro-styled theme toggle component with pixel art sun and moon icons. Perfect for 8-bit themed applications that need a nostalgic theme switcher.

npx shadcn@latest add https://www.8bitcn.com/r/retro-mode-switcher.json

8-bit Empty component

Displays an 8-bit empty component.

npx shadcn@latest add https://www.8bitcn.com/r/empty.json

8-bit Item component

Displays an 8-bit item component.

npx shadcn@latest add https://www.8bitcn.com/r/item.json

8-bit Character Sheet block

A comprehensive RPG character stats page with attributes, equipment, and customizable sections.

npx shadcn@latest add https://www.8bitcn.com/r/character-sheet.json

8-bit Victory Screen block

A simple 8-bit Victory Screen component

npx shadcn@latest add https://www.8bitcn.com/r/victory-screen.json

8-bit Loading Screen block

A retro-styled loading screen with animated progress bar and rotating tips.

npx shadcn@latest add https://www.8bitcn.com/r/loading-screen.json

8-bit Hero 1 block

Centered hero section

npx shadcn@latest add https://www.8bitcn.com/r/hero1.json

8-bit Hero 2 block

Split-layout hero section

npx shadcn@latest add https://www.8bitcn.com/r/hero2.json

8-bit Feature 1 block

Feature card grid with icons, titles, descriptions, and optional badges.

npx shadcn@latest add https://www.8bitcn.com/r/feature1.json

8-bit Hero 3 block

Game-style title screen hero with stat cards and blinking text.

npx shadcn@latest add https://www.8bitcn.com/r/hero3.json

8-bit Feature 2 block

Step-by-step feature list with numbered icons and separators.

npx shadcn@latest add https://www.8bitcn.com/r/feature2.json

8-bit Feature 3 block

Swipeable feature carousel with cards and pixel arrows.

npx shadcn@latest add https://www.8bitcn.com/r/feature3.json

8-bit Pricing 1 block

Classic tier cards with feature lists and CTAs.

npx shadcn@latest add https://www.8bitcn.com/r/pricing1.json

8-bit Pricing 2 block

Pricing cards with monthly/yearly toggle.

npx shadcn@latest add https://www.8bitcn.com/r/pricing2.json

8-bit FAQ1 block

Simple accordion FAQ.

npx shadcn@latest add https://www.8bitcn.com/r/faq1.json

8-bit FAQ2 block

Two-column card grid FAQ.

npx shadcn@latest add https://www.8bitcn.com/r/faq2.json

8-bit FAQ3 block

Searchable FAQ with categories.

npx shadcn@latest add https://www.8bitcn.com/r/faq3.json

8-bit Social Proof 1 block

Stats bar with numbers and optional logo cloud.

npx shadcn@latest add https://www.8bitcn.com/r/social-proof1.json

8-bit Social Proof 2 block

Two-column testimonial cards.

npx shadcn@latest add https://www.8bitcn.com/r/social-proof2.json

8-bit Social Proof 3 block

Swipeable review carousel with ratings.

npx shadcn@latest add https://www.8bitcn.com/r/social-proof3.json

8-bit Timeline 1 block

Vertical timeline with connecting line.

npx shadcn@latest add https://www.8bitcn.com/r/timeline1.json

8-bit Timeline 2 block

Horizontal progress steps with checkpoints.

npx shadcn@latest add https://www.8bitcn.com/r/timeline2.json

8-bit Timeline 3 block

Zigzag roadmap with alternating cards.

npx shadcn@latest add https://www.8bitcn.com/r/timeline3.json

8-bit CTA1 block

Us vs them comparison table.

npx shadcn@latest add https://www.8bitcn.com/r/cta1.json

8-bit CTA2 block

Persona use case cards with CTAs.

npx shadcn@latest add https://www.8bitcn.com/r/cta2.json

8-bit Footer 1 block

Sticky CTA bar that appears on scroll.

npx shadcn@latest add https://www.8bitcn.com/r/footer1.json

8-bit Team 1 block

Team grid with pixel avatars and roles.

npx shadcn@latest add https://www.8bitcn.com/r/team1.json

8-bit Team 2 block

Changelog feed with dates and badges.

npx shadcn@latest add https://www.8bitcn.com/r/team2.json

8-bit Team 3 block

Case study cards with KPI badges.

npx shadcn@latest add https://www.8bitcn.com/r/team3.json

8-bit Advanced 1 block

Fake terminal demo shell with command output.

npx shadcn@latest add https://www.8bitcn.com/r/advanced1.json

8-bit Advanced 2 block

KPI metrics dashboard with progress bars.

npx shadcn@latest add https://www.8bitcn.com/r/advanced2.json

8-bit Advanced 3 block

Newsletter signup card with input and CTA.

npx shadcn@latest add https://www.8bitcn.com/r/advanced3.json

8-bit game-hero1 block

Health bar hero with progress indicator.

npx shadcn@latest add https://www.8bitcn.com/r/game-hero1.json

8-bit game-roadmap1 block

Quest log roadmap with status states.

npx shadcn@latest add https://www.8bitcn.com/r/game-roadmap1.json

8-bit game-hero2 block

XP milestone hero with level badges.

npx shadcn@latest add https://www.8bitcn.com/r/game-hero2.json

8-bit game-cta1 block

Boss fight CTA with problem vs solution.

npx shadcn@latest add https://www.8bitcn.com/r/game-cta1.json

8-bit game-features1 block

Skill tree feature grid with progress.

npx shadcn@latest add https://www.8bitcn.com/r/game-features1.json

8-bit game-team1 block

Party grid with avatars and HP bars.

npx shadcn@latest add https://www.8bitcn.com/r/game-team1.json

8-bit game-faq1 block

Checkpoint FAQ with progression states.

npx shadcn@latest add https://www.8bitcn.com/r/game-faq1.json

8-bit 404 Page block

Retro 404 page with pixel art character.

npx shadcn@latest add https://www.8bitcn.com/r/not-found1.json

8-bit 404 Dwarf block

Retro 404 page with pixel dwarf character.

npx shadcn@latest add https://www.8bitcn.com/r/not-found2.json

8-bit 404 Undead block

Cursed 404 page with pixel undead character.

npx shadcn@latest add https://www.8bitcn.com/r/not-found3.json

8-bit Crate Pusher 404 block

A randomized crate-pushing 404 page with 20 curated, solver-verified puzzles.

npx shadcn@latest add https://www.8bitcn.com/r/not-found-crate-pusher.json

8-bit Brick Breaker 404 block

A playable brick-breaker 404 page with keyboard, pointer, and touch controls.

npx shadcn@latest add https://www.8bitcn.com/r/not-found-brick-breaker.json

8-bit Portal Transition block

Interactive CTA with clickable portal and traveling state.

npx shadcn@latest add https://www.8bitcn.com/r/portal-transition.json

8-bit Duel Block block

Interactive arena duel with two fighters, HP bars, and hit mechanics.

npx shadcn@latest add https://www.8bitcn.com/r/duel-block.json