Dev Design Libraryshadcn/ui Dev Tool Components
Dev Design Library indexes 20 shadcn/ui dev tool components from 8 open-source UI libraries, with the most coming from Shadcn Space, Notra, sv-particles, Watermelon UI and Velora UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. They follow the shadcn/ui conventions, so most install with the shadcn CLI and drop into a Tailwind project.
snippetIntent UI · Reactsnippet
Button Group 10 - Editor ToolbarShadcn Space · ReactRich-text formatting toolbar button group component
Claude Code PromptNotra · ReactThe input between two rules with the permission mode, PR link and effort below.
TerminalWatermelon UI · React
Code Block Commandglasscn · React
Code blockCojeev UI · ReactDisplays a code snippet with an optional caption, language label, wrapping, and copy feedback.
Developer tool heroVelora UI · ReactMinimal hero on a retro grid with a typed headline accent, an install terminal and two CTAs.
Code Snippet With Language Selectorsv-particles · Svelte
Code Block 01 - DefaultShadcn Space · ReactSyntax-highlighted code block with filename header and copy button
Claude Code TerminalNotra · ReactThe terminal window with traffic lights and a title bar for Claude Code sessions.
Code Block 02 - ScrollableShadcn Space · ReactScrollable code block with line numbers and fixed max height
Codex ComposerNotra · ReactThe prompt band with a block cursor, the model and directory status line and shortcut hints.
Code Block 04 - Highlighted LineShadcn Space · ReactCode block with line numbers and amber highlighted line
Codex TerminalNotra · ReactThe Codex window: a title bar, a scrolling transcript and a pinned footer for the prompt.
Code Block 05 - Multi FileShadcn Space · ReactCode block with switchable file tabs, line numbers, and scrollable content
OpenCode ComposerNotra · ReactThe prompt panel with agent, model, provider and effort, over a status row with the busy scanner, context and shortcuts.
Code Block 07 - Install CommandShadcn Space · ReactPackage manager install command tabs (pnpm, npm, yarn, bun) with copy button
OpenCode WindowNotra · ReactThe OpenCode terminal surface that sets the background, monospace font and line grid.
Dashboard Shell 01Shadcn Space · ReactA modern dashboard shell with a sidebar and header, ideal for admin dashboards to organize and navigate through…
Toggle 08 - Editor View OptionsShadcn Space · ReactCode editor toolbar with word wrap, line numbers, and active line highlight toggles that update the code preview.