Skip to main content

​
Installation

    ​
    Usage

    showLineNumbers
    import { Terminal, TypingAnimation, AnimatedSpan } from "@/components/ui/terminal"
    showLineNumbers
    <Terminal>
  <TypingAnimation>$ npm install</TypingAnimation>
  <AnimatedSpan>Installing packages...</AnimatedSpan>
</Terminal>

    ​
    Components

    ​
    Terminal

    The main container component that creates the terminal window.
    PropTypeDefaultDescription
    childrenReact.ReactNode-The terminal content (TypingAnimation, AnimatedSpan).
    classNamestring-Additional class names for the terminal.
    sequencebooleantrueWhether to sequence animations of children.
    startOnViewbooleantrueWhether to start animation when in view.

    ​
    TypingAnimation

    Animates text with a typing effect.
    PropTypeDefaultDescription
    childrenstring-The text to animate (must be a string).
    classNamestring-Additional class names.
    durationnumber60Duration between each character in milliseconds.
    delaynumber0Delay before animation starts in milliseconds.
    asReact.ElementType"span"The element type to render.
    startOnViewbooleantrueWhether to start animation when in view.
    …restMotionProps-All motion props are supported.

    ​
    AnimatedSpan

    Animates a block of content with fade and slide effect.
    PropTypeDefaultDescription
    childrenReact.ReactNode-The content to animate.
    classNamestring-Additional class names.
    delaynumber0Delay before animation starts in milliseconds.
    startOnViewbooleanfalseWhether to start animation when in view.
    …restMotionProps-All motion props are supported.

    ​
    Examples

    ​
    Sequential Commands

    showLineNumbers
    <Terminal sequence={true}>
  <TypingAnimation>$ git clone repo</TypingAnimation>
  <AnimatedSpan>Cloning into 'repo'...</AnimatedSpan>
  <TypingAnimation>$ cd repo</TypingAnimation>
  <AnimatedSpan>Changed directory</AnimatedSpan>
</Terminal>

    ​
    Custom Typing Speed

    showLineNumbers
    <Terminal>
  <TypingAnimation duration={100}>Slow typing effect</TypingAnimation>
  <TypingAnimation duration={30}>Fast typing effect</TypingAnimation>
</Terminal>

    ​
    Without Sequence

    showLineNumbers
    <Terminal sequence={false}>
  <AnimatedSpan delay={0}>Line 1</AnimatedSpan>
  <AnimatedSpan delay={200}>Line 2</AnimatedSpan>
  <AnimatedSpan delay={400}>Line 3</AnimatedSpan>
</Terminal>

    Build docs developers (and LLMs) love

    Get started for freeTalk to us