📏 react-devbar

A customizable floating toolbar for React applications. Build and integrate your own dev tools with a draggable interface inspired by the Vercel toolbar. Perfect for adding debugging panels, theme controls, and other development utilities for your app. Check out the Storybook for a live demo.

✨ Features

• ✅ Fully customizable, with custom icons, styles, and components.
• ✅ Toggle it with a hotkey.
• ✅ Drag it anywhere on the screen.
• ✅ Use default styles or style it yourself. Seamlessly integrates with Tailwind and supports dark-mode.

📡 Install

npm install react-devbar

yarn add react-devbar

pnpm add react-devbar

👋 Hello there! Follow me @linesofcode or visit linesofcode.dev for more cool projects like this one.

🚀 Getting started

import { DevBar } from "react-devbar";
import { Bug, Palette, Settings } from "lucide-react";
// if you're not using Tailwind, you can import default styles
import "react-devbar/styles.css";

const tools = [
	{
		icon: Settings,
	},
	{
		icon: Palette,
	},
	{
		icon: Bug,
	},
];


// somewhere in your app render:
<DevBar tools={tools} />

Available props

DevBarTool

Each tool in the tools array can have the following properties:

| Property | Type | Required | Description | |------------|----------------------|----------|------------------------------------------------------------| | name | string | No | The name of the tool (used for tooltips) | | icon | React.ElementType | Yes | The icon component to display | | Component | React.ComponentType | No | The component to render when the tool is selected |

DevBarProps

| Property | Type | Default | Description | |--------------------------|-------------------------------------------|-------------|----------------------------------------------------------------| | tools | Tool[] | - | Array of tools to display in the toolbar | | orientation | "horizontal" | "vertical" | "horizontal"| Orientation of the toolbar | | defaultPosition | Position | { x: number; y: number } | "bottom-right" | Initial position of the toolbar | | defaultOpen | boolean | false | Whether the toolbar is initially open | | hotkey | string | - | Keyboard shortcut to toggle the toolbar | | hotKeyOptions | Options | - | Options for the hotkey behavior | | CommandIcon | React.ElementType | - | Custom command icon component | | GripIcon | React.ElementType | - | Custom grip icon component | | CloseIcon | React.ElementType | - | Custom close icon component | | containerClassName | string | - | Class name for the main container | | toolbarClassName | string | - | Class name for the toolbar | | toolbarContentClassName | string | - | Class name for the toolbar content | | moveButtonClassName | string | - | Class name for the move button | | toolsContainerClassName | string | - | Class name for the tools container | | toolButtonClassName | string | - | Class name for individual tool buttons | | controlsContainerClassName | string | - | Class name for the controls container | | closeButtonClassName | string | - | Class name for the close button | | openButtonClassName | string | - | Class name for the open button | | ButtonComponent | typeof Button | - | Custom button component | | TooltipComponent | typeof Tooltip | - | Custom tooltip component | | TooltipTriggerComponent | typeof TooltipTrigger | - | Custom tooltip trigger component | | TooltipContentComponent | typeof TooltipContent | - | Custom tooltip content component | | TooltipProviderComponent| typeof TooltipProvider | - | Custom tooltip provider component | | moveButtonLabel | string | - | Accessibility label for the move button | | closeToolbarLabel | string | - | Accessibility label for the close button | | openToolbarLabel | string | - | Accessibility label for the open button |

DevBarPosition Types

The defaultPosition prop accepts the following position values:

• "top-left"
• "top-center"
• "top-right"
• "bottom-left"
• "bottom-center"
• "bottom-right"
• "center-left"
• "center-right"
• "center"

Or an object with x and y coordinates for precise positioning.