8bitcn/ui

Build retro interfaces with open-source pixel-style components and blocks

Meet 8bitcn/ui

8bitcn/ui is an open-source interface library for developers who want a retro, pixel-style appearance. Its collection includes individual components and larger blocks that can be copied into a project. The examples cover buttons, menus, forms, calendars, status displays, notifications, and dashboard cards, with themes that keep the visual treatment consistent.

The library’s interactive showcase lets users explore components before opening the documentation or source code. Game-inspired examples demonstrate health bars, character panels, and quest-style dialogs, alongside controls suitable for ordinary applications. It is useful for building playful websites, game companion interfaces, or prototypes without designing every pixel-styled element from scratch.

Discussion

Tried it? Share a useful thought or ask a question.

Product details

Website: 8bitcn.com
Status: Launched
Category: Developer tools
Listed: Oct 17, 2026

Explore related topics

Component libraries Open source Pixel art UI components UI design

Embed upvote button

Let visitors support 8bitcn/ui from your website.

Button appearanceLightDark

8bitcn/ui

Upvote

Paste into your site’s HTML

<div data-betaneon-widget="light" style="box-sizing:border-box;display:flex;align-items:center;gap:12px;width:320px;max-width:100%;min-height:84px;padding:12px 14px;margin:0;border:1px solid #e1e0dc;border-radius:12px;background:#ffffff;color:#181818;font:400 14px/1.4 Arial,Helvetica,sans-serif;text-align:left;">
  <img src="https://m.betaneon.com/ic/b2ed0e22-d3b2-4e6f-8641-0bd54a61c23f.webp" alt="" width="36" height="36" referrerpolicy="no-referrer" style="box-sizing:border-box;display:block;flex:0 0 36px;width:36px;height:36px;margin:0;padding:0;border:0;border-radius:9px;object-fit:contain;background:#fff;">
  <div style="box-sizing:border-box;flex:1;min-width:0;margin:0;padding:0;">
    <span title="8bitcn/ui" style="display:block;margin:0;padding:0;color:#181818;font:700 16px/1.4 Arial,Helvetica,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">8bitcn/ui</span>
    <div style="display:flex;align-items:baseline;gap:4px;margin:4px 0 0;padding:0;white-space:nowrap;">
      <span style="margin:0;padding:0;transform:translateY(-1.5px);color:#626664;font:400 14px/1.2 Arial,Helvetica,sans-serif;">on</span>
      <a href="https://betaneon.com/" target="_blank" rel="noopener noreferrer" aria-label="BetaNeon home (opens a new tab)" style="display:inline-flex;flex-shrink:0;margin:0;padding:0;border:0;background:transparent;text-decoration:none;outline-offset:3px;"><img src="https://betaneon.com/res/brand/wordmark.svg?v=453516e27973dc87" alt="BetaNeon" width="87" height="16" referrerpolicy="no-referrer" style="display:block;width:87px;height:auto;margin:0;padding:0;border:0;"></a>
    </div>
  </div>
  <a href="https://betaneon.com/vote/8bitcn" target="_blank" rel="noopener noreferrer" aria-label="Upvote 8bitcn/ui on BetaNeon (opens a new tab)" style="box-sizing:border-box;display:flex;flex:0 0 68px;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;margin:0;padding:0 0 0 12px;border:0;border-left:1px solid #e1e0dc;background:transparent;color:#087f5b;font:400 14px/1.2 Arial,Helvetica,sans-serif;text-decoration:none;text-align:center;outline-offset:3px;">
    <span aria-hidden="true" style="box-sizing:border-box;display:block;width:9px;height:9px;margin:3px 0 0;padding:0;border:0;border-top:2px solid #087f5b;border-left:2px solid #087f5b;transform:rotate(45deg);"></span>
    <img src="https://betaneon.com/embed/upvote/8bitcn/count.svg?theme=light" alt="Votes" width="56" height="20" referrerpolicy="no-referrer" style="display:block;width:56px;height:20px;margin:0;padding:0;border:0;">
    <span style="color:#087f5b;font:400 14px/1.2 Arial,Helvetica,sans-serif;">Upvote</span>
  </a>
</div>

Links open in a new tab. Visitors sign in on BetaNeon, then confirm their upvote. The vote count updates when the page loads.

Unclaimed

Building 8bitcn/ui?

Claim this profile to keep your product’s story up to date.

Sign in with your verified work email. Matching website domains are approved automatically; other requests are reviewed by our team.

Meet 8bitcn/ui

Discussion

Product details

Explore related topics

Similar products

slash-editor

Vue.js

Persona

AUDR

Tiptap

Files SDK