Components
TerminalScreen
This Terminal Screen component simulates a realistic command-line interface with a smooth typing effect. It sequentially types out commands you provide, creating an interactive and dynamic experience, perfect for developer portfolios, tutorials, or dashboard demos. The component supports customizable dimensions, typing speed, and command sequences, making it flexible for different screen sizes and content. With an optional dark/light theme and a top control bar, it closely resembles a real terminal, giving users a modern and professional coding interface feel.
Loading preview...
import TerminalScreen from "@/components/ui/terminal-screen";
export default function DemoOne() {
return (
<TerminalScreen
width="700px"
height="450px"
typingSpeed={40} // milliseconds per character
commands={[
"echo Hello, Developer!",
"git status",
"npm install",
"npm run dev",
"ls -la",
"echo Terminal ready!"
]}
/>
);
}