Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

React Developer Tools Settings Block

React animated developer tools settings block for Next.js with debug mode toggle, API sandbox environment, request logging, and performance profiling using shadcn/ui, Tailwind CSS, and framer-motion

Unlock advanced developer controls with this React developer tools settings block. Toggle debug mode, switch between sandbox and production API environments, enable request logging with live log output, and control performance profiling. Built with TypeScript, shadcn/ui Switch, Button, Badge, and Select components, Lucide React icons, and framer-motion for smooth toggle animations. Essential for developer dashboards, API management panels, and engineering admin interfaces.

React Developer Tools Settings Block preview

Loading...
Scroll to load preview

Installation

Install
Pro block

FAQ

Last updated on March 17, 2026

Was this page helpful?

Sign in to leave feedback.