shadcn.io is not affiliated with official shadcn/ui
CLI Output Changelog Block for React
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 React with Base 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.
Related
- Pro
Event Stream Changelog
Deploys and rolloutsA split with a divider: a dark terminal window that plays a twelve-event log once, with the event type in words at the start of every line, and at the start the event types with their counts and a Replay button.
- Pro
Code Diff Changelog
Code and commitsA diffstat header with a drawn five-square glyph and a chip per file, over a framed code window that plays one function's change once and a Copy patch button.
- $Pro
Breaking Changes Changelog
APIs and integrationsA framed table of four breaking calls: the old call in a del row, the new in an ins row, who it affects and the day to migrate by, with a codemod command in a terminal strip and a Copy button.
- Pro
Package Changelog
Packages and versionsOne package's changelog behind a version select: its semver bump, release day, weekly downloads that count on to each version's figure, a Migration guide link, the install command with a Copy button and the changes in an accordion of groups.
- Pro
Commit Log Changelog
Code and commitsA git log of seven commits: a short hash with a Copy button for the full one, the commit type as a word, the message, an initials avatar and the day, with a Branch Select that swaps the list.
- Pro
Release Timeline Changelog
Lists and timelinesA release timeline for an API client: a compact header with a Subscribe link, then the latest four releases on a hairline rail with dots, each with its version, date, type tags, a linked title and its notes, and View all releases at the foot.