Code Block
Command Output
A command and its output in one block: separate surfaces keep what you type apart from what the system answers, and the exit code sits in the footer.
What you can change
- the command through command and the output through output
- the exit code through exitCode
- the duration through duration
A link for your AI agent: preview, code and instructions.
Preview
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this on the home page as the hero:
https://vibeui.ru/c/codeblock-012?lang=en&theme=dark
Not sure where to paste it? Step-by-step guide
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
Loading…
For developers
The install command lives in the “Component source” block below — a signed link that stays valid for 24 hours.
Technical notes
The component is self-contained: one file, zero dependencies, its own palette in the local --vibeui-codeblock-012-* variables. Server component: no hooks. The command and the output live in two separate pre elements with different surfaces, so a mouse selection does not mix the input with the response. The prompt is printed by the command's ::before and marked user-select: none. The exit code decides the colour of the badge in the footer: zero is coloured as success and any other number as an error, so the status cannot be set by hand in contradiction to the number. The theme comes from the surrounding color-scheme through light-dark(): the block has no surface by default, the output is separated from the command by a translucent overlay, and the difference is visible in both themes.
Tags
- terminal
- output
- exit-code
- log
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…