A light developer install block with tabs for npm, pnpm, yarn and brew. The command types itself out on every switch and each box has a copy button with a copied state.
Quill turns a folder of Markdown into a fast, searchable docs site. Pick your package manager, paste the command and you are live in a minute.
npm install -g @quillkit/cliquill --versionquill init my-docs && quill devnpx shadcn@latest add https://hyperblur.dev/r/download-install-tabs.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/download-install-tabs.tsx.
import { DownloadInstallTabs } from "@/components/hyperblur/download-install-tabs"
<DownloadInstallTabs managers={[{ id: "npm", label: "npm", command: "npm i -g my-cli" }]} onCommandCopy={(c) => console.log(c)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "quill cli" | Mono label above the headline. Empty string hides it. |
| title | string | "Install the Quill CLI in one line" | Section headline. |
| subtitle | string | sample text | Paragraph under the headline. Empty string hides it. |
| managers | { id: string; label: string; command: string }[] | npm, pnpm, yarn, brew | Tabs and the install command for each. |
| manager | string | Controlled tab id. Pair with onManagerChange. | |
| defaultManager | string | first manager id | Initial tab when uncontrolled. |
| onManagerChange | (id: string) => void | Called when the user picks a tab. | |
| onCommandCopy | (command: string) => void | Called with the command text whenever a copy button is pressed. | |
| verifyCommand | string | "quill --version" | Second step command. Empty string hides the step. |
| verifyOutput | string | "quill 3.8.1 (darwin-arm64)" | Expected output under the second step. |
| startCommand | string | "quill init my-docs && quill dev" | Third step command. Empty string hides the step. |
| requirements | { label: string; detail?: string }[] | 4 sample requirements | Checklist on the left. Empty array hides it. |
| version | string | "v3.8.1" | Latest version in the card footer. |
| license | string | "MIT license" | Footer text on the right. Empty string hides it. |
| links | { label: string; href: string }[] | Quickstart, Changelog, Source code | Underlined links under the requirements. |
| accent | string | "#10b981" | Color of the prompt, caret, checks and copied state. |
| className | string | Extra class names on the section root. | |
| style | CSSProperties | Inline styles on the section root, merged after the accent variable. |