logo

8bitcn/ui

DocsComponentsBlocksThemesSponsors
Sections
  • Get Started
  • Components
  • Blocks
Advanced
  • Demo Shell
  • Metrics Dashboard
  • Newsletter
Authentication Blocks
  • Login Form with Icons
  • Login Form with Image
  • Login Form
  • Login Page
Calendar Blocks
  • Calendar Block
  • Range Calendar
  • Single Date Calendar
Chart Blocks
  • Step Area Chart
  • Multiple Bar Chart
  • Bar Chart
CTA
  • Comparison
  • Use Cases
Dashboard Blocks
  • Dashboard
FAQ
  • Accordion
  • Card Grid
  • Searchable
Features
  • Card Grid
  • List
  • Carousel
Game
  • Boss Fight CTA
  • Checkpoint FAQ
  • Skill Tree
  • Health Bar Hero
  • XP Milestone Hero
  • Quest Roadmap
  • Party Grid
Gaming Blocks
  • Audio Settings
  • Chapter Intro
  • Character Sheet
  • Dialogue
  • Difficulty Select
  • Friend List
  • Game Over
  • Game Progress
  • Leaderboard
  • Loading Screen
  • Main Menu
  • Pause Menu
  • Player Profile Card
  • Quest Log
  • Save Slots
  • Victory Screen
Hero
  • Centered
  • Split
  • Game Title
Layout
  • Footer
  • 404 Page
  • 404 Dwarf
Pricing
  • Tier Cards
  • Monthly Toggle
Social Proof
  • Stats Bar
  • Testimonials
  • Review Carousel
Team
  • Team Grid
  • Changelog
  • Case Studies
Timeline
  • Vertical
  • Horizontal
  • Zigzag Roadmap

Centered

PreviousNext

A centered retro hero section with headline, badges, and CTA buttons.

HeroSplit

On This Page

InstallationUsageProps
SponsorsSponsored by
Shadcn Blocks

Shadcn Blocks

The ultimate block set for Shadcn

Shadcn Studio

Shadcn Studio

Shadcn blocks & templates

Shadcn UI Kit

Shadcn UI Kit

Admin dashboards, blocks, components & examples

Built by OrcDev and Contributors. The source code is available on GitHub.

Hero 1 — Centered

Open in v0
Open Source

BUILD YOUR RETRO EMPIRE

The 8-bit component library for modern builders

Ship pixel-perfect landing pages, dashboards, and gaming UIs with components that look straight out of the golden age.

Installation


pnpm dlx shadcn@latest add @8bitcn/hero1

Usage


Props

PropTypeDefaultDescription
titlestringrequiredMain headline
subtitlestring—Smaller text below title
descriptionstring—Body text
badgesHeroBadge[][]Badge pills above the title
actionsHeroAction[][]CTA buttons
childrenReactNode—Extra content below actions
classNamestring—Additional classes