Frontend
Plugin
8bitcn-ui
Accessible retro components that you can copy and paste into your apps.Free. Open Source. Built on shadcn/ui. Documentation · Components · Blocks · Themes · Discord
Plugin Signal81/100Strong
maintained99
capable69
documented75
adopted70
Install
$ npx -y skills add theorcdev/8bitcn-ui --agent claude-code
Stats
2,042
Stars
116
Forks
Active
Maintenance
TypeScript
Language
MIT
License
3d ago
Last commit
1y ago
Created
Repo: theorcdev/8bitcn-ui
In this plugin
- 8-bit-pixel-art-patterns
- 8bit-docs-patterns
- animation-performance-retro
- bundle-barrel-imports
- bundle-dynamic-imports
- component-wrapper-architecture
- fumadocs-component-docs
- fumadocs-mdx-structure
- fumadocs-registry-integration
- gaming-ui-state-management
- js-early-exit
- js-hoist-regexp
- js-set-map-lookups
- js-tosorted-immutable
- registry-component-patterns
- rendering-animate-svg
- rendering-conditional-render
- rendering-hoist-jsx
- rerender-functional-setstate
- rerender-lazy-state
- rerender-memo
- retro-css-architecture
- shadcn-ui-conventions
What's inside
Skill(23 skills)
/8-bit-pixel-art-patternsCreate pixelated borders, shadows, and effects for 8-bit retro components. Apply when building 8-bit styled UI components that need authentic pixel art aesthetics./8bit-docs-patternsCreate documentation with gaming-specific examples, retro styling, and 8-bit terminology. Apply when documenting gaming blocks, RPG components, or retro-styled UI elements./animation-performance-retroOptimize 8-bit animations for smooth performance. Apply when creating animated pixel art, game UI effects, or any retro-styled animations.
- /bundle-barrel-imports
- /bundle-dynamic-imports
- /component-wrapper-architecture
- /fumadocs-component-docs
- /fumadocs-mdx-structure
- /fumadocs-registry-integration
- /gaming-ui-state-management
- /js-early-exit
- /js-hoist-regexp
- /js-set-map-lookups
- /js-tosorted-immutable
- /registry-component-patterns
- /rendering-animate-svg
- /rendering-conditional-render
- /rendering-hoist-jsx
- /rerender-functional-setstate
- /rerender-lazy-state
- /rerender-memo
- /retro-css-architecture
- /shadcn-ui-conventions
README
8bitcn/ui
Contributing
Please read the contributing guide.
Usage Example
To add the button component to your project, run the following command:
pnpm dlx shadcn@latest add @8bitcn/button
Once installed, you can import and use the component in your files:
import { Button } from "@/components/ui/8bit";
export default function App() {
return <Button>Click me</Button>;
}
Note: The import path @/components/ui/8bit assumes your project has a path alias configured (common in Next.js and similar frameworks). Adjust the path to match your project's structure if needed.
License
Licensed under the MIT license.
Open Source Program
Star History
File tree
FAQ
8bitcn-ui is a Claude Code plugin with 23 hand-picked skills for frontend work, indexed on Flowy. Install it with the command on its page. It includes 8-bit-pixel-art-patterns, 8bit-docs-patterns, animation-performance-retro. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is 8bitcn-ui?
- Accessible retro components that you can copy and paste into your apps.Free. Open Source. Built on shadcn/ui. Documentation · Components · Blocks · Themes · Discord
- How do I install 8bitcn-ui?
- Run these in Claude Code: npx -y skills add theorcdev/8bitcn-ui --agent claude-code. Then prompt normally.
- Does 8bitcn-ui auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is 8bitcn-ui free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it