Design · A design system your AI builder follows on every screen. · a tool
The open-source project 8bitcn-ui, by TheOrcDev
“A set of retro-designed, accessible components and a code distribution platform. Open Source. Open Code.” — the project's own words, on GitHub
Paste this into the AI that runs on your computer. It does the install, checks it works, and tells you what to type first. If anything fails, paste the error back to it.
Install 8bitcn-ui (https://github.com/TheOrcDev/8bitcn-ui) on this computer and get it working for me. I am not a developer; explain each step in one line as you go and never skip one. You are Claude Code, running on my machine.
1. Check what this machine already has (git, Python or Node as the project needs, Docker if the README says so). Tell me anything missing and install it, asking me before anything that needs my password.
2. Run `pnpm dlx shadcn@latest add @8bitcn/button` inside an existing shadcn/ui project — it registers the 8bitcn registry in components.json and installs the first component; nothing is cloned.
3. Configure it. If it needs an API key or a login, stop and ask me for it; never guess one and never store it anywhere except where the README says.
Tool-specific notes: This installs into an existing project, not on its own: check the project already has shadcn/ui set up (a components.json in the project root); 8bitcn is a registry for shadcn/ui and has nothing to install into otherwise, so set shadcn/ui up first if it is missing.
The first add command, pnpm dlx shadcn@latest add @8bitcn/button, registers the 8bitcn registry in components.json and puts the component in components/ui/8bit; add further pieces the same way by name.
Smoke test from the README: import { Button } from "@/components/ui/8bit" on any page and render <Button>Click me</Button>; a pixel-bordered button should appear.
The thing that usually goes wrong is the import path: the docs assume a @/ path alias, so if the project has none, point the import at the real folder.
If I want to add pieces by asking in plain language rather than typing commands, run pnpm dlx shadcn@latest mcp init so my AI tool has the whole 8bitcn catalogue in context; the docs mark this step optional.
4. Run the smallest test the README gives, and show me the output.
5. When it works, tell me what to type first, in one line, for this job: Add one button.
If anything fails, show me the exact error and fix it before going on.Install 8bitcn-ui (https://github.com/TheOrcDev/8bitcn-ui) on this computer and get it working for me. I am not a developer; explain each step in one line as you go and never skip one. You are Kimi, running on my machine.
1. Check what this machine already has (git, Python or Node as the project needs, Docker if the README says so). Tell me anything missing and install it, asking me before anything that needs my password.
2. Run `pnpm dlx shadcn@latest add @8bitcn/button` inside an existing shadcn/ui project — it registers the 8bitcn registry in components.json and installs the first component; nothing is cloned.
3. Configure it. If it needs an API key or a login, stop and ask me for it; never guess one and never store it anywhere except where the README says.
Tool-specific notes: This installs into an existing project, not on its own: check the project already has shadcn/ui set up (a components.json in the project root); 8bitcn is a registry for shadcn/ui and has nothing to install into otherwise, so set shadcn/ui up first if it is missing.
The first add command, pnpm dlx shadcn@latest add @8bitcn/button, registers the 8bitcn registry in components.json and puts the component in components/ui/8bit; add further pieces the same way by name.
Smoke test from the README: import { Button } from "@/components/ui/8bit" on any page and render <Button>Click me</Button>; a pixel-bordered button should appear.
The thing that usually goes wrong is the import path: the docs assume a @/ path alias, so if the project has none, point the import at the real folder.
If I want to add pieces by asking in plain language rather than typing commands, run pnpm dlx shadcn@latest mcp init so my AI tool has the whole 8bitcn catalogue in context; the docs mark this step optional.
4. Run the smallest test the README gives, and show me the output.
5. When it works, tell me what to type first, in one line, for this job: Add one button.
If anything fails, show me the exact error and fix it before going on.Install 8bitcn-ui (https://github.com/TheOrcDev/8bitcn-ui) on this computer and get it working for me. I am not a developer; explain each step in one line as you go and never skip one. You are Gemini CLI, running on my machine.
1. Check what this machine already has (git, Python or Node as the project needs, Docker if the README says so). Tell me anything missing and install it, asking me before anything that needs my password.
2. Run `pnpm dlx shadcn@latest add @8bitcn/button` inside an existing shadcn/ui project — it registers the 8bitcn registry in components.json and installs the first component; nothing is cloned.
3. Configure it. If it needs an API key or a login, stop and ask me for it; never guess one and never store it anywhere except where the README says.
Tool-specific notes: This installs into an existing project, not on its own: check the project already has shadcn/ui set up (a components.json in the project root); 8bitcn is a registry for shadcn/ui and has nothing to install into otherwise, so set shadcn/ui up first if it is missing.
The first add command, pnpm dlx shadcn@latest add @8bitcn/button, registers the 8bitcn registry in components.json and puts the component in components/ui/8bit; add further pieces the same way by name.
Smoke test from the README: import { Button } from "@/components/ui/8bit" on any page and render <Button>Click me</Button>; a pixel-bordered button should appear.
The thing that usually goes wrong is the import path: the docs assume a @/ path alias, so if the project has none, point the import at the real folder.
If I want to add pieces by asking in plain language rather than typing commands, run pnpm dlx shadcn@latest mcp init so my AI tool has the whole 8bitcn catalogue in context; the docs mark this step optional.
4. Run the smallest test the README gives, and show me the output.
5. When it works, tell me what to type first, in one line, for this job: Add one button.
If anything fails, show me the exact error and fix it before going on.Install 8bitcn-ui (https://github.com/TheOrcDev/8bitcn-ui) on this computer and get it working for me. I am not a developer; explain each step in one line as you go and never skip one. You are Codex, running on my machine.
1. Check what this machine already has (git, Python or Node as the project needs, Docker if the README says so). Tell me anything missing and install it, asking me before anything that needs my password.
2. Run `pnpm dlx shadcn@latest add @8bitcn/button` inside an existing shadcn/ui project — it registers the 8bitcn registry in components.json and installs the first component; nothing is cloned.
3. Configure it. If it needs an API key or a login, stop and ask me for it; never guess one and never store it anywhere except where the README says.
Tool-specific notes: This installs into an existing project, not on its own: check the project already has shadcn/ui set up (a components.json in the project root); 8bitcn is a registry for shadcn/ui and has nothing to install into otherwise, so set shadcn/ui up first if it is missing.
The first add command, pnpm dlx shadcn@latest add @8bitcn/button, registers the 8bitcn registry in components.json and puts the component in components/ui/8bit; add further pieces the same way by name.
Smoke test from the README: import { Button } from "@/components/ui/8bit" on any page and render <Button>Click me</Button>; a pixel-bordered button should appear.
The thing that usually goes wrong is the import path: the docs assume a @/ path alias, so if the project has none, point the import at the real folder.
If I want to add pieces by asking in plain language rather than typing commands, run pnpm dlx shadcn@latest mcp init so my AI tool has the whole 8bitcn catalogue in context; the docs mark this step optional.
4. Run the smallest test the README gives, and show me the output.
5. When it works, tell me what to type first, in one line, for this job: Add one button.
If anything fails, show me the exact error and fix it before going on.Run the add command for the button, put it on a screen you already have, and check the pixel border and typeface sit properly next to your existing components before adding anything else.
Ask your AI to remake a single page, say your sign-in form, from the ready-made 8bitcn blocks, then put it beside the old version to decide whether the look suits your product before it spreads further.
Tab through the new screen with the keyboard and try it with a screen reader on; the pieces inherit their accessibility from the library underneath, so if something is broken it is usually a changed import path or a missing piece, not the design.
TheOrcDev/8bitcn-ui on GitHub, under the MIT licence. 2,024 stars, checked 11 September 2026. Last change 8 August 2026. We did not write it; we checked it, and wrote this page so you can use it.
EvilCharts gives your AI a set of ready-made charts that look designed rather than default, for the site or dashboard it is already building you.
m3e-canvas gives you a place to sketch out what your product's screens should look like before your AI starts writing code.
shadcn/ui gives your AI a real component library to build your product's interface from, instead of inventing buttons and forms from scratch every time.
If you're launching or growing a brand across Asia and the West, a call is where we work out whether it's a fit.