Terminal

Terminal renders a monospace prompt with a blinking block cursor. It is built for developer-facing UI: command runners, deploy logs, local agents, test jobs, and any surface where CLI language is already part of the product.

import { Terminal } from "@/components/loading-ui/terminal";

export function TerminalDemo() {

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @loading-ui/terminal
Copy

Usage

Copyimport { Terminal } from "@/components/loading-ui/terminal";

Copy<Terminal prompt="$" />

Customization

Terminal is intentionally small: the prompt and cursor inherit text color, and the cursor blink can be tuned with a CSS time value.

Prompt

Use the prompt that matches your command surface.

import { Terminal } from "@/components/loading-ui/terminal";

export function TerminalPrompt() {

Color

The prompt and cursor inherit currentColor, so contextual foreground utilities are enough.

import { Terminal } from "@/components/loading-ui/terminal";

export function TerminalColor() {

Duration

Set --duration to speed up or slow down the block cursor blink.

import { Terminal } from "@/components/loading-ui/terminal";

export function TerminalDuration() {

Examples

These examples keep the component close to CLI states instead of using it as a generic spinner.

Button

Buttons work well for command actions that are already running.

import { Button } from "@/components/ui/button";
import { Terminal } from "@/components/loading-ui/terminal";

Badge

Badges can mark shell, log, or command status without taking much horizontal space.

import { Badge } from "@/components/ui/badge";
import { Terminal } from "@/components/loading-ui/terminal";

Input Group

Command inputs can use the prompt as a leading addon and text status on the trailing edge.

import {
  InputGroup,
  InputGroupAddon,

Alert

Alerts give command runners enough room to explain what is still happening.

import {
  Alert,
  AlertDescription,