Terminal Text Component

Terminal Text

Typewriter-style terminal text loop with blinking cursor and optional prefix.

Preview

Installation

1. Run the following command in your terminal:

npx shadcn@latest add https://refinery.abhii.me/r/terminal-text.json

API Reference

Component props
Name	Type	Description
texts	string[]	List of strings to type through in sequence.
className	string	Additional CSS classes for the wrapper.
prefix	string	Optional prefix shown before the typed text, e.g. '$ ' or '> '. Default is no prefix.

Usage Recommendations

Keep phrases short for smooth typing loops.

Works well as a hero subline or CLI themed accent.

When installing shadcn, you can choose the 'nova' preset (lucide/geist) to match the intended typography.

Design Notes

I track the current phrase, visible character length, and deleting state, then use timed updates to simulate typing, pausing, and deleting. The cursor is a Motion element with a simple opacity blink. You can pass your own phrases and prefix, or let it fall back to the built-in defaults for a quick CLI-style accent.