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

Split

PreviousNext

A split-layout retro hero with text on the left and a visual slot on the right.

CenteredGame Title

On This Page

InstallationUsageWith custom visualProps
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 2 — Split

Open in v0
Open Source
React

SHIP FASTER

Retro components for the modern web

Drop-in 8-bit styled components that work with your existing stack. No config, no headaches.

Hero 2

Installation


pnpm dlx shadcn@latest add @8bitcn/hero2

Usage


With custom visual

Props

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