Dev Design LibraryCode Block Components
Dev Design Library indexes 82 code block components from 35 open-source UI libraries, with the most coming from ReUI, Halaska UI, Shadcn Space, Lobe UI and Watermelon UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Code block components belong to the Developer tools group.
Code SlotsReact Bits · ReactOne-time-code input where a hidden overlay input owns focus, paste and SMS autofill while each slot lands its digit on…
CodeChakra UI · ReactUsed to display inline code
Code ComparisonMagic UI · ReactA component which compares two code snippets.
Code BlockCult UI · ReactA beautiful code block component with tabs, copy functionality, and smooth animations
Basic code blockReUI · ReactCode block with header, filename, language and copy button.
AI Response Stream & Code BlockAmicro Micro Transitions · ReactTerminal-like AI code stream card featuring branch revision navigation, instant copy with tactile haptics, and…
Code BlockAI Elements · ReactProvides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks.
CodePark UI · ReactA typography component for displaying inline code snippets.
HighlighterLobe UI · ReactThe Highlighter component is used to display syntax-highlighted code blocks with powerful features like code copying…
AI Code RunKokonut UI · ReactThe assistant runs a short Python script in the reply. A marker steps down the lines, the output prints, and the chart…
snippetIntent UI · Reactsnippet
Code BlockbeUI · ReactProvides the shared syntax presentation for source lines.
Code BlockRare UI · ReactA clean code block that builds its entire theme from a single accent color. Pass code and a hex, it does the rest.
Code BlockSpectrum UI · ReactAn AI code block with a file header, copy, and line collapse.
Code BlockPanel UI · React NativeA fenced snippet, syntax-coloured and scrolled sideways.
Code Block 01 - DefaultShadcn Space · ReactSyntax-highlighted code block with filename header and copy button
TerminalAnimations (Svelte) · SvelteA terminal-like UI component with typing animations, sequence control, and intersection observer support.
CodeAI Elements (Svelte) · SvelteA syntax-highlighted code block with overflow handling and a copy action.
Scrambled Install CommandGreatUI · React
Code BlockAI CSS · React
Code BlockSona UI · ReactA plug-and-play syntax-highlighted code block for documentation and developer interfaces.
CodeWatermelon UI · React
Code blockArc Library · ReactPresent code with legible hierarchy and copy access.
Glass Code Block Commandglasscn · ReactGlass Code Block Command with five variants: clear, frosted, subtle, liquid, and liquid-refract
Code BlockUI Lab · ReactSwitch files with a sliding underline and copy with one click.
Code BlockLocalMode · ReactSyntax-highlighted code (lazy Shiki, plain-pre fallback) with a language label and a copy-to-clipboard control.
Code blockCojeev UI · ReactDisplays a code snippet with an optional caption, language label, wrapping, and copy feedback.
Code BlockVelora UI · ReactCode panel with tabs, line numbers, highlighted lines and a copy button.
Artifact PatternHalaska UI · React
Code Snippet With Language Selectorsv-particles · Svelte
CodeSpaceUI · React
Code BlockEaseUI · ReactA code block with a label, a copy button, and light coloring for keywords, strings, comments and numbers, with no…
Glass Code BlockOpaline · ReactSyntax-highlighted code in a glass window, with tabs, line numbers, highlighted lines and copy.
Code BlockReactFrame · ReactA syntax-highlighted code block with line numbers, per-line highlighting, a filename/language header, a copy button…
Code BlockAceternity UI · React
Code BlockChakra UI · ReactUsed to display and highlight dynamic code blocks
TerminalMagic UI · ReactA terminal component
Terminal AnimationCult UI · ReactComposable terminal animation primitives with typed command playback, tabbed scenarios, and customizable output…
Long file with expandReUI · ReactCollapsed at a line budget with an expand control and a line offset.
SnippetAI Elements · ReactLightweight inline code display for terminal commands and short code references.
SnippetLobe UI · ReactThe Snippet component is used to display a code snippet with syntax highlighting. It can be customized with a symbol…
Agent CodebeUI · React
Inline CodeSpectrum UI · Reactcomponent for the Inline Code
Code Block 02 - ScrollableShadcn Space · ReactScrollable code block with line numbers and fixed max height
Code BlockWatermelon UI · React
Code Block Commandglasscn · React
Code MorphUI Lab · ReactGlides every surviving token to its new spot as a tutorial moves to the next step.
Component previewCojeev UI · ReactPairs a live component example with a code view and a copy action.
CodeHalaska UI · React
Glass SnippetOpaline · ReactA command on a glass capsule with copy, and tabs for npm, pnpm, yarn and bun.
Line actions and diagnosticsReUI · ReactError and warning lines with an action button on the active line.
Awesome Code ShowcaseLobe UI · React
Code Block 04 - Highlighted LineShadcn Space · ReactCode block with line numbers and amber highlighted line
Code TabsWatermelon UI · React
Code Block PatternHalaska UI · React
Line selectionReUI · ReactSelecting lines to ask an assistant about them.
Code Block 05 - Multi FileShadcn Space · ReactCode block with switchable file tabs, line numbers, and scrollable content
SnippetHalaska UI · React
Search in fileReUI · ReactLive search marking every match, with a counter that reads the block through useCodeBlockConfig.
File tabs in a dense frameReUI · ReactA framed file switcher loading one grammar chunk per selected language.
Pre-highlighted linesReUI · ReactLines built without shiki, the shape a server component passes down.
Before and afterReUI · ReactTwo blocks stacked in a frame for a refactor review.
Soft wrapReUI · ReactLong single-line content with a wrap toggle.
Unified patch reviewReUI · ReactA git patch parsed into files with dual old/new gutters, counters and a download.
Design-token themeReUI · ReactSyntax colors driven by CSS variables mapped to design tokens.
Pinned copy buttonReUI · ReactHeaderless block with a pinned copy button and dual-axis scrolling.
Always-dark blockReUI · ReactA block that stays dark in both site themes, with window chrome and every line state.
Dark terminalReUI · ReactANSI-style colored terminal output built from plain lines.
Patch review actionsReUI · ReactAgent-proposed diff with accept and reject actions.
Nested code foldingReUI · ReactFold regions detected from indentation, with nesting and fold-all controls.
Fix with AI on the failing lineReUI · ReactA line action scoped to the diagnostic line that applies the patch.
Reference lines in chatReUI · ReactA gutter button that turns lines or a selection into file:line reference badges in a chat composer.
Framed by an external ScrollAreaReUI · ReactA changed-file list where one shadcn ScrollArea scrolls every block at once.
ANSI terminal outputReUI · ReactAgent stdout with SGR colour codes parsed by ansiToLines, retintable via --code-ansi-* variables.
Streaming agent responseReUI · ReactAgent writing code in real time with a caret and stick-to-bottom.
AI chat with code fencesReUI · ReactStreaming assistant message rendering markdown code fences.
Diff with change summaryReUI · ReactA props-driven diff with added and removed lines and a change summary.
Diff via shiki transformersReUI · ReactA diff expressed through a shiki transformer instead of props.
Highlighted lines and wordsReUI · ReactLine ranges and word matches highlighted together.
Focus walkthroughReUI · ReactStepping through regions of a file with the rest dimmed.
Terminal outputReUI · ReactUnhighlighted command output with a wrap toggle.
Code BlockReUI · ReactA shadcn code block with Shiki syntax highlighting, streaming, diffs, code folding and per-line interaction for AI…