✨ If you like Ebon UI, please give us a star on GitHub.

Terminal

An implementation of the linux terminal. Used for showcasing a command line interface.

✔ Scaffolding project in /path/to/my-app...
✔ Done. Now run:
npm install
npm run dev
📁 Created files:- src/App.tsx- vite.config.ts- tsconfig.json

import {
  AnimatedSpan,
  Terminal,
  TypingAnimation,
} from "@/registry/ebonui/terminal"

export function TerminalDemo() {
  return (
    <Terminal>
      <TypingAnimation>
        &gt; npx create-vite@latest my-app --template react-ts
      </TypingAnimation>

      <AnimatedSpan className="text-green-500">
        ✔ Scaffolding project in /path/to/my-app...
      </AnimatedSpan>

      <AnimatedSpan className="text-green-500">✔ Done. Now run:</AnimatedSpan>

      <AnimatedSpan className="ml-4 text-green-500">npm install</AnimatedSpan>

      <AnimatedSpan className="ml-4 text-green-500">npm run dev</AnimatedSpan>

      <AnimatedSpan className="text-blue-500">
        <span>📁 Created files:</span>
        <span className="block pl-2">- src/App.tsx</span>
        <span className="block pl-2">- vite.config.ts</span>
        <span className="block pl-2">- tsconfig.json</span>
      </AnimatedSpan>

      <TypingAnimation className="text-muted-foreground">
        Your Vite + React + TypeScript project is ready!
      </TypingAnimation>

      <TypingAnimation className="text-muted-foreground">
        Navigate to the project and start building.
      </TypingAnimation>
    </Terminal>
  )
}

Installation


pnpm dlx shadcn@latest add https://ebonui.com/r/terminal.json

Examples

Custom Delays

Open in

On branch main
Your branch is up to date with origin/main.
Changes not staged for commit:
modified: src/components/Button.tsx
[main abc1234] Update Button component
1 file changed, 5 insertions(+), 2 deletions(-)

import {
  AnimatedSpan,
  Terminal,
  TypingAnimation,
} from "@/registry/ebonui/terminal"

export function TerminalDemo2() {
  return (
    <Terminal>
      <TypingAnimation delay={0}>$ git status</TypingAnimation>

      <AnimatedSpan delay={800} className="text-green-500">
        On branch main
      </AnimatedSpan>

      <AnimatedSpan delay={1000} className="text-green-500">
        Your branch is up to date with origin/main.
      </AnimatedSpan>

      <AnimatedSpan delay={1200} className="text-blue-500">
        Changes not staged for commit:
      </AnimatedSpan>

      <AnimatedSpan delay={1400} className="ml-4 text-blue-500">
        modified: src/components/Button.tsx
      </AnimatedSpan>

      <TypingAnimation delay={2000}>$ git add .</TypingAnimation>

      <TypingAnimation delay={2800}>
        $ git commit -m Update Button component
      </TypingAnimation>

      <AnimatedSpan delay={3600} className="text-green-500">
        [main abc1234] Update Button component
      </AnimatedSpan>

      <AnimatedSpan delay={3800} className="text-green-500">
        1 file changed, 5 insertions(+), 2 deletions(-)
      </AnimatedSpan>
    </Terminal>
  )
}

Usage

import {
  AnimatedSpan,
  Terminal,
  TypingAnimation,
} from "@/components/ui/terminal"

<Terminal>
  <TypingAnimation>pnpm dlx shadcn@latest init</TypingAnimation>
  <AnimatedSpan>✔ Preflight checks.</AnimatedSpan>
  <AnimatedSpan>✔ Validating Tailwind CSS.</AnimatedSpan>
  <TypingAnimation>Success! Project initialization completed.</TypingAnimation>
</Terminal>

The terminal sequences its children automatically. Each TypingAnimation or AnimatedSpan starts when the previous finishes. Manual delay props are optional and typically unnecessary.

Props

Terminal

Prop	Type	Default	Description
`children`	`ReactNode`	`-`	Terminal content: a list of `TypingAnimation`/`AnimatedSpan`.
`className`	`string`	`-`	Custom CSS class for styling.
`sequence`	`boolean`	`true`	Enable auto sequencing so each line starts after the previous.
`startOnView`	`boolean`	`true`	Start sequencing when the terminal enters the viewport.

AnimatedSpan

Prop	Type	Default	Description
`children`	`ReactNode`	`-`	Content to be faded in.
`className`	`string`	`-`	Custom CSS class for styling.
`delay`	`number`	`0`	Delay in ms before animation starts (used when `sequence` is `false`).
`startOnView`	`boolean`	`false`	If `true`, waits for viewport visibility before animating when unsequenced.

TypingAnimation

Prop	Type	Default	Description
`children`	`string`	`-`	Text to be typed.
`className`	`string`	`-`	Custom CSS class for styling.
`duration`	`number`	`60`	Milliseconds per character.
`delay`	`number`	`0`	Delay in ms before typing starts (used when `sequence` is `false`).
`as`	`React.ElementType`	`"span"`	The component type to render.
`startOnView`	`boolean`	`true`	If `true`, waits for viewport visibility before typing when unsequenced.

Tabs Text Animate

On This Page

Installation Examples Custom Delays Usage Props Terminal AnimatedSpan TypingAnimation

Contribute

Terminal

An implementation of the linux terminal. Used for showcasing a command line interface.

Open in

✔ Scaffolding project in /path/to/my-app...
✔ Done. Now run:
npm install
npm run dev
📁 Created files:- src/App.tsx- vite.config.ts- tsconfig.json

import {
  AnimatedSpan,
  Terminal,
  TypingAnimation,
} from "@/registry/ebonui/terminal"

export function TerminalDemo() {
  return (
    <Terminal>
      <TypingAnimation>
        &gt; npx create-vite@latest my-app --template react-ts
      </TypingAnimation>

      <AnimatedSpan className="text-green-500">
        ✔ Scaffolding project in /path/to/my-app...
      </AnimatedSpan>

      <AnimatedSpan className="text-green-500">✔ Done. Now run:</AnimatedSpan>

      <AnimatedSpan className="ml-4 text-green-500">npm install</AnimatedSpan>

      <AnimatedSpan className="ml-4 text-green-500">npm run dev</AnimatedSpan>

      <AnimatedSpan className="text-blue-500">
        <span>📁 Created files:</span>
        <span className="block pl-2">- src/App.tsx</span>
        <span className="block pl-2">- vite.config.ts</span>
        <span className="block pl-2">- tsconfig.json</span>
      </AnimatedSpan>

      <TypingAnimation className="text-muted-foreground">
        Your Vite + React + TypeScript project is ready!
      </TypingAnimation>

      <TypingAnimation className="text-muted-foreground">
        Navigate to the project and start building.
      </TypingAnimation>
    </Terminal>
  )
}

Installation


pnpm dlx shadcn@latest add https://ebonui.com/r/terminal.json

Examples

Custom Delays

Open in

On branch main
Your branch is up to date with origin/main.
Changes not staged for commit:
modified: src/components/Button.tsx
[main abc1234] Update Button component
1 file changed, 5 insertions(+), 2 deletions(-)

import {
  AnimatedSpan,
  Terminal,
  TypingAnimation,
} from "@/registry/ebonui/terminal"

export function TerminalDemo2() {
  return (
    <Terminal>
      <TypingAnimation delay={0}>$ git status</TypingAnimation>

      <AnimatedSpan delay={800} className="text-green-500">
        On branch main
      </AnimatedSpan>

      <AnimatedSpan delay={1000} className="text-green-500">
        Your branch is up to date with origin/main.
      </AnimatedSpan>

      <AnimatedSpan delay={1200} className="text-blue-500">
        Changes not staged for commit:
      </AnimatedSpan>

      <AnimatedSpan delay={1400} className="ml-4 text-blue-500">
        modified: src/components/Button.tsx
      </AnimatedSpan>

      <TypingAnimation delay={2000}>$ git add .</TypingAnimation>

      <TypingAnimation delay={2800}>
        $ git commit -m Update Button component
      </TypingAnimation>

      <AnimatedSpan delay={3600} className="text-green-500">
        [main abc1234] Update Button component
      </AnimatedSpan>

      <AnimatedSpan delay={3800} className="text-green-500">
        1 file changed, 5 insertions(+), 2 deletions(-)
      </AnimatedSpan>
    </Terminal>
  )
}

Usage

import {
  AnimatedSpan,
  Terminal,
  TypingAnimation,
} from "@/components/ui/terminal"

<Terminal>
  <TypingAnimation>pnpm dlx shadcn@latest init</TypingAnimation>
  <AnimatedSpan>✔ Preflight checks.</AnimatedSpan>
  <AnimatedSpan>✔ Validating Tailwind CSS.</AnimatedSpan>
  <TypingAnimation>Success! Project initialization completed.</TypingAnimation>
</Terminal>

The terminal sequences its children automatically. Each TypingAnimation or AnimatedSpan starts when the previous finishes. Manual delay props are optional and typically unnecessary.

Props

Terminal

Prop	Type	Default	Description
`children`	`ReactNode`	`-`	Terminal content: a list of `TypingAnimation`/`AnimatedSpan`.
`className`	`string`	`-`	Custom CSS class for styling.
`sequence`	`boolean`	`true`	Enable auto sequencing so each line starts after the previous.
`startOnView`	`boolean`	`true`	Start sequencing when the terminal enters the viewport.

AnimatedSpan

Prop	Type	Default	Description
`children`	`ReactNode`	`-`	Content to be faded in.
`className`	`string`	`-`	Custom CSS class for styling.
`delay`	`number`	`0`	Delay in ms before animation starts (used when `sequence` is `false`).
`startOnView`	`boolean`	`false`	If `true`, waits for viewport visibility before animating when unsequenced.

TypingAnimation

Prop	Type	Default	Description
`children`	`string`	`-`	Text to be typed.
`className`	`string`	`-`	Custom CSS class for styling.
`duration`	`number`	`60`	Milliseconds per character.
`delay`	`number`	`0`	Delay in ms before typing starts (used when `sequence` is `false`).
`as`	`React.ElementType`	`"span"`	The component type to render.
`startOnView`	`boolean`	`true`	If `true`, waits for viewport visibility before typing when unsequenced.

Tabs Text Animate

On This Page

Installation Examples Custom Delays Usage Props Terminal AnimatedSpan TypingAnimation

Contribute