12 public components here have terminal in the name, and almost all of them are pictures of a terminal rather than terminals. That is the right call. The moment a terminal component is real you own a shell, a socket and a security question; as a picture it is a code block with window chrome and a typing animation.
The components
TerminalBentoGrid is the most-taken one, a CRT-styled grid that borrows the terminal look for a bento layout. Animated Terminal and Terminal are the straightforward versions with macOS window chrome and typed output, and TerminalScreen is Ruixen's.
Great UI Terminal Loader and Terminal Decode Loader use the aesthetic for waiting rather than for output, which the loader guide covers, and Hover Terminal turns a button into a CLI snippet on hover.
Terminal Pikachu is the ASCII end of the same idea.
The command has to be copyable
This is the failure that matters, and nearly every animated terminal has it. A command rendered one character at a time by JavaScript is often not selectable text by the time it finishes, so the reader retypes it. If your terminal exists to show an install command, that defeats the entire component.
The fix is to render the full command as text and animate its visibility, then put a copy button on it. Both halves are cheap and the second one is what people actually use.
The other two obligations
Typing animations respect prefers-reduced-motion. A cursor that blinks forever and text that types itself are exactly the motion that setting exists for, and the fallback is simply the finished text, which is also the better default.
A fake terminal must not lie about output. Showing a build that succeeds in four seconds with no warnings is a screenshot of a claim. If the output is illustrative, it can look illustrative; what it cannot do is invent numbers.
The typography is the component
A terminal set in your body font is not a terminal. Use a real monospace stack, keep the line height tight, and set font-variant-numeric: tabular-nums so output columns line up.
ANSI colours are the other half. The traditional green-on-black has poor contrast at small sizes, and a terminal dropped into a light theme with its colours unchanged is unreadable. Pick the palette from your tokens like anything else, per the theming guide, and check it in both themes.
When you want a real one
xterm.js is the answer, and it is a different project: a websocket to a pty on your server, an input path you have to sandbox, and a component that is now the least of the work. Nothing in this family is a substitute for it, and nothing here pretends to be.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
A pre with a copy button | Showing one command, which is the common case | Not animated, which is usually fine |
| asciinema | A recording of a real session | A player and a cast file |
| xterm.js | An actual terminal in the browser | A server process and a security model |
| 21st | The decorative versions, with previews | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue.
Frequently asked
- Should a terminal component be a real terminal?
- Almost never. A real one means xterm.js, a websocket to a pty on your server, and an input path you have to sandbox, which is a project rather than a component. As a picture it is a code block with window chrome and a typing animation.
- What is the commonest bug in an animated terminal?
- The command is not selectable text. Rendered one character at a time by JavaScript, it often cannot be copied by the time it finishes, so the reader retypes it, which defeats the entire component. Render the full command and animate its visibility, then add a copy button.
- Do typing animations need a reduced-motion fallback?
- Yes. A blinking cursor and self-typing text are exactly what prefers-reduced-motion exists for, and the fallback is simply the finished text, which is the better default for anyone who came to read the command.
- What makes a terminal look like a terminal?
- A real monospace stack, tight line height and tabular numerals so output columns align. The traditional green on black has poor contrast at small sizes, and a terminal dropped into a light theme with its colours unchanged is unreadable, so the palette comes from your tokens.