Tailwind CSS Dev Tool Components

Dev Design Library indexes 130 Tailwind CSS dev tool components from 37 open-source UI libraries, with the most coming from ReUI, LocalMode, Notra, Shadcn Space and Spectrum UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list styles its components with Tailwind CSS utility classes.

Showing 120 of 130, a mix from every library. Open a library to see all of its components.

• DiffdaisyUI · CSS (Tailwind)
• 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.
• 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
• 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 BlockSona UI · ReactA plug-and-play syntax-highlighted code block for documentation and developer interfaces.
• CodeWatermelon UI · React
• 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.
• Code Snippet With Language Selectorsv-particles · Svelte
• Rename editorMetal UI · React + SwiftUIA name field and one async rename confirm: basename selection, host validation, pending lock, glyph/drum result and…
• 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.
• 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
• 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.
• 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
• 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
• 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.
• 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.
• 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
• 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.
• 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.
• 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
• 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.
• 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.
• 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
• 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…
• 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.
• Service Status FooterSpectrum UI · ReactThirty days of per-service uptime bars with a rolling incident ticker.
• Code Block 07 - Install CommandShadcn Space · ReactPackage manager install command tabs (pnpm, npm, yarn, bun) with copy button
• Codex TerminalNotra · ReactThe Codex window: a title bar, a scrolling transcript and a pinned footer for the prompt.
• Uptime BarUI Lab · ReactPoint at any day and the row's own caption tells you what happened.
• Event Log ViewerLocalMode · ReactNewest-first devtools event log: relative timestamps (absolute on hover), namespace-colored type badges…
• Pre-highlighted linesReUI · ReactLines built without shiki, the shape a server component passes down.
• TerminalAI Elements · ReactDisplay streaming console output with full ANSI color support.
• Waiting for EventsSpectrum UI · ReactA live endpoint waiting for its first delivery, with a test event that lands.
• Dashboard Shell 01Shadcn Space · ReactA modern dashboard shell with a sidebar and header, ideal for admin dashboards to organize and navigate through…
• OpenCodeNotra · ReactA recreation of an OpenCode terminal session with a transcript, the prompt and the sidebar.
• Inference Queue MonitorLocalMode · ReactPer-queue inference observability: one card per registered queue showing pending, active, completed, failed, and…
• Before and afterReUI · ReactTwo blocks stacked in a frame for a refactor review.
• Toggle 08 - Editor View OptionsShadcn Space · ReactCode editor toolbar with word wrap, line numbers, and active line highlight toggles that update the code preview.
• OpenCode ComposerNotra · ReactThe prompt panel with agent, model, provider and effort, over a status row with the busy scanner, context and shortcuts.
• Model Cache TableLocalMode · ReactCached-model observability table: model ID (monospace, truncated), status badge (loaded/loading/error), load duration…
• Soft wrapReUI · ReactLong single-line content with a wrap toggle.
• OpenCode WindowNotra · ReactThe OpenCode terminal surface that sets the background, monospace font and line grid.
• Pipeline Run InspectorLocalMode · ReactPer-run pipeline observability cards: status badge (running pulses on primary, completed emerald, failed destructive)…
• 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.

Libraries with Tailwind CSS dev tool components

• ReUI
• LocalMode
• Notra
• Shadcn Space
• Spectrum UI

Related categories

• Dev Tool Components
• React Dev Tool Components
• Animated Dev Tool Components
• shadcn/ui Dev Tool Components
• Tailwind CSS Code Block Components
• Tailwind CSS Terminal Components
• Tailwind CSS Diff Viewer Components
• Tailwind CSS Log Viewer Components
• Tailwind CSS Code Editor Components
• Tailwind CSS Package Install Components