An animated terminal window that types out CLI commands and their output character-by-character, useful for showcasing install steps or quick-start guides.
import { Terminal1 } from "@/components/ui/terminal1";
export default function Terminal1Demo() {
return (
<Terminal1
badge={{ label: "Quick Start", variant: "secondary" }}
heading="Get started in seconds"
description="Install our CLI and start building. Just a few commands to get up and running."
terminal={{
title: "Terminal",
commands: [
{
id: "cmd-1",
prompt: "$ ",
command: "npm install -g @acme/cli",
output: "Installing @acme/cli...\n\u2713 Installed successfully",
outputDelay: 800,
},
{
id: "cmd-2",
prompt: "$ ",
command: "acme init my-project",
output: "Creating project structure...\n\u2713 Project initialized",
outputDelay: 600,
},
{
id: "cmd-3",
prompt: "$ ",
command: "cd my-project && acme dev",
output:
"Starting development server...\n\u2713 Ready at http://localhost:3000",
outputDelay: 500,
},
],
typeSpeed: 50,
delayBetweenCommands: 1000,
showLineNumbers: false,
}}
showCopyButton
glowEffect
/>
);
}