Devtools UI Registry

17 components available

Sort by:

Editor

component

A powerful code editor component using Monaco Editor with VSCode API integration, featuring multi-file support, syntax highlighting, and theme switching.

@monaco-editor/reactreact
Includes: component, lib
pnpm dlx shadcn@latest add 'https://ui.devtools.ltd/r/editor'
Loading...

Tree

component

A skill tree visualization component using visx with zoom, pan, collapse/expand functionality and interactive nodes showing progression levels.

@visx/gradient@visx/group@visx/hierarchy@visx/responsive@visx/shape@visx/zoomlucide-reactreact
Includes: component
pnpm dlx shadcn@latest add 'https://ui.devtools.ltd/r/tree'

Person

component

An interactive person profile component with hover card, location globe visualization, and day/night detection.

lucide-reactreactsuncalchttps://magicui.design/r/globe
Includes: component
pnpm dlx shadcn@latest add 'https://ui.devtools.ltd/r/person'

Duvet

component

A compliance coverage report viewer with file tree navigation and specification analysis.

copy-to-clipboardlucide-reactreacthttps://magicui.design/r/file-treehttps://ui.devtools.ltd/r/file-drop.json
Includes: component, component, component, file
pnpm dlx shadcn@latest add 'https://ui.devtools.ltd/r/duvet'
Error: document is not defined

File Drop

component

A drag-and-drop file upload component with validation and error handling.

lucide-reactreact
Includes: component
pnpm dlx shadcn@latest add 'https://ui.devtools.ltd/r/file-drop'

Drop file or click to select

Supports .json files up to 10MB

Use Mobile

hook

A React hook to detect if the viewport is mobile-sized using a media query.

react
Includes: hook
pnpm dlx shadcn@latest add 'https://ui.devtools.ltd/r/use-mobile'

No preview available

This registry item contains:

hook

Keyboard Key

component

A styled kbd element that looks like a physical keyboard key with CSS styling.

clsxreacttailwind-mergehttps://ui.devtools.ltd/r/theme-context.json
Includes: component, style, lib
pnpm dlx shadcn@latest add 'https://ui.devtools.ltd/r/kbd'

Keyboard Key Component

Single Keys

AEsc

Modifier Keys

CtrlCtrlAltAlt

Key Combinations

Ctrl+KCtrl++PAlt+

Sizes

SmallMediumLarge

Variants

DefaultLightDark

Command Provider

component

A command palette provider that allows components to register and execute commands with keyboard shortcuts.

reacthttps://ui.devtools.ltd/r/kbd.json
Includes: component, component
pnpm dlx shadcn@latest add 'https://ui.devtools.ltd/r/command-provider'

Command Provider Demo

Press Ctrl+K to open command palette

0

Counter Value

Crashdump

component

A component that displays crash report previews by fetching og:image metadata from crashdu.mp URLs.

lucide-reactreacthttps://ui.devtools.ltd/r/dt-logo.json
Includes: component
pnpm dlx shadcn@latest add 'https://ui.devtools.ltd/r/crashdump'
Loading Crash Report...

Layout

component

A flexible layout component with header, footer, sidebar, and multiple layout variants.

clsxreacttailwind-mergehttps://ui.devtools.ltd/r/dt-logo.jsonhttps://ui.devtools.ltd/r/footer.jsonhttps://ui.devtools.ltd/r/navigation.json
Includes: component, lib
pnpm dlx shadcn@latest add 'https://ui.devtools.ltd/r/layout'
Test content
© 2025 Devtools Ltd. All rights reserved.
Devtools Ltd is a limited company registered in England (№ 16372953).

Footer

component

A customizable footer component with company information and registration details.

react
Includes: component
pnpm dlx shadcn@latest add 'https://ui.devtools.ltd/r/footer'
© 2025 Devtools Ltd. All rights reserved.
Devtools Ltd is a limited company registered in England (№ 16372953).

Navigation

component

A responsive navigation component with dropdown menus and mobile support.

clsxlucide-reactreacttailwind-mergehttps://ui.devtools.ltd/r/command-provider.jsonhttps://ui.devtools.ltd/r/dt-logo.jsonhttps://ui.devtools.ltd/r/environment-indicator.jsonhttps://ui.devtools.ltd/r/kbd.jsonhttps://ui.devtools.ltd/r/theme-toggle.json
Includes: component, lib
pnpm dlx shadcn@latest add 'https://ui.devtools.ltd/r/navigation'

Devtools Animated Logo

component

An animated Lottie logo with theme support.

@lottiefiles/dotlottie-reactreacthttps://ui.devtools.ltd/r/theme-context.jsonhttps://ui.devtools.ltd/r/theme-toggle.json
Includes: component, file, lib
pnpm dlx shadcn@latest add 'https://ui.devtools.ltd/r/dt-logo'

Bug Reporter

component

A reusable bug reporting dialog component with customizable trigger and form handling.

lucide-reactreact
Includes: component
pnpm dlx shadcn@latest add 'https://ui.devtools.ltd/r/bug-reporter'

Environment Indicator

component

A visual indicator for dev, beta, and production environments with bug reporting.

lucide-reactreacthttps://ui.devtools.ltd/r/bug-reporter.jsonhttps://ui.devtools.ltd/r/dt-logo.json
Includes: component
pnpm dlx shadcn@latest add 'https://ui.devtools.ltd/r/environment-indicator'

🪾

Theme Toggle

block

A theme toggle dropdown that supports system, light, and dark modes.

lucide-reactreacthttps://ui.devtools.ltd/r/command-provider.jsonhttps://ui.devtools.ltd/r/theme-context.json
Includes: component
pnpm dlx shadcn@latest add 'https://ui.devtools.ltd/r/theme-toggle'

Theme Context

lib

A theme context provider that supports system, light, and dark modes.

react
Includes: lib
pnpm dlx shadcn@latest add 'https://ui.devtools.ltd/r/theme-context'

No preview available

This registry item contains:

lib

Command Palette

Search for a command to run...