Developer tool UI components for React
Free React components for developer tools: code blocks, terminals, diffs, logs, stack traces, JSON viewers, CI pipelines, API keys, webhooks and status pages.
38 itemsFree, MITshadcn CLI compatibleTailwind CSS v4Light and dark
Developer products need interface that most kits skip: syntax highlighted code, diffs, logs that stream, stack traces, build pipelines and environment badges. These components are drawn with the same care as the rest of the kit.
Monospace data uses Geist Mono with tabular figures, and long output scrolls inside its own frame so pages stay stable.
Components 32
Api Key ListuiReact settings panel listing API keys with masked previews, created date badges and a rotate button per key, plus a header action to create a new key.npx shadcn@latest add ui.minidev.pro/r/api-key-list.jsonBuild PipelineuiCI pipeline view that shows each stage as a chip with success, running, failed or pending icons, joined by connectors. Status text is exposed to screen readers.npx shadcn@latest add ui.minidev.pro/r/build-pipeline.jsonCheck Run ListuiList of CI check runs with success, failed or running icons, monospaced job names and a status label. Looks like the checks section of a pull request.npx shadcn@latest add ui.minidev.pro/r/check-run-list.jsonCode BlockuiReact code block with zero dependency syntax coloring, a language tag, optional filename and line numbers, and a copy button that confirms Copied.npx shadcn@latest add ui.minidev.pro/r/code-block.jsonCode Editor FrameuiEditor style frame with a monospaced filename tab and a code area. Wrap snippets, editors or diffs so they read as a file in your React docs or app.npx shadcn@latest add ui.minidev.pro/r/code-editor-frame.jsonCommit RowuiGit commit row for React with author avatar, commit message, relative time, a short SHA badge and a copy button for the hash. Fits deploy logs.npx shadcn@latest add ui.minidev.pro/r/commit-row.jsonConsole OutputuiScrollable Tailwind console panel in monospace that prints log, warn and error lines with level labels. Uses a log role and is keyboard focusable.npx shadcn@latest add ui.minidev.pro/r/console-output.jsonCopy IduiMonospaced ID chip that copies its value to the clipboard on click and shows a check when done. Good for API keys, order IDs and record UUIDs.npx shadcn@latest add ui.minidev.pro/r/copy-id.jsonCoverage MeteruiTest coverage bar with a label and percentage that turns green at 80, amber at 60 and red below. Exposed as a progressbar for screen readers.npx shadcn@latest add ui.minidev.pro/r/coverage-meter.jsonCreate Api KeyuiInline form to name and create an API key, with a labelled input and a Create key button that passes the name to your handler. Pairs with the key list.npx shadcn@latest add ui.minidev.pro/r/create-api-key.jsonDiff ViewuiReact code diff viewer that tints added lines green and removed lines red with plus and minus gutters, context lines and an optional filename header.npx shadcn@latest add ui.minidev.pro/r/diff-view.jsonEnv BadgeuiUppercase environment badge for production, staging or development, with production outlined in red so live systems stand out in dev tools and consoles.npx shadcn@latest add ui.minidev.pro/r/env-badge.jsonEnv SwitcheruiReact segmented control for switching between Dev, Staging and Prod environments, reporting the selected value. Fits dashboards, API consoles and deploy tools.npx shadcn@latest add ui.minidev.pro/r/env-switcher.jsonFile ReferenceuiA compact card that cites a source file with its name, monospace path and line range. Useful for code assistants, docs and AI answers that point into a repo.npx shadcn@latest add ui.minidev.pro/r/file-reference.jsonInline Code DiffuiA two line code diff showing the removed line in red with a minus and the added line in green with a plus, in monospace. Suits AI edit suggestions.npx shadcn@latest add ui.minidev.pro/r/inline-code-diff.jsonJson VieweruiPretty prints any JavaScript value as indented JSON in a scrollable monospace block, falling back to a string if it cannot serialize. For React debug panels.npx shadcn@latest add ui.minidev.pro/r/json-viewer.jsonKbduiA keyboard key cap for showing shortcuts, with a raised edge and room for icons, plus a KbdGroup wrapper for combos like Cmd K. Renders a semantic kbd element.npx shadcn@latest add ui.minidev.pro/r/kbd.jsonLatency BadgeuiA monospace millisecond badge that turns green under 100ms, amber under 400ms and red above. Useful for API monitors, model responses and status dashboards.npx shadcn@latest add ui.minidev.pro/r/latency-badge.jsonMerge BoxuiA React pull request merge panel with a success or warning callout for check status and a full width Merge button that stays disabled until checks pass.npx shadcn@latest add ui.minidev.pro/r/merge-box.jsonNotebook CelluiA Jupyter style notebook cell with a Run button beside a code editor frame and an optional output panel below. Good for interactive docs and playgrounds.npx shadcn@latest add ui.minidev.pro/r/notebook-cell.jsonRelative TimeuiReact relative timestamp that renders just now, 5m ago, 3h ago or 2d ago inside a semantic time element, with the full local date shown as a hover title.npx shadcn@latest add ui.minidev.pro/r/relative-time.jsonReview Request CarduiCode review request card with a Review requested badge, pull request title, repo name, author avatar, and Review and View diff buttons for developer dashboards.npx shadcn@latest add ui.minidev.pro/r/review-request-card.jsonSchema Field RowuiAPI schema field row with a monospace field name, a required badge, the type and a description, in three columns on desktop for docs and reference pages.npx shadcn@latest add ui.minidev.pro/r/schema-field-row.jsonSecret RevealuiMasked secret field for API keys with an eye toggle to reveal or hide the value and a copy button for the full key. Monospace, compact, built with Tailwind.npx shadcn@latest add ui.minidev.pro/r/secret-reveal.jsonShortcut Cheat SheetuiKeyboard shortcut cheat sheet listing actions next to their key combinations rendered as Kbd keycaps. Pass your own rows or use the default command palette set.npx shadcn@latest add ui.minidev.pro/r/shortcut-cheat-sheet.jsonSql Result TableuiSQL query result table with uppercase column headers, monospace cells and horizontal scroll for wide results. Built for database consoles and admin tools.npx shadcn@latest add ui.minidev.pro/r/sql-result-table.jsonStack TraceuiStack trace block that shows an error trace in a monospace pre with a danger tint and scroll for long output. Useful in error pages, logs and debug panels.npx shadcn@latest add ui.minidev.pro/r/stack-trace.jsonTerminal WindowuiTerminal window frame with traffic light dots, a title bar and a monospace body for commands and output. A Tailwind block for install steps, CLI docs and demos.npx shadcn@latest add ui.minidev.pro/r/terminal-window.jsonTrace WaterfalluiReact trace waterfall that draws each span as a bar offset by start time and scaled by duration, indented by depth with a millisecond label for observability.npx shadcn@latest add ui.minidev.pro/r/trace-waterfall.jsonVersion BadgeuiVersion badge that shows a v-prefixed release number with an optional stable, beta or canary channel pill, each tinted differently, for docs and changelogs.npx shadcn@latest add ui.minidev.pro/r/version-badge.jsonWebhook ListuiWebhook endpoints list with an Add endpoint button, monospace URLs, subscribed events and an active or paused badge per row. Built for developer settings pages.npx shadcn@latest add ui.minidev.pro/r/webhook-list.jsonFile TreeuiA React file tree for code editor sidebars with icons by file type, git status letters, spring folder animation, a filter that expands matches and full keyboard support.npx shadcn@latest add ui.minidev.pro/r/file-tree.json
Blocks and full pages 5
Api Docs PageblockA React API reference page with a sidebar nav, endpoints tagged by HTTP method, a copy base URL action and a curl request example in a code block.npx shadcn@latest add ui.minidev.pro/r/api-docs-page.jsonDocs PageblockA Tailwind documentation page layout with a table of contents sidebar, prose with anchored headings, a copyable install command and an info callout.npx shadcn@latest add ui.minidev.pro/r/docs-page.jsonEngineering ConsoleblockAn engineering console with an environment switcher, build pipeline, and tabs for commits, CI checks with coverage, a trace waterfall and code review.npx shadcn@latest add ui.minidev.pro/r/engineering-console.jsonLogs ViewerblockA Tailwind log viewer with a filter input and a scrollable monospace list of timestamped entries tagged info, warn or error. Focusable for keyboard scroll.npx shadcn@latest add ui.minidev.pro/r/logs-viewer.jsonStatus PageblockA React system status panel with an overall outage badge and a list of services, each marked operational or degraded by a colored health indicator.npx shadcn@latest add ui.minidev.pro/r/status-page.json
Motion 1
Frequently asked questions
Does the code block have syntax highlighting and copy?
Yes. It highlights common languages, shows line numbers and filenames, and has a copy button.
Is there a terminal component?
Yes. The terminal window and console output components render commands and streaming output in a window frame.
Can I build a status page?
Yes. The status page block uses uptime bars, incident banners and health indicators.