---
name: "@8bitcn"
slug: "8bitcn"
description: "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."
category: "Animated components"
tags: ["aesthetic", "animation", "audio", "auth", "blocks", "buttons", "cards", "charts", "dashboard", "design-system", "forms", "gaming", "hooks", "loaders", "maps", "marketing", "media", "navigation", "overlays", "retro", "saas", "tables", "theming"]
framework: "react"
license: "MIT"
author: "TheOrcDev"
website: "https://www.8bitcn.com"
github: "https://github.com/TheOrcDev/8bitcn-ui"
registry: "https://www.8bitcn.com/r/registry.json"
pro: false
pro_url: null
github_stars: 1936
component_count: 121
generated_at: "2026-07-28T08:00:50.948Z"
---

# @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.

## Links

- Website: https://www.8bitcn.com
- GitHub: https://github.com/TheOrcDev/8bitcn-ui
- Registry JSON: https://www.8bitcn.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/8bitcn
- This file: https://sh4dcn.vercel.app/md/8bitcn.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://www.8bitcn.com/r/registry.json
pnpm dlx shadcn@latest add https://www.8bitcn.com/r/registry.json
bunx shadcn@latest add https://www.8bitcn.com/r/registry.json
# clone the source repo
git clone https://github.com/TheOrcDev/8bitcn-ui.git
# fetch the raw registry index
curl -s https://www.8bitcn.com/r/registry.json
```

## Components (121)

| name | type | description | install |
| --- | --- | --- | --- |
| chapter-intro | registry:block | A cinematic chapter/level intro with pixel art background. | `npx shadcn@latest add https://www.8bitcn.com/r/chapter-intro.json` |
| button | registry:component | A simple 8-bit button component | `npx shadcn@latest add https://www.8bitcn.com/r/button.json` |
| button-group | registry: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` |
| input | registry:component | A simple 8-bit input component | `npx shadcn@latest add https://www.8bitcn.com/r/input.json` |
| toast | registry:component | A simple 8-bit toast component | `npx shadcn@latest add https://www.8bitcn.com/r/toast.json` |
| input-otp | registry:component | A simple 8-bit input-otp component | `npx shadcn@latest add https://www.8bitcn.com/r/input-otp.json` |
| badge | registry:component | A simple 8-bit badge component | `npx shadcn@latest add https://www.8bitcn.com/r/badge.json` |
| textarea | registry:component | A simple 8-bit textarea component | `npx shadcn@latest add https://www.8bitcn.com/r/textarea.json` |
| calendar | registry:component | A simple 8-bit calendar component | `npx shadcn@latest add https://www.8bitcn.com/r/calendar.json` |
| date-picker | registry:component | A simple 8-bit date picker component | `npx shadcn@latest add https://www.8bitcn.com/r/date-picker.json` |
| card | registry:component | A simple 8-bit card component | `npx shadcn@latest add https://www.8bitcn.com/r/card.json` |
| carousel | registry:component | A simple 8-bit carousel component | `npx shadcn@latest add https://www.8bitcn.com/r/carousel.json` |
| dialog | registry:component | A simple 8-bit dialog component | `npx shadcn@latest add https://www.8bitcn.com/r/dialog.json` |
| dropdown-menu | registry:component | A simple 8-bit dropdown-menu component | `npx shadcn@latest add https://www.8bitcn.com/r/dropdown-menu.json` |
| hover-card | registry:component | A simple 8-bit hover card component | `npx shadcn@latest add https://www.8bitcn.com/r/hover-card.json` |
| popover | registry:component | A simple 8-bit popover component | `npx shadcn@latest add https://www.8bitcn.com/r/popover.json` |
| resizable | registry:component | Accessible resizable panel groups and layouts with keyboard support. | `npx shadcn@latest add https://www.8bitcn.com/r/resizable.json` |
| select | registry:component | A simple 8-bit select component | `npx shadcn@latest add https://www.8bitcn.com/r/select.json` |
| sheet | registry:component | A simple 8-bit sheet component | `npx shadcn@latest add https://www.8bitcn.com/r/sheet.json` |
| label | registry:component | A simple 8-bit label component | `npx shadcn@latest add https://www.8bitcn.com/r/label.json` |
| checkbox | registry:component | A simple 8-bit checkbox component | `npx shadcn@latest add https://www.8bitcn.com/r/checkbox.json` |
| scroll-area | registry:component | A simple 8-bit Scroll Area component | `npx shadcn@latest add https://www.8bitcn.com/r/scroll-area.json` |
| switch | registry:component | A simple 8-bit switch component | `npx shadcn@latest add https://www.8bitcn.com/r/switch.json` |
| alert | registry:component | A simple 8-bit switch component | `npx shadcn@latest add https://www.8bitcn.com/r/alert.json` |
| alert-dialog | registry:component | A simple 8-bit Alert Dialog component | `npx shadcn@latest add https://www.8bitcn.com/r/alert-dialog.json` |
| tooltip | registry:component | A simple 8-bit tooltip component | `npx shadcn@latest add https://www.8bitcn.com/r/tooltip.json` |
| avatar | registry:component | A simple 8-bit avatar component | `npx shadcn@latest add https://www.8bitcn.com/r/avatar.json` |
| skeleton | registry:component | A simple 8-bit skeleton component | `npx shadcn@latest add https://www.8bitcn.com/r/skeleton.json` |
| breadcrumb | registry:component | A simple 8-bit breadcrumb component | `npx shadcn@latest add https://www.8bitcn.com/r/breadcrumb.json` |
| collapsible | registry:component | A simple 8-bit collapsible component | `npx shadcn@latest add https://www.8bitcn.com/r/collapsible.json` |
| progress | registry:component | A simple 8-bit progress component | `npx shadcn@latest add https://www.8bitcn.com/r/progress.json` |
| enemy-health-display | registry: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` |
| health-bar | registry:component | A simple 8-bit health bar component | `npx shadcn@latest add https://www.8bitcn.com/r/health-bar.json` |
| mana-bar | registry:component | A simple 8-bit mana bar component | `npx shadcn@latest add https://www.8bitcn.com/r/mana-bar.json` |
| xp-bar | registry:component | A simple 8-bit XP bar component with level up animation | `npx shadcn@latest add https://www.8bitcn.com/r/xp-bar.json` |
| game-progress | registry:block | A simple 8-bit game progress component | `npx shadcn@latest add https://www.8bitcn.com/r/game-progress.json` |
| dialogue | registry:block | A simple 8-bit dialogue component | `npx shadcn@latest add https://www.8bitcn.com/r/dialogue.json` |
| profile-card | registry:component | A simple 8-bit profile card component | `npx shadcn@latest add https://www.8bitcn.com/r/profile-card.json` |
| slider | registry:component | A simple 8-bit slider component | `npx shadcn@latest add https://www.8bitcn.com/r/slider.json` |
| context-menu | registry:component | A simple 8-bit context menu component | `npx shadcn@latest add https://www.8bitcn.com/r/context-menu.json` |
| menubar | registry:component | A simple 8-bit menu bar component | `npx shadcn@latest add https://www.8bitcn.com/r/menubar.json` |
| toggle | registry:component | A simple 8-bit toggle component | `npx shadcn@latest add https://www.8bitcn.com/r/toggle.json` |
| table | registry:component | A simple 8-bit table component | `npx shadcn@latest add https://www.8bitcn.com/r/table.json` |
| tabs | registry:component | A simple 8-bit tabs component | `npx shadcn@latest add https://www.8bitcn.com/r/tabs.json` |
| combo-box | registry:component | A simple 8-bit combo box component | `npx shadcn@latest add https://www.8bitcn.com/r/combo-box.json` |
| command | registry:component | A simple 8-bit command component | `npx shadcn@latest add https://www.8bitcn.com/r/command.json` |
| separator | registry:component | A simple 8-bit separator component | `npx shadcn@latest add https://www.8bitcn.com/r/separator.json` |
| radio-group | registry:component | A simple 8-bit radio group component | `npx shadcn@latest add https://www.8bitcn.com/r/radio-group.json` |
| pagination | registry:component | A simple 8-bit pagination component | `npx shadcn@latest add https://www.8bitcn.com/r/pagination.json` |
| friend-list | registry:block | A simple 8-bit friend list component | `npx shadcn@latest add https://www.8bitcn.com/r/friend-list.json` |
| login-form | registry:block | A simple 8-bit login form component | `npx shadcn@latest add https://www.8bitcn.com/r/login-form.json` |
| login-form-2 | registry:block | A simple 8-bit login form component | `npx shadcn@latest add https://www.8bitcn.com/r/login-form-2.json` |
| login-form-with-image | registry:block | A simple 8-bit login form component with image | `npx shadcn@latest add https://www.8bitcn.com/r/login-form-with-image.json` |
| login-page | registry:page | A simple 8-bit login page component | `npx shadcn@latest add https://www.8bitcn.com/r/login-page.json` |
| chart | registry:block | A simple 8-bit chart component | `npx shadcn@latest add https://www.8bitcn.com/r/chart.json` |
| chart-bar | registry:block | A simple 8-bit chart bar component | `npx shadcn@latest add https://www.8bitcn.com/r/chart-bar.json` |
| chart-area-step | registry:block | A simple 8-bit chart area step component | `npx shadcn@latest add https://www.8bitcn.com/r/chart-area-step.json` |
| main-menu | registry:block | A simple 8-bit main menu component | `npx shadcn@latest add https://www.8bitcn.com/r/main-menu.json` |
| pause-menu | registry:block | A simple 8-bit pause menu component | `npx shadcn@latest add https://www.8bitcn.com/r/pause-menu.json` |
| game-over | registry:block | A simple 8-bit game over component | `npx shadcn@latest add https://www.8bitcn.com/r/game-over.json` |
| audio-settings | registry:block | A simple 8-bit audio settings component | `npx shadcn@latest add https://www.8bitcn.com/r/audio-settings.json` |
| toggle-group | registry:component | A simple 8-bit toggle group component | `npx shadcn@latest add https://www.8bitcn.com/r/toggle-group.json` |
| sidebar | registry:block | A simple 8-bit sidebar component | `npx shadcn@latest add https://www.8bitcn.com/r/sidebar.json` |
| accordion | registry:component | A simple 8-bit accordion component | `npx shadcn@latest add https://www.8bitcn.com/r/accordion.json` |
| drawer | registry:component | A simple 8-bit drawer component | `npx shadcn@latest add https://www.8bitcn.com/r/drawer.json` |
| navigation-menu | registry:component | A simple 8-bit navigation menu component | `npx shadcn@latest add https://www.8bitcn.com/r/navigation-menu.json` |
| difficulty-select | registry:block | A reusable 8-bit difficulty selector with Easy, Normal, Hard. | `npx shadcn@latest add https://www.8bitcn.com/r/difficulty-select.json` |
| leaderboard | registry: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` |
| player-profile-card | registry: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` |
| quest-log | registry: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` |
| save-slots | registry: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` |
| dashboard-01 | registry: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` |
| theme-selector | registry: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` |
| spinner | registry:component | Displays an 8-bit spinner component. | `npx shadcn@latest add https://www.8bitcn.com/r/spinner.json` |
| kbd | registry:component | A simple 8-bit kbd component | `npx shadcn@latest add https://www.8bitcn.com/r/kbd.json` |
| retro-mode-switcher | registry: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` |
| empty | registry:component | Displays an 8-bit empty component. | `npx shadcn@latest add https://www.8bitcn.com/r/empty.json` |
| item | registry:component | Displays an 8-bit item component. | `npx shadcn@latest add https://www.8bitcn.com/r/item.json` |
| character-sheet | registry: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` |
| victory-screen | registry:block | A simple 8-bit Victory Screen component | `npx shadcn@latest add https://www.8bitcn.com/r/victory-screen.json` |
| loading-screen | registry: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` |
| hero1 | registry:block | Centered hero section | `npx shadcn@latest add https://www.8bitcn.com/r/hero1.json` |
| hero2 | registry:block | Split-layout hero section | `npx shadcn@latest add https://www.8bitcn.com/r/hero2.json` |
| feature1 | registry:block | Feature card grid with icons, titles, descriptions, and optional badges. | `npx shadcn@latest add https://www.8bitcn.com/r/feature1.json` |
| hero3 | registry:block | Game-style title screen hero with stat cards and blinking text. | `npx shadcn@latest add https://www.8bitcn.com/r/hero3.json` |
| feature2 | registry:block | Step-by-step feature list with numbered icons and separators. | `npx shadcn@latest add https://www.8bitcn.com/r/feature2.json` |
| feature3 | registry:block | Swipeable feature carousel with cards and pixel arrows. | `npx shadcn@latest add https://www.8bitcn.com/r/feature3.json` |
| pricing1 | registry:block | Classic tier cards with feature lists and CTAs. | `npx shadcn@latest add https://www.8bitcn.com/r/pricing1.json` |
| pricing2 | registry:block | Pricing cards with monthly/yearly toggle. | `npx shadcn@latest add https://www.8bitcn.com/r/pricing2.json` |
| faq1 | registry:block | Simple accordion FAQ. | `npx shadcn@latest add https://www.8bitcn.com/r/faq1.json` |
| faq2 | registry:block | Two-column card grid FAQ. | `npx shadcn@latest add https://www.8bitcn.com/r/faq2.json` |
| faq3 | registry:block | Searchable FAQ with categories. | `npx shadcn@latest add https://www.8bitcn.com/r/faq3.json` |
| social-proof1 | registry:block | Stats bar with numbers and optional logo cloud. | `npx shadcn@latest add https://www.8bitcn.com/r/social-proof1.json` |
| social-proof2 | registry:block | Two-column testimonial cards. | `npx shadcn@latest add https://www.8bitcn.com/r/social-proof2.json` |
| social-proof3 | registry:block | Swipeable review carousel with ratings. | `npx shadcn@latest add https://www.8bitcn.com/r/social-proof3.json` |
| timeline1 | registry:block | Vertical timeline with connecting line. | `npx shadcn@latest add https://www.8bitcn.com/r/timeline1.json` |
| timeline2 | registry:block | Horizontal progress steps with checkpoints. | `npx shadcn@latest add https://www.8bitcn.com/r/timeline2.json` |
| timeline3 | registry:block | Zigzag roadmap with alternating cards. | `npx shadcn@latest add https://www.8bitcn.com/r/timeline3.json` |
| cta1 | registry:block | Us vs them comparison table. | `npx shadcn@latest add https://www.8bitcn.com/r/cta1.json` |
| cta2 | registry:block | Persona use case cards with CTAs. | `npx shadcn@latest add https://www.8bitcn.com/r/cta2.json` |
| footer1 | registry:block | Sticky CTA bar that appears on scroll. | `npx shadcn@latest add https://www.8bitcn.com/r/footer1.json` |
| team1 | registry:block | Team grid with pixel avatars and roles. | `npx shadcn@latest add https://www.8bitcn.com/r/team1.json` |
| team2 | registry:block | Changelog feed with dates and badges. | `npx shadcn@latest add https://www.8bitcn.com/r/team2.json` |
| team3 | registry:block | Case study cards with KPI badges. | `npx shadcn@latest add https://www.8bitcn.com/r/team3.json` |
| advanced1 | registry:block | Fake terminal demo shell with command output. | `npx shadcn@latest add https://www.8bitcn.com/r/advanced1.json` |
| advanced2 | registry:block | KPI metrics dashboard with progress bars. | `npx shadcn@latest add https://www.8bitcn.com/r/advanced2.json` |
| advanced3 | registry:block | Newsletter signup card with input and CTA. | `npx shadcn@latest add https://www.8bitcn.com/r/advanced3.json` |
| game-hero1 | registry:block | Health bar hero with progress indicator. | `npx shadcn@latest add https://www.8bitcn.com/r/game-hero1.json` |
| game-roadmap1 | registry:block | Quest log roadmap with status states. | `npx shadcn@latest add https://www.8bitcn.com/r/game-roadmap1.json` |
| game-hero2 | registry:block | XP milestone hero with level badges. | `npx shadcn@latest add https://www.8bitcn.com/r/game-hero2.json` |
| game-cta1 | registry:block | Boss fight CTA with problem vs solution. | `npx shadcn@latest add https://www.8bitcn.com/r/game-cta1.json` |
| game-features1 | registry:block | Skill tree feature grid with progress. | `npx shadcn@latest add https://www.8bitcn.com/r/game-features1.json` |
| game-team1 | registry:block | Party grid with avatars and HP bars. | `npx shadcn@latest add https://www.8bitcn.com/r/game-team1.json` |
| game-faq1 | registry:block | Checkpoint FAQ with progression states. | `npx shadcn@latest add https://www.8bitcn.com/r/game-faq1.json` |
| not-found1 | registry:block | Retro 404 page with pixel art character. | `npx shadcn@latest add https://www.8bitcn.com/r/not-found1.json` |
| not-found2 | registry:block | Retro 404 page with pixel dwarf character. | `npx shadcn@latest add https://www.8bitcn.com/r/not-found2.json` |
| not-found3 | registry:block | Cursed 404 page with pixel undead character. | `npx shadcn@latest add https://www.8bitcn.com/r/not-found3.json` |
| not-found-crate-pusher | registry: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` |
| not-found-brick-breaker | registry: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` |
| portal-transition | registry:block | Interactive CTA with clickable portal and traveling state. | `npx shadcn@latest add https://www.8bitcn.com/r/portal-transition.json` |
| duel-block | registry:block | Interactive arena duel with two fighters, HP bars, and hit mechanics. | `npx shadcn@latest add https://www.8bitcn.com/r/duel-block.json` |

## For AI agents

```text
You are adding components from @8bitcn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/8bitcn.md) for the component list.
2. Fetch the machine-readable index: https://www.8bitcn.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: 8bitcn).
```