Terminal

Animated terminal emulator component for React and Next.js applications. Built with TypeScript support, Tailwind CSS styling, and shadcn/ui design featuring typing effects, macOS styling, and Motion animations.

Motion

Loading component...

"use client";import { cn } from "@/lib/utils";import { motion, MotionProps } from "motion/react";import { useEffect, useRef, useState } from "react";interface AnimatedSpanProps extends MotionProps {  children: React.ReactNode;  delay?: number;  className?: string;}export const AnimatedSpan = ({  children,  delay = 0,  className,  ...props}: AnimatedSpanProps) => (  <motion.div    initial={{ opacity: 0, y: -5 }}    animate={{ opacity: 1, y: 0 }}    transition={{ duration: 0.3, delay: delay / 1000 }}    className={cn("grid text-sm font-normal tracking-tight", className)}    {...props}  >    {children}  </motion.div>);interface TypingAnimationProps extends MotionProps {  children: string;  className?: string;  duration?: number;  delay?: number;  as?: React.ElementType;}export const TypingAnimation = ({  children,  className,  duration = 60,  delay = 0,  as: Component = "span",  ...props}: TypingAnimationProps) => {  if (typeof children !== "string") {    throw new Error("TypingAnimation: children must be a string. Received:");  }  const MotionComponent = motion.create(Component, {    forwardMotionProps: true,  });  const [displayedText, setDisplayedText] = useState<string>("");  const [started, setStarted] = useState(false);  const elementRef = useRef<HTMLElement | null>(null);  useEffect(() => {    const startTimeout = setTimeout(() => {      setStarted(true);    }, delay);    return () => clearTimeout(startTimeout);  }, [delay]);  useEffect(() => {    if (!started) return;    let i = 0;    const typingEffect = setInterval(() => {      if (i < children.length) {        setDisplayedText(children.substring(0, i + 1));        i++;      } else {        clearInterval(typingEffect);      }    }, duration);    return () => {      clearInterval(typingEffect);    };  }, [children, duration, started]);  return (    <MotionComponent      ref={elementRef}      className={cn("text-sm font-normal tracking-tight", className)}      {...props}    >      {displayedText}    </MotionComponent>  );};interface TerminalProps {  children: React.ReactNode;  className?: string;}export const Terminal = ({ children, className }: TerminalProps) => {  return (    <div      className={cn(        "z-0 h-full max-h-[400px] w-full max-w-lg rounded-xl border border-border bg-background",        className,      )}    >      <div className="flex flex-col gap-y-2 border-b border-border p-4">        <div className="flex flex-row gap-x-2">          <div className="h-2 w-2 rounded-full bg-red-500"></div>          <div className="h-2 w-2 rounded-full bg-yellow-500"></div>          <div className="h-2 w-2 rounded-full bg-green-500"></div>        </div>      </div>      <pre className="p-4">        <code className="grid gap-y-1 overflow-auto">{children}</code>      </pre>    </div>  );};

Installation

npx shadcn@latest add https://www.shadcn.io/registry/terminal.json

npx shadcn@latest add https://www.shadcn.io/registry/terminal.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/terminal.json

bunx shadcn@latest add https://www.shadcn.io/registry/terminal.json

Examples

Basic Terminal

Loading component...

"use client";import { cn } from "@/lib/utils";import { motion, MotionProps } from "motion/react";import { useEffect, useRef, useState } from "react";interface AnimatedSpanProps extends MotionProps {  children: React.ReactNode;  delay?: number;  className?: string;}export const AnimatedSpan = ({  children,  delay = 0,  className,  ...props}: AnimatedSpanProps) => (  <motion.div    initial={{ opacity: 0, y: -5 }}    animate={{ opacity: 1, y: 0 }}    transition={{ duration: 0.3, delay: delay / 1000 }}    className={cn("grid text-sm font-normal tracking-tight", className)}    {...props}  >    {children}  </motion.div>);interface TypingAnimationProps extends MotionProps {  children: string;  className?: string;  duration?: number;  delay?: number;  as?: React.ElementType;}export const TypingAnimation = ({  children,  className,  duration = 60,  delay = 0,  as: Component = "span",  ...props}: TypingAnimationProps) => {  if (typeof children !== "string") {    throw new Error("TypingAnimation: children must be a string. Received:");  }  const MotionComponent = motion.create(Component, {    forwardMotionProps: true,  });  const [displayedText, setDisplayedText] = useState<string>("");  const [started, setStarted] = useState(false);  const elementRef = useRef<HTMLElement | null>(null);  useEffect(() => {    const startTimeout = setTimeout(() => {      setStarted(true);    }, delay);    return () => clearTimeout(startTimeout);  }, [delay]);  useEffect(() => {    if (!started) return;    let i = 0;    const typingEffect = setInterval(() => {      if (i < children.length) {        setDisplayedText(children.substring(0, i + 1));        i++;      } else {        clearInterval(typingEffect);      }    }, duration);    return () => {      clearInterval(typingEffect);    };  }, [children, duration, started]);  return (    <MotionComponent      ref={elementRef}      className={cn("text-sm font-normal tracking-tight", className)}      {...props}    >      {displayedText}    </MotionComponent>  );};interface TerminalProps {  children: React.ReactNode;  className?: string;}export const Terminal = ({ children, className }: TerminalProps) => {  return (    <div      className={cn(        "z-0 h-full max-h-[400px] w-full max-w-lg rounded-xl border border-border bg-background",        className,      )}    >      <div className="flex flex-col gap-y-2 border-b border-border p-4">        <div className="flex flex-row gap-x-2">          <div className="h-2 w-2 rounded-full bg-red-500"></div>          <div className="h-2 w-2 rounded-full bg-yellow-500"></div>          <div className="h-2 w-2 rounded-full bg-green-500"></div>        </div>      </div>      <pre className="p-4">        <code className="grid gap-y-1 overflow-auto">{children}</code>      </pre>    </div>  );};

Use Cases

Demo presentations - Code execution simulations and live coding displays
Documentation - Command line tutorials and installation guides
Portfolio sites - Developer showcases with terminal-style interactions
Educational content - Programming tutorials with realistic terminal output

Implementation

Built with Motion for smooth typing animations. Uses configurable delays and speeds. Supports polymorphic elements and custom styling. macOS-inspired design with responsive layout.

Features

macOS styling - Terminal window with traffic light controls using Tailwind CSS design
Typing animations - Real-time text simulation with configurable speeds using Motion library
Animated spans - Text elements with customizable delays using JavaScript timing
Responsive design - Adapts to different screen sizes for React applications
Accessibility markup - Semantic structure with screen reader support for Next.js projects
Polymorphic elements - Custom element support through as prop using TypeScript generics
Customizable styling - Complete appearance control with className props using shadcn/ui theming
Open source - Free terminal component with Motion animations and accessibility features

Reactterminal