DOCSEARCHbyAlgolia
Submit Docs

8bitcn-ui

repository·main·Indexed 23 days ago

https://github.com/theorcdev/8bitcn-ui

A collection of accessible, retro-styled UI components built on top of shadcn/ui. It provides high-quality, themed components—including a PlayerProfileCard, ThemeSelector, and various advanced blocks like a terminal shell (Advanced1), metrics dashboard (Advanced2), and authentication forms—designed to be added to projects via the shadcn CLI.

Tokens
54.8K
Snippets
289
Records
379
Agent score
83%

What's inside 8bitcn-ui

  1. Explore Authentication Blocks

    main

    The 8bitcn-ui library provides a collection of Authentication Blocks designed with retro aesthetics. These blocks are suitable for building login pages, signup forms, and user authentication interfaces.

    Available authentication components include:

    • Login Form: A simple login form utilizing email and password fields.
    • Login Page: A two-column layout featuring a cover image.
    • Login Form with Icons: A login form that includes social login icons.
    • Login Form with Image: A compact login layout with a side image.

  2. Explore Gaming Blocks

    main

    The 8bitcn-ui library provides a collection of gaming-focused blocks designed to build immersive retro game interfaces, classic game UIs, RPG elements, and arcade-style interfaces.

    Available gaming blocks include:

    • Navigation & Menus: Main Menu, Difficulty Select, Pause Menu, Save Slots.
    • Game State & Feedback: Chapter Intro, Loading Screen, Game Over, Victory Screen, Game Progress (health/mana bars).
    • RPG Elements: Dialogue (with avatars), Character Sheet (stats and equipment), Quest Log, Player Profile Card.
    • Social & Competitive: Leaderboard, Friend List.
    • Settings: Audio Settings.

    Note: Some blocks like 404 Crate Pusher and 404 Brick Breaker are categorized under layout but serve as interactive 404 error page replacements.

  3. Use Chart Blocks for retro-styled data visualization

    main

    The 8bitcn-ui library provides a suite of Chart Blocks designed for dashboards, analytics pages, and data presentation. These components feature a consistent retro aesthetic.

    Available chart types include:

    • Bar Chart: A simple bar chart visualization.
    • Multiple Bar Chart: A grouped bar chart for comparing multiple data sets.
    • Step Area Chart: A stepped area chart used for visualizing trends.

  4. Explore 8-bit styled block templates

    main

    The 8bitcn-ui library provides a collection of pre-built, ready-to-use block templates designed with a retro 8-bit aesthetic. These blocks are intended to be copied directly into your project to build landing pages, dashboards, or other retro-themed web interfaces.

    Available block categories include:

    • Hero: Landing page headers (e.g., Centered, Split, Game Title).
    • Features: Product showcases (e.g., Card Grid, List, Carousel).
    • Pricing: Plan and tier displays (e.g., Tier Cards, Monthly Toggle).
    • FAQ: Question and answer sections (e.g., Accordion, Card Grid, Searchable).
    • Social Proof: Trust indicators (e.g., Stats Bar, Testimonials, Review Carousel).
    • Timeline: Roadmaps and progress flows (e.g., Vertical, Horizontal, Zigzag Roadmap).
    • CTA: Call-to-action sections (e.g., Comparison tables, Use Cases).
    • Team: People and updates (e.g., Team Grid, Changelog, Case Studies).
    • Advanced: Interactive elements (e.g., Demo Shell/Terminal, Metrics Dashboard, Newsletter).
    • Layout: Structural components (e.g., Footer, custom 404 pages).

  5. Use Calendar Blocks for date selection and scheduling

    main

    The 8bitcn-ui library provides several Calendar Blocks designed for pixel-perfect date selection and scheduling interfaces. These blocks are suitable for building date pickers, booking systems, and scheduling UIs.

    Available calendar block types include:

    • Simple Calendar: A basic date selection calendar.
    • Range Calendar: A calendar designed for date range selection, typically displaying two months side-by-side.
    • Single Date Calendar: A calendar for selecting a single date that includes dropdown navigation for months/years.

  6. Explore 8-bit styled components

    main

    The 8bitcn-ui library provides a complete collection of 8-bit styled React components. These components are designed to be fully customizable and follow modern React patterns while maintaining a retro aesthetic.

    Available component categories include:

    Layout & Containers

    • Accordion: Expandable content sections.
    • Card: Content containers with headers.
    • Drawer: Slide-out panel containers.
    • Resizable: Resizable panel layouts.
    • Scroll Area: Custom scrollable regions.
    • Sheet: Side panel overlays.
    • Sidebar: Collapsible side navigation.
    • Tabs: Tabbed content sections.

    Form Controls

    • Button: Clickable buttons with pixel borders.
    • Checkbox: Pixel-perfect checkboxes.
    • Combo Box: Searchable select inputs.
    • Input / Textarea: Text input fields with retro styling.
    • Label: Accessible form labels.
    • Radio Group: Single-select option groups.
    • Select: Dropdown selection menus.
    • Slider: Range sliders for value selection.
    • Switch: Toggle switches with animations.
    • Toggle / Toggle Group: Two-state buttons and groups.

    Data Display & Feedback

    • Alert / Alert Dialog: Contextual feedback and modal confirmations.
    • Avatar: User profile images.
    • Badge: Status indicators and labels.
    • Chart: Data visualization charts.
    • Progress / Spinner: Progress bars and loading indicators.
    • Table: Data tables with sorting.
    • Toast: Brief notification messages.
    • Tooltip: Hover information popups.

    Navigation & Overlays

    • Breadcrumb: Navigation path indicators.
    • Dropdown Menu / Context Menu: Contextual and right-click menus.
    • Menubar: Horizontal menu bars.
    • Navigation Menu: Main site navigation.
    • Pagination: Page navigation controls.
    • Popover: Floating content containers.

    Specialized Gaming/Retro UI

    • Enemy Health Display: Boss and enemy health UI.
    • Health Bar: Player health indicators.
    • Mana Bar: Magic/resource bars.
    • Item: Inventory item slots.
    • Retro Mode Switcher: Toggle retro visual effects.
    • Theme Selector: Switch between retro themes.

  7. Configure ToggleGroup variants and modes

    main

    The ToggleGroup component supports several configuration options to change its visual style and behavior:

    • type: Determines selection mode. Use "multiple" to allow selecting several items, or "single" to allow only one selection at a time.
    • variant: Controls the visual style. Setting variant="outline" applies an outlined style to the items.
    • disabled: A boolean prop that, when present, disables the entire toggle group and its items.

  9. Choose a PlayerProfileCard variant

    main

    The variant prop controls the layout density and information depth:

    • default: Standard size with full bio display and all stat bars visible. Best for detailed player profiles.
    • compact: Smaller avatar, reduced spacing, and condensed bio. Ideal for lists or sidebars.
    • detailed: Includes an additional information section showing class and guild information. Perfect for comprehensive player views.

  11. Use the Tooltip component

    main

    The Tooltip component is composed of several parts that must be wrapped in a TooltipProvider.

    • TooltipProvider: The root context provider that manages tooltip state.
    • Tooltip: The main controller for an individual tooltip instance. It accepts a delayDuration prop (in milliseconds) to control how long the user must hover before the tooltip appears.
    • TooltipTrigger: The element that triggers the tooltip visibility (usually on hover).
    • TooltipContent: The actual 8-bit styled content that appears when the trigger is activated.

    Note: Ensure you import the components from your local UI directory (e.g., @/components/ui/8bit/tooltip).

    import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/8bit/tooltip"
import { Button } from "@/components/ui/8bit/button";

function TooltipDemo() {
  return (
    <TooltipProvider>
      <Tooltip delayDuration={500}>
        <TooltipTrigger>
          <Button variant="outline">Hover</Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Add to library</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}