Terminal

Special

Interactive retro terminal with command execution, history, and auto-completion.

Import

import { PixelTerminal } from "@/components/ui/pixel/pixel-terminal"

Usage

Pixel Terminal v1.0 Type 'help' for available commands. Try: hello, info, joke
user@pixel:~$_

Component Source

Copy and paste the following code into your project at /src/components/ui/pixel/pixel-terminal.tsx

"use client";

import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "@/lib/utils";

const pixelTerminalVariants = cva(
  "relative w-full border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] font-mono overflow-hidden",
  {
    variants: {
      variant: {
        default: "bg-black text-[#00ff00]",
        amber: "bg-black text-[#ffb000]",
        white: "bg-black text-white",
        matrix: "bg-black text-[#00ff00]",
        retro: "bg-[#000080] text-white",
      },
      size: {
        sm: "min-h-[200px] text-xs",
        md: "min-h-[300px] text-sm",
        lg: "min-h-[400px] text-base",
        xl: "min-h-[500px] text-base",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "md",
    },
  },
);

export interface Command {
  command: string;
  output?: string | React.ReactNode;
  error?: boolean;
}

export interface PixelTerminalProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof pixelTerminalVariants> {
  prompt?: string;
  welcomeMessage?: string | React.ReactNode;
  commands?: Record<string, (args: string[]) => string | React.ReactNode>;
  history?: Command[];
  onCommand?: (command: string, args: string[]) => void;
  showCursor?: boolean;
  typingSpeed?: number;
}

const PixelTerminal = React.forwardRef<HTMLDivElement, PixelTerminalProps>(

// ... (more code below)

Props

PropTypeDefaultDescription
variant"default" | "amber" | "white" | "matrix" | "retro""default"Terminal color scheme
size"sm" | "md" | "lg" | "xl""md"Terminal size
promptstring"user@pixel:~$"Command prompt text
welcomeMessagestring | ReactNode-Message shown on terminal start
commandsRecord<string, Function>-Custom command handlers
onCommand(command: string, args: string[]) => void-Command execution callback
showCursorbooleantrueShow blinking cursor

Examples

Matrix Terminal

Green matrix-style terminal

Pixel Terminal v1.0 Type 'help' for available commands. Try: hello, info, joke
user@pixel:~$_

Custom Commands

Terminal with custom commands

Pixel Terminal v1.0 Type 'help' for available commands. Try: hello, info, joke
user@pixel:~$_

Portfolio Terminal

Interactive portfolio showcase

Pixel Terminal v1.0 Type 'help' for available commands. Try: hello, info, joke
user@pixel:~$_

Accessibility

This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.