fetaUI
GitHub

Code Output

A command and its output, streaming while it runs, then a settled mark.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/code-output
Playground
Ran node --version0.2s

$ node --version

v22.11.0

running
Running node --version2.1s

$ node --version

…

done
Ran node --version0.2s

$ node --version

v22.11.0

failed
Failed to run pnpm dev0.8s

$ pnpm dev

Error: Cannot find module 'next'

Require stack: /app/node_modules/.bin/next

Exit code 1

State
Icons animation
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/code-output

Accessibility

  • The body is a log and sets aria-busy while running.

Motion

  • Lines rise 4 px and stagger by 40 ms.
  • The mark scales from 0.6 in 240 ms. Failed tints the card.
  • With reduced motion, lines appear at once. The spinner slows: it shows status.

Responsive behavior

  • The command truncates and the duration stays.

Performance

  • Keep lines capped for long logs: every line renders, and each one fades in once through Motion. The stagger stops growing after 8 lines.
  • Line keys combine index and text, so earlier lines do not animate again.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import CodeOutput. Props: state (running, done, failed), command, duration, lines, footer, animated.
  • It renders role="log" with aria-busy while running.
  • It does not run anything. Feed it from your process and keep duration up to date.
/docs/components/code-output/markdown
PreviousCode Block
NextJSON View

Related

Code BlockComponentCode on the Soft tray: file name and Copy above, numbered lines in an inset card, with highlights and diffs.SpinnerComponentSays something is happening when the wait is short or unknown. Four kinds at five sizes.TraceProComponentAgent steps. Trace Line is one call, Trace groups them on the tray, and Chain of Thought is the bare version for surfaces that have their own background.Request LogComponentOne request in mono, and a windowed list for live tails of any length.