Hero Section

Layout

Pixel-perfect hero sections with multiple variants and layouts for landing pages.

Import

import { 
  PixelHero, 
  PixelHeroContent, 
  PixelHeroTitle, 
  PixelHeroSubtitle, 
  PixelHeroDescription, 
  PixelHeroActions, 
  PixelHeroBadge,
  PixelHeroImage,
  PixelHeroGrid,
  PixelHeroFeature,
  PixelHeroPattern
} from "@/components/ui/pixel/pixel-hero"

Usage

🎮 New Release

Pixel UI

8-Bit Retro Components

Build nostalgic web experiences with pixel-perfect components

Component Source

Copy and paste the following code into your project at /src/components/ui/pixel/pixel-hero.tsx

"use client";

import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "@/lib/utils";

const pixelHeroVariants = cva(
  "relative w-full pixel-borders transition-none duration-0 overflow-hidden",
  {
    variants: {
      variant: {
        default:
          "bg-[#fffacd] border-black dark:bg-[#1a1a1a] dark:border-[#ff8c00]",
        primary:
          "bg-[#ff8c00] border-black text-white dark:bg-[#ff8c00] dark:border-[#ffd700] shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,215,0,0.3)]",
        secondary:
          "bg-[#ffd700] border-black text-black dark:bg-[#ffd700] dark:border-[#ff8c00] shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,140,0,0.3)]",
        dark: "bg-black border-[#ff8c00] text-white dark:bg-[#000000] dark:border-[#ffd700] shadow-[8px_8px_0px_0px_rgba(255,140,0,0.5)] dark:shadow-[8px_8px_0px_0px_rgba(255,215,0,0.5)]",
        gradient:
          "bg-gradient-to-br from-[#ff8c00] via-[#ffd700] to-[#ff6b00] border-black text-white dark:border-[#ffd700] shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]",
        arcade:
          "bg-[#1a1a2e] border-[#ff8c00] text-white dark:bg-[#0f0f1e] dark:border-[#ffd700] shadow-[0_0_20px_rgba(255,140,0,0.5)] dark:shadow-[0_0_20px_rgba(255,215,0,0.5)]",
        neon: "bg-black border-[#00ff00] text-[#00ff00] shadow-[0_0_20px_rgba(0,255,0,0.5),inset_0_0_20px_rgba(0,255,0,0.1)]",
        retro:
          "bg-[#e6d5ac] border-[#8b4513] text-[#4a2c2a] dark:bg-[#2a1810] dark:border-[#d4a574] dark:text-[#f5e6d3] shadow-[6px_6px_0px_0px_rgba(139,69,19,0.5)]",
      },
      size: {
        sm: "py-12 md:py-16",
        md: "py-16 md:py-24",
        lg: "py-24 md:py-32",
        xl: "py-32 md:py-48",
        full: "min-h-screen flex items-center",
      },
      align: {
        left: "text-left",
        center: "text-center",
        right: "text-right",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "lg",
      align: "center",
    },
  },
);

export interface PixelHeroProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof pixelHeroVariants> {

// ... (more code below)

Props

PropTypeDefaultDescription
variant"default" | "primary" | "secondary" | "dark" | "gradient""default"Hero visual style
size"sm" | "md" | "lg" | "xl" | "full""lg"Hero height/padding
align"left" | "center" | "right""center"Content alignment
containerbooleantrueWrap content in container

Examples

Simple Hero

Basic hero with title and actions

🎮 New Release

Pixel UI

8-Bit Retro Components

Build nostalgic web experiences with pixel-perfect components

Hero with Badge

Hero with announcement badge

🎮 New Release

Pixel UI

8-Bit Retro Components

Build nostalgic web experiences with pixel-perfect components

Full Screen Hero

Hero that takes full viewport height

🎮 New Release

Pixel UI

8-Bit Retro Components

Build nostalgic web experiences with pixel-perfect components

Hero with Pattern

Hero with background pattern overlay

🎮 New Release

Pixel UI

8-Bit Retro Components

Build nostalgic web experiences with pixel-perfect components

Split Hero with Grid

Two-column hero layout with image

🎮 New Release

Pixel UI

8-Bit Retro Components

Build nostalgic web experiences with pixel-perfect components

Hero with Features

Hero with feature highlights

🎮 New Release

Pixel UI

8-Bit Retro Components

Build nostalgic web experiences with pixel-perfect components

Accessibility

This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.