Glass Terminal

Component 3

About

A macOS-style terminal window with a glass surface whose commands type themselves out and whose output lines fade in one after another as it scrolls into view.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Glass Terminal to your project and fits it to your theme.

Code

How Glass Terminal is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";

import {
  GlassTerminal,
  GlassTerminalLine,
  GlassTerminalTyping,
} from "@/components/ui/glass-terminal";

export default function GlassTerminalDemo() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <GlassTerminal title="~/my-app — zsh">
        <GlassTerminalTyping>
          npx shadcn@latest add @opaline/all
        </GlassTerminalTyping>
        <GlassTerminalLine className="text-[oklch(0.72_0.17_150)]">
          ✔ Checking registry.
        </GlassTerminalLine>
        <GlassTerminalLine className="text-[oklch(0.72_0.17_150)]">
          ✔ Installing dependencies.
        </GlassTerminalLine>
        <GlassTerminalLine className="text-[oklch(0.72_0.17_150)]">
          ✔ Created 50 files in components/ui/opaline
        </GlassTerminalLine>
        <GlassTerminalLine>&nbsp;</GlassTerminalLine>
        <GlassTerminalTyping>pnpm dev</GlassTerminalTyping>
        <GlassTerminalLine className="opacity-70">
          ▲ Ready on http://localhost:3000
        </GlassTerminalLine>
      </GlassTerminal>
    </div>
  );
}