Hero — Centered

Full-width centered hero with gradient headline, typewriter subtitle, CTA buttons, beam separator, and optional meteor shower.

Now in public beta

Build UIs that ship faster than your ideas.

ParticleUI gives you 60+ free, open-source components with a design language engineers actually want to use. Dark-first, Radix-powered, copy-paste ready.

Browse components View on GitHub

Installation

Run the CLI

$npx particleui-cli add hero-centered

Usage

TSX

import { HeroCentered } from "@/components/blocks/hero-centered"

export default function Page() {
  return <HeroCentered />
}

Props

Prop	Type	Default	Required
badge	string	`"Now in public beta"`	no
headlinePre	string	`"Build UIs that"`	no
headlineGradient	string	`"ship faster"`	no
headlinePost	string	`"than your ideas."`	no
subwords	string[]	`["Design systems."`	no
description	string	`"ParticleUI gives you 60+ free`	no
primaryCta	string	`"Browse components"`	no
primaryHref	string	`"/docs/components/button"`	no
secondaryCta	string	`"View on GitHub"`	no
secondaryHref	string	`"https://github.com"`	no
meteors	boolean	—	no

Details

Source filecomponents/blocks/hero-centered.tsx

Typeblock

Categorieshero, blocks

npm dependencieslucide-react

Registry depsbutton, badge, gradient-text, typewriter, beam, meteors

Claude skill—