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
1,991
Stars
117
Forks
Active
Maintenance
TypeScript
Language
MIT
License
10d 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-importsImport directly from source files instead of barrel files. Apply when using libraries like lucide-react, @mui/material, or @radix-ui/react-* to reduce bundle size and improve dev boot time./bundle-dynamic-importsUse next/dynamic for lazy-loading heavy components. Apply when importing large components like editors, charts, or rich text editors that aren't needed on initial render./component-wrapper-architectureBest practices for wrapping shadcn/ui components. Apply when creating 8-bit styled variants of existing shadcn/ui components.
- /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
theorcdev/8bitcn-uiView on GitHub
.claude/
skills/
8-bit-pixel-art-patterns/
SKILL.md
8bit-docs-patterns/
SKILL.md
animation-performance-retro/
SKILL.md
bundle-barrel-imports/
SKILL.md
bundle-dynamic-imports/
SKILL.md
component-wrapper-architecture/
SKILL.md
fumadocs-component-docs/
SKILL.md
fumadocs-mdx-structure/
SKILL.md
fumadocs-registry-integration/
SKILL.md
gaming-ui-state-management/
SKILL.md
js-early-exit/
SKILL.md
js-hoist-regexp/
SKILL.md
js-set-map-lookups/
SKILL.md
js-tosorted-immutable/
SKILL.md
registry-component-patterns/
SKILL.md
rendering-animate-svg/
SKILL.md
rendering-conditional-render/
SKILL.md
rendering-hoist-jsx/
SKILL.md
rerender-functional-setstate/
SKILL.md
rerender-lazy-state/
SKILL.md
rerender-memo/
SKILL.md
retro-css-architecture/
SKILL.md
shadcn-ui-conventions/
SKILL.md
.cursor/
commands/
rmslop.md
spellcheck.md
hooks.json
mcp.json
rules/
ultracite.mdc
.github/
CODEOWNERS
FUNDING.yml
.gitignore
.husky/
pre-commit
.opencode/
command/
rmslop.md
spellcheck.md
.vscode/
settings.json
AGENTS.md
app/
about/
page.tsx
api/
github-stars/
route.test.ts
route.ts
search/
route.ts
webhook/
creem/
route.ts
blocks/
layout.tsx
not-found-brick-breaker/
page.tsx
not-found-crate-pusher/
page.tsx
page.tsx
character-sheet/
page.tsx
checkout/
route.ts
contributors/
page.tsx
dashboard/
data.json
page.tsx
docs/
[[...slug]]/
page.tsx
layout.tsx
error.tsx
favicon.ico
globals.css
layout.tsx
login/
login-with-image/
page.tsx
page.tsx
not-found.tsx
og/
route.tsx
page.tsx
profile-creator/
page.tsx
r/
[component]/
route.ts
registry.json/
route.ts
retro-globals.css
robots.ts
sitemap.ts
sponsors/
page.tsx
submit-project/
page.tsx
themes/
page.tsx
v2/
page.tsx
artifacts/
homepage-cold-path-benchmark.md
nextjs-16-3-benchmark.md
nextjs-16-3-performance.png
biome.jsonc
components/
components.json
active-theme.tsx
app-sidebar.tsx
blocks-navigation.tsx
blocks-sidebar.tsx
chart-area-interactive.tsx
code-snippet.tsx
component-preview.tsx
conditional-sidebar.tsx
copy-command-button.tsx
copy-profile-card-dialog.tsx
dashboard-header.tsx
data-table.tsx
docs-copy-page.tsx
docs-sidebar.test.tsx
docs-sidebar.tsx
docs-toc.tsx
examples/
calendar.tsx
calendars/
calendar-13.tsx
combobox.tsx
command.tsx
component-showcase/
component-showcase.tsx
column-one.tsx
feature-column.tsx
interactive-column.tsx
date-picker-with-presets.tsx
date-picker.tsx
date-range-picker.tsx
drawer.tsx
home-component-showcase-skeleton.tsx
home-component-showcase.test.tsx
home-component-showcase.tsx
navigation-menu.tsx
quest-log.tsx
range-calendar.tsx
save-slots.tsx
sidebar.tsx
theme-selector-showcase.tsx
theme-selector.tsx
toast.tsx
forms/
submit-project-form.tsx
github-stars.test.tsx
github-stars.tsx
home-sponsors.test.tsx
home-sponsors.tsx
hooks/
use-copy-to-clipboard.ts
installation-commands.tsx
mobile-nav.tsx
mode-switcher.tsx
mode-url-sync.tsx
mythic-sponsor.tsx
nav-documents.tsx
nav-main.tsx
nav-secondary.tsx
nav-user.tsx
open-in-v0-button.tsx
profile-card.tsx
profile-creator.tsx
profile-cropper.tsx
screen-size.tsx
search-documentation.tsx
search-form.tsx
search.tsx
section-cards.tsx
select-theme-dropdown.tsx
sidebar-item.tsx
site-footer.tsx
site-header.tsx
sponsor-claim.tsx
sponsors/
sponsors.tsx
lazy-mythic-sponsor.tsx
lazy-sponsor-claim.tsx
lazy-sponsor-integrations.test.tsx
submit-success-card.tsx
theme-grid.tsx
theme-provider.tsx
theme-selector.md
theme-selector.tsx
ui/
8bit/
accordion.tsx
alert-dialog.tsx
alert.tsx
avatar.tsx
badge.tsx
blocks/
advanced1.tsx
advanced2.tsx
advanced3.tsx
audio-settings.tsx
chapter-intro.tsx
character-sheet.tsx
chart-area-step.tsx
chart-bar.tsx
chart.tsx
cta1.tsx
cta2.tsx
dialogue.tsx
difficulty-select.tsx
duel-block.tsx
faq1.tsx
faq2.tsx
faq3.tsx
feature1.tsx
feature2.tsx
feature3.tsx
footer1.tsx
friend-list.tsx
game-cta1.tsx
game-faq1.tsx
game-features1.tsx
game-hero1.tsx
game-hero2.tsx
game-over.tsx
game-progress.tsx
game-roadmap1.tsx
game-team1.tsx
hero1.tsx
hero2.tsx
hero3.tsx
leaderboard.tsx
loading-screen.tsx
login-form-2.tsx
login-form-with-image.tsx
login-form.tsx
main-menu.tsx
not-found-brick-breaker.test.tsx
not-found-brick-breaker.tsx
not-found-crate-pusher.test.tsx
not-found-crate-pusher.tsx
not-found1.tsx
not-found2.tsx
not-found3.tsx
pause-menu.tsx
player-profile-card.tsx
portal-transition.tsx
pricing1.tsx
pricing2.tsx
quest-log.tsx
README-player-profile-card.md
save-slots.tsx
sidebar.tsx
social-proof1.tsx
social-proof2.tsx
social-proof3.tsx
team1.tsx
team2.tsx
team3.tsx
timeline1.tsx
timeline2.tsx
timeline3.tsx
victory-screen.tsx
breadcrumb.tsx
button-group.tsx
button.tsx
calendar.tsx
card.tsx
carousel.tsx
chart.tsx
checkbox.tsx
collapsible.tsx
command.tsx
context-menu.tsx
dialog.tsx
drawer.tsx
dropdown-menu.tsx
empty.tsx
enemy-health-display.tsx
health-bar.tsx
hover-card.tsx
icons.tsx
input-otp.tsx
input.tsx
item.tsx
kbd.tsx
label.tsx
mana-bar.tsx
menubar.tsx
navigation-menu.tsx
pagination.tsx
popover.tsx
progress.tsx
radio-group.tsx
resizable.tsx
scroll-area.tsx
select.tsx
separator.tsx
sheet.tsx
skeleton.tsx
slider.tsx
spinner.tsx
styles/
retro.css
switch.tsx
table.tsx
tabs.tsx
textarea.tsx
toast.tsx
toggle-group.tsx
toggle.tsx
tooltip.tsx
xp-bar.tsx
accordion.tsx
alert-dialog.tsx
alert.tsx
aspect-ratio.tsx
avatar.tsx
badge.tsx
breadcrumb.tsx
button-group.tsx
button.tsx
calendar.tsx
card.tsx
chart.tsx
checkbox.tsx
collapsible.tsx
command.tsx
cropper.tsx
dialog.tsx
drawer.tsx
dropdown-menu.tsx
field.tsx
hover-card.tsx
input-group.tsx
input-otp.tsx
input.tsx
label.tsx
navigation-menu.tsx
pagination.tsx
popover.tsx
radio-group.tsx
retro-mode-switcher.tsx
scroll-area.tsx
select.tsx
separator.tsx
sheet.tsx
sidebar.tsx
skeleton.tsx
sonner.tsx
switch.tsx
table.tsx
tabs.tsx
textarea.tsx
toggle-group.tsx
toggle.tsx
tooltip.tsx
version-switcher.tsx
config/
nav-items.ts
content/
docs/
blocks/
advanced/
advanced1.mdx
advanced2.mdx
advanced3.mdx
index.mdx
... 330 moreFAQ
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.