A terminal window card that types its command lines with a blinking caret for developer landings.
The import and the props worth knowing about, in one place.
import { Card10 } from "@/components/beste/component/card10";
// Commands type in character by character; outputs print at once.
<Card10
title="beste ~ zsh"
lines={[
{ kind: "command", text: "npx shadcn@latest init" },
{ kind: "output", text: "Project configured in 0.8s" },
{ kind: "command", text: "npx shadcn add hero-section" },
{ kind: "success", text: "Done. Ship it." },
]}
/>
<Card10
lines={[{ kind: "command", text: "bun dev" }]}
tone="midnight" // "dark" (default) | "midnight"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Window title (e.g. "beste ~ zsh") |
lines* | Card10Line[] | — | Lines played in order |
tone | "dark" | "midnight" | — | Shell colors: zinc with emerald (default) or slate with sky |
className | string | — | Additional classes merged onto the root |
A new themed set of sections lands every month, with free updates forever.
Learn moreIdentity, guidelines, and design tokens that scale across every touchpoint of your product.
Copy a block, wire up your content, and deploy. No boilerplate, no configuration, no lock in.
Learn more