shadcn.io is not affiliated with official shadcn/ui
CLI Output Changelog Block for Svelte
One command in a terminal window whose output switches between text, JSON and Markdown over the same five releases, with a Copy button for the command and an exit status.
Installation
Overview
A CLI-output changelog for Svelte with Ark UI, written for Shellwise, a fictional release CLI. A centred header and a Text, JSON and Markdown switch sit over a framed terminal window. The window shows the command shellwise changelog --since v2.0 on a prompt line with a Copy button, then its output in the chosen format, then the exit status. All three formats are built from the same five releases, so what you read in one is what the others say. The window is dark by nature, like any terminal, and keeps its own dark scope while the block around it follows your theme. It's built from Segment Group, Copy Button and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For command-line tools, release tooling and docs that show what a command prints. The command and its output are example data; nothing runs.
FAQ
How do I change the command and the releases?
Edit COMMAND and ENTRIES at the top of the file. An entry has a version, an ISO date, a type and a title. The Text, JSON and Markdown outputs, and the count in the text header, are all built from ENTRIES at module scope, so one edit changes all three.
What happens when I switch the format?
The output changes to the chosen format and a polite status line says so ("JSON output shown."). The three outputs sit in one grid cell with the two not chosen unseen, so the window never changes height. The unseen ones are hidden from assistive technology and the tab order.
What does the Copy button copy?
The command, shellwise changelog --since v2.0, without the prompt sign, and it announces "Copied" politely. The output is not copied: it is plain text in a focusable region you can select.
Is the window dark in a light theme?
Yes, on purpose. A terminal is dark by nature, so the window keeps a dark scope (marked with a comment in the code) and the block around it follows your theme.
How does it fit on a phone and in a right-to-left layout?
On a phone the command and the output each scroll sideways in their own focusable region, so long lines stay on one line as a terminal draws them. The window and its text stay left to right in a right-to-left layout, because a terminal is, while the header and switch mirror.