Terminal Card
A terminal window card that types its command lines with a blinking caret for developer landings.
Usage
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"
/>Playground
Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Card10 } from "@/components/beste/component/card10";
<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."}]}
/>Props
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 |
More Card components
View all CardPro blocks drop monthly
A new themed set of sections lands every month, with free updates forever.
Learn moreGradient Beam Card
A featured callout card wrapped in an orbiting gradient border beam for highlights and announcements.
Brand systems
Brand systems
Identity, guidelines, and design tokens that scale across every touchpoint of your product.
Flip Card
A 3D flip card that rotates on hover to reveal details and a link for service and feature grids.
The new landing page is live!
Already? That was two days of work at most
Blocks. It is all blocks.
Chat Card
A chat conversation card with message bubbles and a typing indicator for testimonials and support sections.
Customer satisfaction
vs last quarter
Stat Card
A minimal stat card with a bold value, label, and optional trend delta for metrics rows.
Ship in minutes
Copy a block, wire up your content, and deploy. No boilerplate, no configuration, no lock in.
Learn moreSpotlight Feature Card
A feature card with an icon tile and a cursor tracking spotlight for landing page feature grids.