[](https://www.npmjs.com/package/@jonmatum/react-cookie-devtool) [](LICENSE) 

!React
!Tailwind CSS
!shadcn/ui
!Vite
React Cookie Devtool is a development-only UI for inspecting, editing, and clearing cookies directly in your React app. Designed for modern development stacks, it offers a sleek interface via a floating widget or a drawer-style sheet powered by shadcn/ui.
Live demo: jonmatum.github.io/react-cookie-devtool
NPM package: @jonmatum/react-cookie-devtool
- Floating widget UI () with position control
- Sheet-based drawer UI () using shadcn/ui Sheet
- Input for key/value pair and cookie management
- Select and update existing cookies
- Clear a single cookie or all cookies
- Light/Dark mode support
- Dismissible feedback alerts
- Visible only during development (or on GitHub Pages)
``bash`
npm install --save-dev @jonmatum/react-cookie-devtool
or
`bash`
yarn add --dev @jonmatum/react-cookie-devtool
`tsx
import { CookieDevTool } from '@jonmatum/react-cookie-devtool';
function App() {
return
}
`
`tsx
import { CookieDevToolSheet } from '@jonmatum/react-cookie-devtool';
function App() {
return
}
`
| Name | Type | Default | Description |
|----------|-------------------------------------------------------------------|----------------|-------------------------------------|
| position` | "top-left" \| "top-right" \| "bottom-left" \| "bottom-right" | "bottom-right" | Sets the position of the floating button |
> The component disables itself in production unless hosted on GitHub Pages.
MIT License — see LICENSE