ExtensionPopup

Code

import { ExtensionMiniCard, ExtensionPopup } from "@fadymondy/nasaq/web";export function Popup() {  return (    <ExtensionPopup brand="Nasaq" status="connected" paused={false} onPausedChange={() => {}}>      <ExtensionMiniCard title="Today" value="12" hint="tasks" />    </ExtensionPopup>  );}

Apps & Platforms · beta

Live examples and controls: ExtensionPopup in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/extension-popup.json

The small surfaces of a browser extension. ExtensionPopup is the 360px popup frame with a brand, a connection badge, a pause switch and a footer. ExtensionConnect signs in to a server or pairs with a code. Inside the popup use ExtensionMiniCard and ExtensionQuickActions. ExtensionOptionsPage and ExtensionOptionRow build the options page with a save bar.

When to useCopy Anchor Link

• The popup, sign-in and options page of a browser extension.
• Any compact companion window that shows a few live numbers and actions.

When not to useCopy Anchor Link

• A tray or menu-bar popover: use TrayPopover in glance-surfaces.

ImportCopy Anchor Link

import { ExtensionConnect, ExtensionMiniCard, ExtensionPopup } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { ExtensionMiniCard, ExtensionPopup } from "@fadymondy/nasaq/web";

export function Popup() {
  return (
    <ExtensionPopup brand="Nasaq" status="connected" paused={false} onPausedChange={() => {}}>
      <ExtensionMiniCard title="Today" value="12" hint="tasks" />
    </ExtensionPopup>
  );
}

AnatomyCopy Anchor Link

ExtensionPopup                  data-slot="extension-popup"
├─ header                       brand, status Badge
├─ pause row                    Switch
├─ children                     mini cards, quick actions
└─ footer                       version, options link
ExtensionConnect                server address or pairing code form
ExtensionOptionsPage            sections of ExtensionOptionRow and a save bar

APICopy Anchor Link

ExtensionPopupCopy Anchor Link

ExtensionConnectCopy Anchor Link

isServerAddress(value) is the validator the form uses.

Other partsCopy Anchor Link

ExtensionMiniCard (title, icon, status, value, hint), ExtensionQuickActions (actions, columns), ExtensionOptionsPage (title, description, brand, sections, onSave, dirty), ExtensionOptionRow (label, description, control).

ExamplesCopy Anchor Link

Pair mode asks for a code; the story shows the failing path when the address contains "fail".

AccessibilityCopy Anchor Link

Errors are announced in a live region, the pause switch is labelled, and quick actions are buttons.

RTL & i18nCopy Anchor Link

Logical spacing throughout. Server addresses and codes are set ltr. Strings via useOptionalNasaq().

Styling & tokensCopy Anchor Link

Only --nq-* tokens. The popup width is 360px; override with className.

Do / Don'tCopy Anchor Link

• Do return { error } from onConnect instead of throwing.
• Don't put more than four quick actions in the popup.

RelatedCopy Anchor Link

Switch, Field, glance-surfaces.

LabCopy Anchor Link

Pages / App / Extension Popup in the lab: Default, Arabic, Mobile.