@haatlabs-core/extension-ui

A browser extension's side panel, in React: the app's logo, wordmark and theme across the top, its own controls in the header (the account, a plan badge), notices, a sign-in card, and the area the app's own sections render in.

Install

pnpm add @haatlabs-core/extension-ui

It leaves these packages to your app, so the app holds one copy: react, react-dom (React 18.3 or 19).

Use

import '@haatlabs-core/extension-ui/panel.css';
import { ExtensionShell, SignInCard } from '@haatlabs-core/extension-ui';

<ExtensionShell brand={brand} theme={theme} header={<Account />}>
  {signedIn ? <MySection env={env} /> : <SignInCard brand={brand} onSignIn={connect} />}
</ExtensionShell>

• brand: name (for sentences), wordmark, logo (about 22 px), productName.
• theme: accent, ink, ground, surface, muted, line, font, set as the custom properties panel.css reads.
• Header, Notice (a titled card) and SignInCard are exported too.
• PanelEnv is what a section needs from the browser: the active tab (activeTab), access to every site (requestAccess), tab changes, downloads, JSON read from inside the page (reader) and the page's scripts and globals (pageFacts). @haatlabs-core/extension-kit gives Chrome's; a test gives its own.