Terminal Card

About this component

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.

beste ~ zsh

Usage

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 Card

Brand systems

Identity, guidelines, and design tokens that scale across every touchpoint of your product.

Explore service

Flip Card

A 3D flip card that rotates on hover to reveal details and a link for service and feature grids.

Join the beta program

We are opening a short testing window for the new builder. Help shape it before launch.

Only 25 seats

Applications close Jul 18.

Request access

Promo Card

A dismissible promo card with image, deadline line, and apply button for programs and offers.

Featured

Pro blocks drop monthly

A new themed set of sections lands every month, with free updates forever.

Learn more

Gradient Beam Card

A featured callout card wrapped in an orbiting gradient border beam for highlights and announcements.

98%+2.1%

Customer satisfaction

vs last quarter

Stat Card

A minimal stat card with a bold value, label, and optional trend delta for metrics rows.

Selin Aksoyonline

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.

Ship in minutes

Copy a block, wire up your content, and deploy. No boilerplate, no configuration, no lock in.

Learn more

Spotlight Feature Card

A feature card with an icon tile and a cursor tracking spotlight for landing page feature grids.