Shared UI foundation for Rozenite DevTools plugin panels.

The Rozenite UI package provides reusable components, design tokens, and layout primitives for plugin panels rendered inside React Native DevTools. It includes built-in light and dark theming, as well as the PluginShell, PluginHeader, and Split components used by Rozenite's own panels.

Features

• Panel Layout: Build consistent plugin panels with PluginShell and PluginHeader.
• Resizable Layouts: Arrange panel content with the Split primitive.
• Reusable Components: Use accessible controls, data displays, dialogs, navigation, and feedback components.
• Theming: Support light and dark themes with shared design tokens.

Installation

Install the UI package as a dependency:

npm install @rozenite/ui

Quick Start

Import the stylesheet once, then use the components:

@import '@rozenite/ui/styles.css';

import { PluginShell, PluginHeader, Split } from '@rozenite/ui';

function Panel() {
  return (
    <PluginShell>
      <PluginHeader>
        <PluginHeader.Title>My Plugin</PluginHeader.Title>
        <PluginHeader.Actions>
          <PluginHeader.ThemeSwitcher />
        </PluginHeader.Actions>
      </PluginHeader>
      <PluginShell.Body>
        <Split direction="horizontal">
          <Split.Pane defaultSize={25} minSize={15} collapsible>
            Sidebar
          </Split.Pane>
          <Split.Handle />
          <Split.Pane>Content</Split.Pane>
        </Split>
      </PluginShell.Body>
    </PluginShell>
  );
}

Panels that bring their own styling (styled-components, a third-party widget) can render <PluginShell unstyled> to get the layout scaffolding without the theme provider or design tokens.

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! 🔥