Centered hero with a crew of bobbing agent avatars and a headline pill that wipes between words and colours. Respects reduced motion.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/hero-pill
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1import { AnimatedPillHero } from "@/components/blocks/hero-pill";23export function Hero() {4return (5<AnimatedPillHero6title="Where your team and AI"7words={[8{ label: "Plan", color: "oklch(0.62 0.19 255)" },9{ label: "Ship", color: "oklch(0.6 0.21 300)" },10]}11description="One workspace for docs, tasks and agents."12primaryAction={{ label: "Get started", href: "/signup" }}13secondaryAction={{ label: "Talk to sales", href: "/contact" }}14footnote="Free for 14 days"15/>16);17}
| Prop | Type | Default | Description |
|---|---|---|---|
| words | PillWord[] | Plan, Build, Write, Ship, Launch | Words the headline pill cycles through, each with a label and accent colour |
| agents | HeroAgent[] | 3 sample badges | Tilted logo badges above the headline: name, bg, tilt and a 24x24 SVG path |
| title | string | "Where your team and AI" | First headline line |
| titleSuffix | string | "together." | Text after the pill on the second line |
| description | string | "Capture context, find answers…" | Paragraph under the headline |
| primaryAction | HeroAction | { label: "Start for free" } | Main button: label, optional href and onClick |
| secondaryAction | HeroAction | { label: "Book a demo" } | Outline button next to the main one |
| footnote | string | "Free for teams up to 5 · No credit card required" | Small line under the buttons; empty hides it |
| className | string | – | Extra classes on the section |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.