shadcn.io is not affiliated with official shadcn/ui
Terminal Command Showcase Features Block for Vue
A features section for a command-line tool: four tabs (Deploy, Build, Test, Log) swap a dark terminal session typed out once, with commands, output and exit status, above three cells with overshoot that each carry a small chip.
Installation
Overview
A features section for Vue with Ark UI, where a CLI shows the commands people actually run. A centred header sits over four tabs, Deploy, Build, Test and Log, for Termwise, a build-and-deploy command-line tool. Choosing a tab swaps the session in a terminal held in a framed figure: a few commands after a $ prompt with their output and their exit status, typed out by the catalog's Terminal Text. The Test tab shows a run that fails with exit 1, because a tool that only ever succeeds isn't believable. Below it, three cells with overshoot, each led by a small chip, say what makes the tool easy to adopt: the one-line install, the JSON output and the CI steps. The terminal is dark by nature and the only dark part; the block follows your theme around it. For CLIs, developer platforms and any product with a terminal at its heart.
FAQ
How do I change the commands?
Edit SETS at the top of the file. Each tab has an id, a label and a session: a block of text where a line starting with $ is a command, typed after the prompt, and any other line is output, printed whole. Keep lines to about 40 characters so they fit a phone, and each session to about a dozen lines so it fits the terminal's fixed height. TRAITS holds the three cells under it.
How does the typing work, and what about reduced motion?
It's CSS only: every character, line and caret is in the page from the start and shown by an animation at its moment, so nothing resizes while it plays. A session types once each time its tab opens (the tab's panel is created when you open it) and ends on a blinking prompt. With reduced motion, or without scripting, the whole session is simply there. A screen reader reads the session once, as plain text.
Why is the terminal dark in a light theme?
A terminal is dark by nature, and a dark window reads at once as one. Only that window takes the dark scope; the header, tabs, chips and cells follow your theme, in light and in dark. If you want a themed terminal, remove the dark class on the window.
How do the tabs work from the keyboard?
They are real tabs, a list named Command set with a panel for each. Tab moves into the list, the arrow keys move between Deploy, Build, Test and Log and open each one as they go, and Tab again moves into the open panel. Every panel has the same fixed height, so a longer session can't push the cells below it.