Staaarter

Terminal Window

A terminal-styled window with a title bar and three decorative traffic-light dots. Each question is rendered as a fake `$ command` prompt line, followed by its answer as dimmer command output below. Built for developer or technical documentation FAQs.

By Staaarter Team
FAQ
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/terminal-window.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/faq/faq25.tsx instead.

Usage

The file also exports faq25Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Faq25, faq25Demo } from "@/components/blocks/faq/faq25";

export default function Page() {
  return <Faq25 {...faq25Demo} />;
}

Props

PropTypeDefaultDescription
headingstringnoneOptional heading shown above the terminal window.
descriptionstringnoneOptional supporting copy under the heading.
terminalTitlestring"faq.sh"Text shown in the terminal title bar.
faqsFaqItem[]noneList of question/answer pairs rendered as command/output pairs.
classNamestringnoneExtra classes for the outer section element.

Types

interface FaqItem {
  question: string;
  answer: string;
}

Behavior notes

  • The dark terminal chrome (bg-neutral-950, traffic-light dots) is a deliberate stylistic one-off rather than the semantic-token palette used elsewhere, matching the existing devtools-category terminal convention in this codebase.
  • The three title-bar dots are purely decorative, they do not close, minimize, or resize anything.
  • No command is actually executed, this is a plain server component with static, pre-written question/answer text styled to look like a shell session.