Developer guide

React hero sections built from focused components

A hero section is the opening region of a page that identifies the product, audience, primary value, and next action. Spectrum UI currently provides focused building blocks for that composition—text effects, media reveals, navigation, cards, and buttons—rather than one fixed hero component.

That distinction keeps the most important page content under your control. Use semantic headings and server-rendered copy first, then add an animated leaf only when it improves hierarchy without delaying comprehension.

Browse 6 componentsView code example

What Hero Sections means

A useful hero is a content decision expressed through layout. It needs one clear heading, supporting evidence or context, a primary action, and only the media necessary to explain the product at the top of the page.

Component libraries can supply the ingredients but cannot decide the message. Build the static structure with HTML and Tailwind CSS, choose one visual treatment, preserve the heading in the document, and ensure the calls to action remain identifiable without animation.

When to use these patterns

01

A page needs immediate orientation

Use a hero when visitors must quickly understand the product, intended user, and primary next step.

02

A launch needs one visual focal point

Pair concise copy with one media reveal, text effect, product card, or event badge instead of competing effects.

03

Several pages share a content structure

Create a local hero composition with explicit slots for copy and actions while allowing each route to supply distinct content.

Hero Sections to explore

Open a component page to inspect its live example, editable source, installation command, dependencies, API details, accessibility notes, and related components.

ActionButtonA set of pre-designed buttons including gradient, outline, loading, and icon styles.CardAnimated CardA card that animates on hover to showcase tools, technologies, and features.Card3D Tilt CardA 3D card that tilts toward the pointer with parallax depth and glare.Media3D Event BadgeAn interactive 3D event badge rendered with Three.js and React Three Fiber.MediaImage PreviewAn image preview component with zoom, lightbox, and gallery support.ActionFollow ButtonA follow button that morphs its width, fill, and label between states.

Add an optional text effect without hiding the H1

The semantic heading remains readable content; the hologram treatment acts as a separate visual label.

pnpm dlx shadcn@latest add @spectrumui/holographic
pnpm dlx shadcn@latest add button
ProductHero.tsx
import { HologramText } from '@/components/spectrumui/hologram-text';
import { Button } from '@/components/ui/button';

export function ProductHero() {
  return (
    <section aria-labelledby="product-heading" className="py-20">
      <HologramText text="SPECTRUM UI" />
      <h1 id="product-heading" className="mt-6 text-5xl font-medium">
        Build interface motion from editable React source
      </h1>
      <p className="mt-4 max-w-2xl text-muted-foreground">
        Install individual components, inspect their dependencies, and keep the code.
      </p>
      <Button className="mt-8">Browse components</Button>
    </section>
  );
}

Linked guides

Guide

Typography for developers

Create a heading hierarchy that survives every visual treatment.

Guide

Psychology of UI

Use attention and visual hierarchy without obscuring the primary action.

Guide

Responsive design with modern CSS

Adapt the opening composition to content width, not a single device mockup.

Landing Page ComponentsAnimation LibraryPricing Sections

Hero Sections questions

Not currently. This guide shows how to compose existing text, media, navigation, card, and button components into a hero that matches the page’s content.