An install call to action built around a terminal: package manager tabs, a command that types itself when the section comes into view, an install progress bar and output lines, plus copy and replay buttons.
v3.2create-tidepool is out
One command scaffolds a typed project with auth, a local database and deploy config. No account needed to try it.
npx shadcn@latest add https://hyperblur.dev/r/cta-terminal-install.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cta-terminal-install.tsx.
import { CtaTerminalInstall } from "@/components/hyperblur/cta-terminal-install"
<CtaTerminalInstall managers={[{ id: "npm", label: "npm", command: "npx create-acme@latest" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "v3.2" | Version badge above the headline. Empty hides it. |
| title | string | "Up and running before your coffee cools." | Headline. |
| subtitle | string | Paragraph under the headline. | |
| managers | { id: string; label: string; command: string }[] | npm, pnpm, yarn, bun | Tabs and the command each one types. |
| output | { text: string; tone?: "ok" | "dim" | "info" | "accent" }[] | 7 lines | Lines printed after the command. |
| primary | { label: string; href: string } | { label: "Read the quickstart", href: "#" } | Main button. |
| secondary | { label: string; href: string } | { label: "Browse templates", href: "#" } | Outline button. |
| autoPlay | boolean | true | Types the command the first time the section scrolls into view. When false the full output is shown. |
| typingSpeed | number | 38 | Milliseconds per typed character. |
| onCommandCopy | (command: string) => void | Called after the command is copied. | |
| accent | string | "#4ade80" | Prompt, caret and success color. |
| className | string | "" | Extra classes for the root element. |
| style | CSSProperties | Inline styles merged after the accent variables. |