# installation
Install terminal-kit in your project.
──
prerequisites
  • Node.js 18+
  • React 19+
  • A project with shadcn/ui initialized
──
full bundle
All eight components:
npx shadcn@latest add "https://www.terminal-kit.com/r/full-bundle.json"
──
single component
npx shadcn@latest add "https://www.terminal-kit.com/r/[component].json"
Replace [component] with one of: terminal-window, message, session-content, input, question-prompt, edit-block, thinking-indicator, stream-text.
──
font
Terminal components use your Tailwind font-mono stack (via --font-mono). shadcn init usually wires Geist Mono in app/layout.tsx; if text looks like the wrong face, add a mono font there and map --font-mono in globals.css.
import { Geist_Mono } from "next/font/google"

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
})

// In layout: className={`${geistMono.variable} ...`}

// In globals.css @theme inline:
// --font-mono: var(--font-geist-mono);
──
usage
Import from @/components/terminal-kit after a full bundle install. See theming.md for appearance and dark/light mode.
import {
  TerminalWindow,
  Input,
  InputLevelMeta,
} from "@/components/terminal-kit"

export function AgentShell() {
  return (
    <TerminalWindow
      path="projects/main malayvasa/folder"
      showTrafficLights
      footer={
        <Input
          showCursor
          placeholder='Try "how does <filepath> work?"'
          metaLeft="? for shortcuts · ← for agents"
          metaRight={<InputLevelMeta />}
        />
      }
    >
      {/* agent content */}
    </TerminalWindow>
  )
}