A unified shell for Rozenite panels in React Native DevTools.

The Rozenite Shell provides the shared DevTools panel experience for Rozenite plugins. It renders the plugin sidebar, panel selection, embedded plugin iframes, welcome dialog, and release notifications in one consistent layout.

The shell is served by @rozenite/middleware and is normally configured for you by the Rozenite Metro or Re.pack integrations. You typically do not need to import or render it directly.

Features

• Unified Panel Navigation: Browse all installed plugin panels from one sidebar.
• Embedded Plugin Panels: Render plugin DevTools panels while forwarding messages between the shell and each panel.
• Responsive Layout: Resize or collapse the sidebar to make room for panel content.
• Release Messaging: Show welcome and new-version information inside the DevTools experience.

Installation

The shell is installed automatically as a dependency of the Rozenite bundler integrations. For custom bundler integrations, install it alongside the middleware package:

npm install @rozenite/middleware @rozenite/shell

Usage

Use the Rozenite Metro or Re.pack integration to serve the shell automatically. If you are building a custom integration, @rozenite/middleware serves the compiled shell assets and wires its configuration to the React Native DevTools frontend.

A note for anyone importing this package directly

This package has no main/compiled library build — its . export (./src/index.ts) and ./styles.css point at source, not dist. That's a deliberate choice, not an oversight: Shell.tsx imports SVGs from outside the package, and styles.css relies on Tailwind's @source scanning real source files, so a pre-compiled build isn't viable here. Any consumer importing . directly (as @rozenite/app does) needs its own bundler (Vite, Metro, etc.) to compile this package's source — it isn't published pre-built.

Made with ❤️ at Callstack

rozenite is an open source project and will always remain free to use. If you think it's cool, please star it 🌟.

Callstack is a group of React and React Native geeks, contact us at [email protected] if you need any help with these or just want to say hi!

Like the project? ⚛️ Join the team who does amazing stuff for clients and drives React Native Open Source! 🔥