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 TerminalDemo() {
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">
{`$ pnpm dlx shadcn@latest add @mdxcn/callout
✓ registry/default/callout/callout.tsx
✓ registry/default/graph-frame/graph-frame.tsx
2 files written, 0 conflicts`}
</Terminal>
</div>
</div>
);
}
Dependencies
More by keshav-exe
View all
Callout