Dev Design LibraryDev Tool Components
Dev Design Library indexes 167 dev tool components from 48 open-source UI libraries, with the most coming from ReUI, Halaska UI, LocalMode, Notra and Kinetics. Each one links to its page with the source code, a live preview where available, the library license and the install command.
Showing 120 of 167, a mix from every library. Open a library to see all of its components.
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…
DiffdaisyUI · CSS (Tailwind)
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
Json Tree ViewArk UI · ReactA component that displays JSON data in an interactive, collapsible tree structure.
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.
Code DiffLobe UI · ReactThe CodeDiff component is used to display code differences with syntax highlighting. It supports split and unified…
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.
Audit Log TableSpectrum UI · ReactA dense, pinned-header event log with actors, mono action names, IPs and severity levels.
Code Textarea ControlToolcraft · React
Code BlockPanel UI · React NativeA fenced snippet, syntax-coloured and scrolled sideways.
Button Group 10 - Editor ToolbarShadcn Space · ReactRich-text formatting toolbar button group component
Text Editor ItalicPixel Perfect · ReactSoft cream "Text Editor" mock with a neumorphic toolbar. The cursor drifts
Heartbeat MonitorKinetics · HTML/CSSGlowing dot traces an EKG along the path
Agent LogBoardUI · React
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.
Dashboard ShellObsidianUI · React
Claude CodeNotra · ReactA Claude Code terminal session with the compact header, tool calls, a running turn and the prompt, built from the…
Revision TimelineGreatUI · React
Clipboard FieldNexvyn UI · ReactA one-click install/copy field that morphs between the command and a success label using CSS grid fr tracks. JS only…
Json Tree ViewShark UI · ReactDisplay JSON data in an interactive, expandable tree.
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 Diff ViewerLocalMode · ReactA unified or side-by-side text/code diff of two local strings (before/after of redacted, translated, or transformed…
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
Chips EditorPin UI · React
Rename editorMetal UI · React + SwiftUIA name field and one async rename confirm: basename selection, host validation, pending lock, glyph/drum result and…
CodeSpaceUI · React
Morphing Pill Duration EditorCue Foundations · 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.
AI Edit ReviewReactFrame · ReactAn AI text editor that rewrites a selected passage, streams a word-level diff review with accept/reject actions, and…
Code BlockAceternity UI · React
Faulty TerminalReact Bits · ReactTerminal CRT scanline squares effect with flicker + noise.
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.
Mac TerminalAmicro Micro Transitions · ReactMac Terminal loading animation.
Package InfoAI Elements · ReactDisplay dependency information and version changes.
Code EditorLobe UI · ReactEdits code with syntax highlighting for multiple programming languages.
AI Diff ReviewKokonut UI · ReactA coding agent's edits streaming in file by file, then reviewed per file with accept, reject and undo.
File DiffbeUI · ReactExplains additions and removals around highlighted code.
Code BlockSpectrum UI · ReactAn AI code block with a file header, copy, and line collapse.
Markdown EditorPanel UI · React NativeA field for writing markdown, with a formatting toolbar and a rendered preview.
Code Block 01 - DefaultShadcn Space · ReactSyntax-highlighted code block with filename header and copy button
Lidar SweepKinetics · HTML/CSSA scan plane lights a point field into a depth map
Claude Code PromptNotra · ReactThe input between two rules with the permission mode, PR link and effort below.
Scrambled Install CommandGreatUI · React
Code BlockWatermelon UI · React
JSON viewerArc Library · ReactA collapsible JSON tree with search, paging for long arrays, and copy value or path.
Code Block Commandglasscn · React
Code MorphUI Lab · ReactGlides every surviving token to its new spot as a tutorial moves to the next step.
Data Extractor BlockLocalMode · ReactSchema-validated structured-data extraction from free text over its OWN on-device WebGPU-only WebLLM model (default…
Component previewCojeev UI · ReactPairs a live component example with a code view and a copy action.
Developer tool heroVelora UI · ReactMinimal hero on a retro grid with a typed headline accent, an install terminal and two CTAs.
Audit Log PatternHalaska UI · React
Diff ViewEaseUI · ReactA line-by-line diff with an added or removed mark in the gutter and a tinted row for each side. Renders a diff…
Glass SnippetOpaline · ReactA command on a glass capsule with copy, and tabs for npm, pnpm, yarn and bun.
Code BlockReactFrame · ReactA syntax-highlighted code block with line numbers, per-line highlighting, a filename/language header, a copy button…
TerminalAceternity UI · React
Line actions and diagnosticsReUI · ReactError and warning lines with an action button on the active line.
SandboxAI Elements · ReactA collapsible container for displaying AI-generated code and output in chat interfaces.
HighlighterLobe UI · ReactThe Highlighter component is used to display syntax-highlighted code blocks with powerful features like code copying…
AI State LoadingKokonut UI · ReactAgent progress as a list of steps with a live log, elapsed time and a summary when done.
Agent CodebeUI · React
Diff ViewSpectrum UI · ReactProposed file changes with per-file accept and reject.
Web InspectorPanel UI · React NativeA design inspector panel with alignment, color, fill, text and shadow controls.
Code Block 02 - ScrollableShadcn Space · ReactScrollable code block with line numbers and fixed max height
Packet TraceKinetics · HTML/CSSData pulses choose a route through a tiny network
Claude Code TerminalNotra · ReactThe terminal window with traffic lights and a title bar for Claude Code sessions.
Terminal LoaderGreatUI · React
Code TabsWatermelon UI · React
Easing EditorUI Lab · ReactDrag a cubic-bezier into shape and see it move.
DevTools Drawer BlockLocalMode · ReactA global on-device observability drawer: six tabbed surfaces (inference queues, event log, pipeline runs, model cache…
TerminalVelora UI · ReactA terminal window that types its lines in view.
Before After ToggleHalaska UI · React
Glass TerminalOpaline · ReactA macOS terminal on glass whose commands type themselves out, line by line, when scrolled into view.
TerminalReactFrame · ReactA macOS-style terminal window that types out a scripted sequence of commands, outputs and comments, with a blinking…
Line selectionReUI · ReactSelecting lines to ask an assistant about them.
Schema DisplayAI Elements · ReactDisplay REST API endpoint documentation with parameters, request/response bodies.
SnippetLobe UI · ReactThe Snippet component is used to display a code snippet with syntax highlighting. It can be customized with a symbol…
AI Tool CallsKokonut UI · ReactTool calls inside a chat reply. Each call streams in as one row with a live timer, then they fold into a single line…
Inline CodeSpectrum UI · Reactcomponent for the Inline Code
Code Block 04 - Highlighted LineShadcn Space · ReactCode block with line numbers and amber highlighted line
Reconciliation MergeKinetics · HTML/CSSCompeting values converge into one authoritative state
CodexNotra · ReactA full recreation of an OpenAI Codex CLI session built from the Codex components on shadcn Base UI.
TerminalWatermelon UI · React
Spring PlaygroundUI Lab · ReactTune a spring and watch its overshoot and settle, plotted live.
Code BlockLocalMode · ReactSyntax-highlighted code (lazy Shiki, plain-pre fallback) with a language label and a copy-to-clipboard control.
CodeHalaska UI · React
Search in fileReUI · ReactLive search marking every match, with a counter that reads the block through useCodeBlockConfig.
SnippetAI Elements · ReactLightweight inline code display for terminal commands and short code references.
Awesome Code ShowcaseLobe UI · React
Inline EditSpectrum UI · ReactA selection-anchored AI edit: suggestion toolbar, word diff, accept or reject.
Code Block 05 - Multi FileShadcn Space · ReactCode block with switchable file tabs, line numbers, and scrollable content
Signal BarsKinetics · HTML/CSSBars light up in sequence while connecting
Codex ComposerNotra · ReactThe prompt band with a block cursor, the model and directory status line and shortcut hints.
Stagger VisualizerUI Lab · ReactShows what per-item delay actually does to a list entrance.
Structured Output ViewerLocalMode · ReactA result panel for useGenerateObject extending Response: pretty-printed JSON, an independently-usable inference-stats…
Code Block PatternHalaska UI · React
File tabs in a dense frameReUI · ReactA framed file switcher loading one grammar chunk per selected language.
Stack TraceAI Elements · ReactDisplays formatted JavaScript/Node.js error stack traces with syntax highlighting and collapsible frames.
Awesome Install BannerLobe UI · React
Service Status FooterSpectrum UI · ReactThirty days of per-service uptime bars with a rolling incident ticker.