Terminal

A typing terminal and an inline typewriter for rotating headlines.

~/code/nightshift

# add a sign to the landing page
$ npx shadcn@latest add @neonkit/neon-sign
Checking registry dependencies...
Created components/ui/neon-sign.tsx
Done. 1 component added.
$ npm run dev
Ready on http://localhost:3000 in 412ms

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/terminal.json

Usage

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

<Terminal
  title="~/app"
  lines={[
    { kind: "input", text: "npm run build" },
    { kind: "success", text: "Compiled in 4.2s" },
  ]}
/>

<h1>Neon UI for <Typewriter words={["dashboards", "landing pages"]} /></h1>

Examples

Typewriter

Rotating words for a headline.

Errors and a custom prompt

Without loop, a Replay button appears in the title bar when the session ends.

API reference

Terminal

Also accepts native div attributes.

Prop	Type	Default
`lines`	`TerminalLine[]` The session, in order.	None
`title`	`ReactNode` Shown in the title bar.	None
`typingSpeed`	`number` Milliseconds per typed character, with a little human jitter.	`35`
`loop`	`boolean` Start over 3s after the last line.	`false`
`startOnView`	`boolean` Wait until it scrolls into view before typing.	`true`
`prompt`	`string` Printed before every input line.	`"$"`
`color`	`NeonColor` Prompt and caret color.	inherited
`onDone`	`() => void` Called when the last line has printed: once per run, once per pass when looping, and right away under reduced motion.	None

TerminalLine

Prop	Type	Default
`kind`	`"input" \| "output" \| "success" \| "error" \| "comment"` input is typed after the prompt; the others print in their own color.	None
`text`	`string` The line. Long lines wrap at the terminal's edge.	None
`delay`	`number` Milliseconds to wait before this line. Defaults to a short think before input and a beat after it.	None

Typewriter

Also accepts native attributes for the element it renders.

Prop	Type	Default
`words`	`string[]` Typed, held, deleted and replaced in turn.	None
`loop`	`boolean` Keep rotating. When false it stops on the last word.	`true`
`cursor`	`boolean` A lit caret after the word.	`true`
`typeSpeed`	`number` Milliseconds per typed character.	`70`
`deleteSpeed`	`number` Milliseconds per deleted character.	`40`
`pause`	`number` Milliseconds a finished word stays up.	`1800`
`as`	`"span" \| "p" \| "div" \| "h1" \| "h2" \| "h3" \| "h4"` Element to render.	`"span"`
`color`	`NeonColor` Word and caret color.	inherited

Accessibility

The terminal renders the whole transcript once for screen readers, so nothing is announced per character.
Typewriter gives screen readers all its words as one phrase instead of the one currently on screen.
Space for every line is reserved up front, so the terminal doesn't grow while it types.
Under reduced motion the terminal shows the finished session, and Typewriter swaps words without typing them.