Skip to content

Unified UI#311

Open
ziarno wants to merge 20 commits into
callstackincubator:mainfrom
ziarno:unified-ui-next
Open

Unified UI#311
ziarno wants to merge 20 commits into
callstackincubator:mainfrom
ziarno:unified-ui-next

Conversation

@ziarno

@ziarno ziarno commented Jun 25, 2026

Copy link
Copy Markdown
Contributor

Description

Introduces @rozenite/ui — a new shared UI package — and migrates all plugins to use it. This eliminates ~3,500 lines of duplicated component code and per-plugin Tailwind/CSS configs, replacing them with a single HeroUI-based component library.

New @rozenite/ui package exports:

  • PluginTheme — unified dark theme wrapper (system theme by default)
  • PluginHeader — consistent plugin header layout
  • DataTable, EditableTable — shared table primitives
  • ConfirmDialog, EntryDetailDialog — shared dialog components
  • JsonInspector — JSON viewer component
  • useCopyToClipboard hook and utility helpers (cn, json)

Migrated plugins: controls-plugin, expo-atlas-plugin, file-system-plugin, mmkv-plugin, network-activity-plugin, overlay-plugin, performance-monitor-plugin, react-navigation-plugin, require-profiler-plugin, rhf-plugin, sqlite-plugin, storage-plugin

Each plugin's per-plugin tailwind.config.ts, custom CSS, and one-off component duplicates have been removed in favor of @rozenite/ui imports.

Related Issue

Notion: Unified UI for Rozenite plugins

Context

Previously each plugin maintained its own Tailwind config, CSS globals, and local copies of common components (editable tables, dialogs, entry detail panels). This led to visual inconsistencies between plugins and made UI-wide changes require touching every plugin separately.

The @rozenite/ui package is built on HeroUI + Tailwind v4 (consistent with the existing ui package approach). Plugin-level CSS is now reduced to a minimal globals.css that imports the shared stylesheet. The PluginTheme component applies the system color scheme by default, so all plugins inherit dark/light mode automatically.

Testing

  • Run pnpm build:all to verify the full build passes
  • Start the playground in focused plugin mode, e.g. pnpm start:playground, and verify each migrated plugin renders correctly
  • Test dark/light theme switching via PluginTheme system default behavior
  • Run pnpm checks:all for typecheck + lint + format

Screenshot 2026-06-25 at 14 09 03 Screenshot 2026-06-25 at 14 09 18 Screenshot 2026-06-25 at 14 09 29 Screenshot 2026-06-25 at 14 09 42 Screenshot 2026-06-25 at 14 09 49 Screenshot 2026-06-25 at 14 10 06 Screenshot 2026-06-25 at 14 10 18 Screenshot 2026-06-25 at 14 10 25 Screenshot 2026-06-25 at 14 10 55 Screenshot 2026-06-25 at 14 11 11 Screenshot 2026-06-25 at 14 11 36 Screenshot 2026-06-25 at 14 11 44 Screenshot 2026-06-25 at 14 11 56 Screenshot 2026-06-25 at 14 12 04 Screenshot 2026-06-25 at 14 12 10 Screenshot 2026-06-25 at 14 12 18 Screenshot 2026-06-25 at 14 12 29 Screenshot 2026-06-25 at 14 12 38 Screenshot 2026-06-25 at 14 12 51 Screenshot 2026-06-25 at 14 13 01

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants