AI hero with a polished chatbox whose placeholder types out questions, ringed by app icons orbiting on dashed circles. 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-chat
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 { FileText, Wallet } from "lucide-react";4import { OrbitChatHero } from "@/components/blocks/hero-chat";56export function Hero() {7return (8<OrbitChatHero9badge="Now with Notion"10title="Ask anything about your company"11prompts={["What did we ship last sprint?", "Who owns the billing service?"]}12suggestions={[13{ icon: FileText, label: "Sprint notes" },14{ icon: Wallet, label: "Spend this month" },15]}16onSubmit={(question) => console.log(question)}17onSuggestionClick={(s) => console.log(s.label)}18/>19);20}
| Prop | Type | Default | Description |
|---|---|---|---|
| badge | string | "40+ live connectors" | Text in the pill above the headline |
| title | string | "AI that works with your data" | Headline |
| subtitle | string | "Connect apps, documents and databases" | Small caps line under the headline |
| prompts | string[] | 4 sample questions | Questions the placeholder types out in turn |
| apps | OrbitApp[] | 12 social brands | Chips on the orbits: ring (0 to 2), angle, SVG path, label and an optional brand color |
| sourcesLabel | string | "All sources" | Text on the sources button |
| hint | string | "Answers cite their sources" | Hint next to the send button; empty hides it |
| suggestions | HeroSuggestion[] | 3 sample chips | Icon + label chips under the chatbox |
| highlights | HeroHighlight[] | 2 sample points | Icon + text points at the bottom |
| onSubmit | (question: string, event: FormEvent) => void | – | Called with the typed question |
| onSuggestionClick | (suggestion: HeroSuggestion) => void | – | A suggestion chip was clicked |
| onSourcesClick | () => void | – | The sources button was clicked |
| onAttachClick | () => void | – | The paperclip was clicked |
| onVoiceClick | () => void | – | The microphone was clicked |
| 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.