---
title: Terminal Card
description: A dynamic terminal-style card component with typing animation and syntax highlighting. Ideal for showcasing commands or code snippets with copy-to-clipboard functionality and visually appealing terminal interface. Built with React, Framer Motion, Tailwind CSS, and SyntaxHighlighter.
---
## Installation
CLI
Manual
```bash
npx lightswind@latest add terminal-card
```
Copy and paste the following code into your project.
```tsx
"use client";
import React, { useEffect, useState } from "react";
import { Copy, Terminal, Check } from "lucide-react";
import { cn } from "@/components/lib/utils";
import { motion } from "framer-motion";
import { toast } from "sonner";
type TerminalCardProps = {
command: string;
language?: string;
className?: string;
};
const TerminalCard: React.FC = ({ command, className }) => {
const [copied, setCopied] = useState(false);
const [displayedText, setDisplayedText] = useState("");
const [index, setIndex] = useState(0);
const [isComplete, setIsComplete] = useState(false);
// Typing animation logic
useEffect(() => {
let timeout: NodeJS.Timeout;
if (index < command.length) {
timeout = setTimeout(() => {
setDisplayedText((prev) => prev + command.charAt(index));
setIndex((prev) => prev + 1);
}, 40); // typing speed
} else {
setIsComplete(true);
timeout = setTimeout(() => {
setDisplayedText("");
setIndex(0);
setIsComplete(false);
}, 2000); // restart delay
}
return () => clearTimeout(timeout);
}, [index, command]);
// Copy handler
const handleCopy = () => {
navigator.clipboard.writeText(command);
setCopied(true);
toast.success("Copied to clipboard");
setTimeout(() => setCopied(false), 1500);
};
return (
{/* Header */}
{/* Content */}
{isComplete ? (
$
{command}
) : (
$
{displayedText}
)}