Centered hero on a square grid where integration icons blink in and out, paused while off screen.
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-grid
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1"use client";23import { Mail, GitBranch, MessagesSquare } from "lucide-react";4import { IntegrationsGridHero } from "@/components/blocks/hero-grid";56export function Hero() {7return (8<IntegrationsGridHero9title="Plug into everything"10description="Sync the tools your team already lives in."11primaryAction={{ label: "Start free", href: "/signup" }}12secondaryAction={{ label: "Browse apps", href: "/integrations" }}13slots={[14{ col: 1, row: 1, label: "Mail", icon: Mail },15{ col: 7, row: 1, label: "Code", icon: GitBranch },16{ col: 2, row: 4, label: "Chat", icon: MessagesSquare, muted: true },17]}18initial={[0, 1]}19visible={2}20/>21);22}
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Connect your whole stack" | Headline in the centre panel |
| description | string | "Pull in mail, docs, code and data…" | Text under the headline |
| primaryAction | HeroAction | { label: "Get started" } | Main button: label, optional href and onClick |
| secondaryAction | HeroAction | { label: "See integrations" } | Outline button next to the main one |
| slots | IntegrationSlot[] | 20 sample integrations | Icons pinned to cells of the 10 x 6 grid: col, row, label, icon, muted |
| initial | number[] | [0, 3, 6, 8, 11, 14, 16, 19] | Indexes into slots lit before animation starts |
| visible | number | 8 | How many integrations are lit at once |
| interval | number | 700 | Milliseconds between swaps |
| 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.