About
A stylized shell/terminal session block for docs and MDX that renders `$` command lines, comments, success checks and output with a subtle line-by-line reveal animation.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Terminal to your project and fits it to your theme.
Code
How Terminal is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { Terminal } from "@/components/ui/terminal";
export default function TerminalCommentOutputDemo() {
return (
<div className="flex w-full items-center justify-center bg-background p-8 text-foreground">
<div className="w-full max-w-xl">
<Terminal title="shell">
{`# run the suite once
> pnpm test
RUN v3.2.7
✓ lib/http/accept.test.ts (12)
✓ lib/agent/copy.test.ts (4)
Test Files 2 passed (2)`}
</Terminal>
</div>
</div>
);
}
Dependencies
More by keshav-exe
View all
Callout