Terminal Animation
Animated terminal emulator with typing effects, tabbed commands, and customizable output rendering
$
ā
"use client"
import {
TerminalAnimationRoot,
TerminalAnimationWindow,
TerminalAnimationContent,
TerminalAnimationCommandBar,
TerminalAnimationOutput,
TerminalAnimationTabList,
TerminalAnimationTabTrigger,
TerminalAnimationBlinkingCursor,
defaultTerminalTabs,
type TerminalLine,
} from "@/components/special/terminal-animation/component"
import { cn } from "@/lib/utils"
export function TerminalAnimationExample() {
return (
<div className="mx-auto w-full max-w-2xl">
<TerminalAnimationRoot
tabs={defaultTerminalTabs}
className="relative overflow-hidden rounded-xl"
>
{/* Tab bar */}
<TerminalAnimationTabList className="flex gap-1 border-b border-border bg-muted/50 px-4 pt-3 pb-0">
{defaultTerminalTabs.map((tab, i) => (
<TerminalAnimationTabTrigger
key={tab.label}
index={i}
className={cn(
"rounded-t-lg px-3 py-1.5 text-xs font-medium transition-colors",
"data-[state=active]:bg-card data-[state=active]:text-foreground",
"data-[state=inactive]:text-muted-foreground data-[state=inactive]:hover:text-foreground"
)}
>
{tab.label}
</TerminalAnimationTabTrigger>
))}
</TerminalAnimationTabList>
{/* Terminal window */}
<TerminalAnimationWindow
minHeight="20rem"
style={{ backgroundColor: "#0a0a0a" }}
className="rounded-t-none"
>
<TerminalAnimationContent>
{/* Command line */}
<div className="flex items-center font-mono text-sm">
<span className="mr-2 text-emerald-400">$</span>
<TerminalAnimationCommandBar className="text-neutral-200" />
</div>
{/* Output */}
<TerminalAnimationOutput
className="mt-1 font-mono text-sm"
renderLine={(line: TerminalLine, _index: number, visible: boolean) => {
if (!visible) return null
return (
<div className={cn(line.color, "leading-6")}>
{line.text || "\u00A0"}
</div>
)
}}
/>
</TerminalAnimationContent>
</TerminalAnimationWindow>
</TerminalAnimationRoot>
</div>
)
}
Installation
pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/terminal-animation"
Dependencies
pnpm add @radix-ui/react-slot @radix-ui/react-use-controllable-state