Code block

Present code with legible hierarchy and copy access.

Library

Arc Library

Framework

React

Type

ui

License

MIT

Dependencies

lucide-react, motion

Install

npx shadcn@latest add https://uiarc.dev/r/code-block.json

Files

• registry/components/code-block/code-block.tsx
• registry/components/code-block/code-block.module.css
• registry/components/copy-button/copy-button.tsx
• registry/components/copy-button/copy-button.module.css
• lib/use-copy-feedback.ts
• registry/motion-tokens.ts
• lib/motion-tokens.ts

Source

https://github.com/kuratlielia/arc-library

Categories

• Code Block Components
• React Code Block Components
• Animated Code Block Components
• Dev Tool Components
• React Dev Tool Components
• Animated Dev Tool Components

More from Arc Library

• Accordion
• Action button
• Action swap
• Activity heatmap
• Alert
• Animated counter
• Announcement bar
• Avatar
• Avatar group
• Badge
• Bar chart
• Billing toggle