https://github.com/toxicbishop/8-bit-ui
A retro pixel-art dashboard built with React 19, Vite 7, and 8bitcn/ui - featuring character profiles, health bars, level-up mechanics, and nostalgic 8-bit aesthetics.
https://github.com/toxicbishop/8-bit-ui
8bit dashboard pixel-art pnpm react react19 retro shadcn-ui tailwindcss typescript ui-components vite
Last synced: 16 days ago
JSON representation
A retro pixel-art dashboard built with React 19, Vite 7, and 8bitcn/ui - featuring character profiles, health bars, level-up mechanics, and nostalgic 8-bit aesthetics.
- Host: GitHub
- URL: https://github.com/toxicbishop/8-bit-ui
- Owner: toxicbishop
- License: mit
- Created: 2026-02-21T10:05:20.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2026-05-31T05:19:54.000Z (16 days ago)
- Last Synced: 2026-05-31T06:20:21.682Z (16 days ago)
- Topics: 8bit, dashboard, pixel-art, pnpm, react, react19, retro, shadcn-ui, tailwindcss, typescript, ui-components, vite
- Language: TypeScript
- Homepage: https://toxicbishop.github.io/8-Bit-UI/
- Size: 477 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 8-Bit UI
A retro-themed dashboard built with **React**, **Vite**, and **[8bitcn/ui](https://8bitcn.com)** — a pixel-art component library on top of shadcn/ui and Tailwind CSS.
[](./LICENSE)
## ✨ Tech Stack
| Tool | Purpose |
|---|---|
| [React 19](https://react.dev) | UI framework |
| [Vite 7](https://vite.dev) | Build tool & dev server |
| [8bitcn/ui](https://8bitcn.com) | Pixel-art 8-bit components |
| [shadcn/ui](https://ui.shadcn.com) | Base component primitives |
| [Tailwind CSS 3](https://tailwindcss.com) | Utility-first styling |
| [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) | Retro pixel font |
| TypeScript | Type safety |
## 🚀 Getting Started
```bash
# Install dependencies
pnpm install
# Start dev server
pnpm dev
```
Open [http://localhost:5173](http://localhost:5173) to view the app.
## 📁 Project Structure
```
src/
├── main.tsx # App entry point
├── index.css # Tailwind directives + shadcn CSS variables
├── App.tsx # Main dashboard page
│
├── lib/
│ └── utils.ts # cn() utility (clsx + tailwind-merge)
│
├── types/
│ └── index.ts # Shared TypeScript types
│
└── components/
└── ui/
├── base/ # shadcn base primitives
│ ├── badge.tsx + badge-variants.ts
│ ├── button.tsx + button-variants.ts
│ ├── card.tsx
│ ├── input.tsx
│ └── label.tsx
│
└── 8bit/ # 8bitcn/ui pixel-art components
├── badge.tsx + badge-variants.ts
├── button.tsx + button-variants.ts
├── card.tsx + card-variants.ts
├── input.tsx + input-variants.ts
└── styles/
└── retro.css # Press Start 2P font import
```
## 🧩 Adding New 8-bit Components
Use the shadcn CLI with the 8bitcn registry:
```bash
# Add a specific component (e.g. progress bar)
npx shadcn@latest add https://8bitcn.com/r/progress.json
```
Browse all available components at [8bitcn.com/docs/components](https://8bitcn.com/docs/components).
## 🎨 Demo Features
The included dashboard (`App.tsx`) demonstrates:
- **Character Profile Card** — avatar, health bar, experience bar
- **HEAL button** — increases health by 10 each click
- **LEVEL UP button** — increments the level badge
- **Name input** — updates the DiceBear pixel avatar in real-time
- **Navigation bar** with animated "NEW DLC" badge
- **Limited Event** call-to-action panel
## 📜 License
This project is licensed under the **MIT LICENCE** — see the [LICENSE](./LICENSE) file for details.