Terminal

A feature section featuring a mock terminal with typed commands and output. Built for developer tools where showing real CLI usage sells the value fast.

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

const features = [
  {
    title: 'Quick Start',
    description: 'Get started in seconds with our CLI tool.',
    command: 'npx create-app@latest my-app',
    output: [
      'Creating a new app...',
      'Installing dependencies...',
      'Success! Created my-app at /path/to/my-app',
      '',
      'Get started with:',
      '  cd my-app',
      '  npm run dev',
    ],
  },
  {
    title: 'Database Setup',
    description: 'Set up your database with a single command.',
    command: 'npm run db:setup',
    output: [
      'Setting up database...',
      'Creating tables...',
      'Running migrations...',
      'Seeding initial data...',
      '',
      'Database setup complete!',
    ],
  },
  {
    title: 'Deploy',
    description: 'Deploy your app to production instantly.',
    command: 'npm run deploy',
    output: [
      'Building application...',
      'Running tests...',
      'Optimizing assets...',
      'Deploying to production...',
      '',
      '🚀 Deployed successfully!',
      '  URL: https://your-app.com',
    ],
  },
];

function Terminal({ command, output }: { command: string; output: string[] }) {
  return (
    <div className="bg-foreground overflow-hidden rounded-lg">
      <div className="bg-accent-foreground flex items-center gap-2 px-4 py-3">
        <div className="h-3 w-3 rounded-full bg-red-500" />
        <div className="h-3 w-3 rounded-full bg-yellow-500" />
        <div className="h-3 w-3 rounded-full bg-green-500" />
      </div>
      <div className="p-4 font-mono text-sm">
        <div className="text-muted-foreground flex items-center gap-2">
          <span>$</span>
          <span className="text-background">{command}</span>
        </div>
        <div className="mt-4 space-y-1">
          {output.map((line, i) => (
            <div key={i} className={line ? 'text-muted/90' : 'h-4'}>
              {line}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default function FeatureSectionTerminal() {
  const [activeFeature, setActiveFeature] = useState(0);

  return (
    <section className="container mx-auto space-y-8 px-4 py-24 md:px-6 2xl:max-w-[1400px]">
      <div className="space-y-4 text-center">
        <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
          Simple commands, powerful results
        </h2>
        <p className="text-muted-foreground mx-auto max-w-[700px] md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
          Build and deploy your applications with just a few commands.
        </p>
      </div>

      <div className="grid items-start gap-8 lg:grid-cols-[1fr,2fr]">
        <div className="flex flex-col gap-4">
          {features.map((feature, index) => (
            <Button
              key={feature.title}
              variant={activeFeature === index ? 'default' : 'ghost'}
              className="h-auto justify-start p-4 whitespace-normal"
              onClick={() => setActiveFeature(index)}
            >
              <div className="text-left">
                <h3 className="font-semibold">{feature.title}</h3>
                <p
                  className={cn(
                    'text-muted-foreground mt-1 text-sm',
                    activeFeature === index && 'text-muted/90'
                  )}
                >
                  {feature.description}
                </p>
              </div>
            </Button>
          ))}
        </div>

        <div className="relative">
          <Terminal
            command={features[activeFeature]!.command}
            output={features[activeFeature]!.output}
          />
        </div>
      </div>
    </section>
  );
}

About this block

Terminal is a two-column interactive feature section. A centered heading and supporting sentence span the top. Below, a narrow left rail lists three feature buttons stacked vertically, each holding a title and a one-line description. The right panel is roughly twice as wide and shows a mock terminal window: a title bar with three colored dots, a prompt line with the active command, and several lines of monospaced output beneath it. Clicking a button in the left rail swaps the command and output in the terminal panel immediately.

The heading, supporting text, and all three feature entries are independent copy. You can rename the features, rewrite the commands and output lines, or change the number of entries without affecting the layout. The terminal panel is a presentational component with no real execution, so the output is whatever static lines you supply.

When to use

Reach for this block on a landing page or docs homepage for a developer tool, a CLI package, or a platform with a meaningful command-line surface. It works especially well for an online education platform that teaches coding workflows, where showing the exact commands a learner will run is more convincing than an abstract feature list. Compared to a static Card Grid, the interactive terminal keeps visitors engaged longer and lets you demonstrate a real workflow rather than just naming capabilities.

A natural flow around it on a Marketing (Legacy) page:

Before

A Hero Section to introduce the product and set the developer-tool context before diving into commands
A simple feature overview for a brief prose summary of what the platform does

After

Steps to walk through the full setup sequence in numbered order after the commands have been introduced
A CTA Section to push visitors toward signing up or installing once the capability has been shown

What you can display

The obvious fit is a short CLI walkthrough for your own tool, one button per stage. A few other ways to use the frame:

Course module previews. On a coding education site, show the command a student runs to scaffold each lesson, with the expected terminal output, so prospective learners see exactly what hands-on work looks like.
Environment setup steps. Walk through install, configure, and run as three buttons so a developer can match your output against their own terminal before they commit to a trial.
API client usage. Swap the npm commands for curl or SDK calls to show how a request is sent and what a successful response looks like.

Tip: keep each output block to five or six lines so the terminal panel stays a consistent height as visitors switch between features.

About this block

When to use

A natural flow around it on a Marketing (Legacy) page:

Before

A Hero Section to introduce the product and set the developer-tool context before diving into commands
A simple feature overview for a brief prose summary of what the platform does

After

Steps to walk through the full setup sequence in numbered order after the commands have been introduced
A CTA Section to push visitors toward signing up or installing once the capability has been shown

What you can display

The obvious fit is a short CLI walkthrough for your own tool, one button per stage. A few other ways to use the frame:

Course module previews. On a coding education site, show the command a student runs to scaffold each lesson, with the expected terminal output, so prospective learners see exactly what hands-on work looks like.
Environment setup steps. Walk through install, configure, and run as three buttons so a developer can match your output against their own terminal before they commit to a trial.
API client usage. Swap the npm commands for curl or SDK calls to show how a request is sent and what a successful response looks like.

Tip: keep each output block to five or six lines so the terminal panel stays a consistent height as visitors switch between features.

Terminal

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display