Hero — Split

Two-column hero with headline and feature bullets on the left, animated code preview card on the right.

Open Source · MIT License

The component library that ships with you.

Stop fighting your design system. ParticleUI components are so well-crafted you'll forget they're a library.

60+ free, MIT-licensed components
Radix UI primitives under the hood
One command install via particleui-cli

page.tsx

import { Button } from "@/components/ui/button"
import { GlowCard } from "@/components/ui/glow-card"
import { GradientText } from "@/components/ui/gradient-text"

export default function Page() {
  return (
    <GlowCard className="p-8">
      <GradientText variant="aurora" className="text-3xl font-bold">
        Hello, world.
      </GradientText>
      <Button className="mt-4">
        Get started
      </Button>
    </GlowCard>
  )
}

Installation

Run the CLI

$npx particleui-cli add hero-split

Usage

TSX

import { HeroSplit } from "@/components/blocks/hero-split"

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

Props

Prop	Type	Default	Required
badge	string	`"Open Source · MIT License"`	no
headline	string	`"The component library that"`	no
headlineGradient	string	`"ships with you."`	no
description	string	`"Stop fighting your design system. ParticleUI components are so well-crafted you'll forget they're a library."`	no
bullets	string[]	`defaultBullets`	no
primaryCta	string	`"Get started free"`	no
primaryHref	string	`"/docs/getting-started/installation"`	no
secondaryCta	string	`"See all components"`	no
secondaryHref	string	`"/docs/components/button"`	no

Details

Source filecomponents/blocks/hero-split.tsx

Typeblock

Categorieshero, blocks

npm dependencieslucide-react

Registry depsbutton, badge, glow-card, gradient-text, beam

Claude skill—