design-infraReport a problem or share feedback← Catalog
Code Block
freebeui/code-block
A syntax-highlighted code surface with stable streaming updates, line numbers, focused lines, smooth following, and copy feedback.
drop-inTechnicalTrustworthyRefined
$
npx shadcn@latest add @beui/code-blocknpm deps: clsx, lucide-react, motion, shiki, tailwind-merge
- Source
- beUI (free)
- Kind
- component
- Categories
- agent-ui, code
- Use as
- drop-in — replaces your component
- Applies to
- agent-uicode
- Motion
- not tagged (static or unknown)
- Tags
- react, tailwind-v4, motion, agents
- Licence
- MIT — Copyright (c) 2026 Saurabh Chauhan; retain the upstream notice when copying source.
- Live demo
- beui.dev
- Docs
- beui.dev
Similar
Compare all 4 →- Code Blockbeautifui/code-blockA line-numbered listing and a unified diff.
- Beam cardoc/beam-card♥ The user explicitly asked to keep Beam Card in the homepage examples while replacing the underwhelming loader. Retain its subtle beam emphasis.
- Diff Tablebeautifui/diff-tableRow-level diff table for agent-proposed data changes. Requires the Beautiful UI foundation.css, which redefines --accent (collides with shadcn).