Buildbeautifulinterfacesfaster

Production-ready animated components built with Tailwind CSS and Framer Motion. Copy, paste, ship.

Installation

Usage

import { HeroGradient } from "@/components/pioneerui/hero-gradient"
 
export default function Page() {
  return (
    <HeroGradient
      badge="New: 25+ components"
      headline="Build beautiful interfaces faster"
      subheadline="Production-ready components for your next project."
      cta={<button className="btn-primary">Get started</button>}
    />
  )
}

Props

Prop	Type	Default	Description
`headline`	`string`	—	Main headline text — each word animates in (required)
`subheadline`	`string`	`undefined`	Supporting text below headline
`badge`	`string`	`undefined`	Small badge above headline
`cta`	`React.ReactNode`	`undefined`	CTA buttons or any element
`gradientFrom`	`string`	`from-indigo-500`	Tailwind gradient start class
`gradientTo`	`string`	`to-purple-500`	Tailwind gradient end class

Count Up Stats Hero Video