ProviderSwitcher

Code

import { ProviderSwitcher } from "@fadymondy/nasaq/web";<ProviderSwitcher  capabilities={[    { capability: "data", label: "Data", active: "postgres", options: ["postgres", "sqlite"], isDefault: true },    { capability: "queue", label: "Queue", active: "redis", options: ["redis", "nats", "database"], isDefault: false },  ]}  onSelect={(capability, backend) => api.post(`/providers/${capability}`, { backend })}/>;

Developer Tools · beta

Live examples and controls: ProviderSwitcher in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/provider-switcher.json

An operator panel for apps built on swappable capabilities. Each row is one capability (data, queue, cache, storage, realtime…) with the backend it runs on, and a select to switch it. Rows on the app's configured default say Default; switched rows say Overridden. Rows pinned by config are locked.

When to useCopy Anchor Link

• In an admin or developer settings page of a framework app whose drivers can change at runtime (the ToGO provider panel).

When not to useCopy Anchor Link

• Plain environment variables: use EnvList.
• On/off switches for product features: use FeatureFlags.

ImportCopy Anchor Link

import { ProviderSwitcher } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { ProviderSwitcher } from "@fadymondy/nasaq/web";

<ProviderSwitcher
  capabilities={[
    { capability: "data", label: "Data", active: "postgres", options: ["postgres", "sqlite"], isDefault: true },
    { capability: "queue", label: "Queue", active: "redis", options: ["redis", "nats", "database"], isDefault: false },
  ]}
  onSelect={(capability, backend) => api.post(`/providers/${capability}`, { backend })}
/>;

AnatomyCopy Anchor Link

div [data-slot=provider-switcher]
├─ header row (Capability · Backend), from sm up
└─ ul
   └─ li [data-slot=provider-switcher-row][data-capability][aria-busy]
      ├─ label + Status (Default / Overridden) + description
      └─ Select [data-slot=provider-switcher-select]

APICopy Anchor Link

ProviderSwitcherCopy Anchor Link

Plus any <div> prop.

ProviderCapabilityCopy Anchor Link

ProviderOptionCopy Anchor Link

ExamplesCopy Anchor Link

Rich optionsCopy Anchor Link

{
  capability: "data",
  active: "postgres",
  options: [
    { id: "postgres", label: "PostgreSQL" },
    { id: "sqlite", label: "SQLite", description: "Local file, for development" },
  ],
}

Read-only overviewCopy Anchor Link

<ProviderSwitcher capabilities={capabilities} />

AccessibilityCopy Anchor Link

• Each select is named "Backend for Data" / "مزوّد البيانات" after its row.
• A row that is applying a change has aria-busy and its select is disabled.
• Default and Overridden use Status, which pairs a shape with the colour.

RTL & i18nCopy Anchor Link

Strings ship in English and Arabic. Capability and backend names come from the host; backend ids such as postgres stay Latin.

Styling & tokensCopy Anchor Link

• rounded-card border-border bg-card surface with divide-border rows; text-label names, text-caption descriptions.
• Target a row with [data-slot=provider-switcher-row][data-capability=queue].

Do / Don'tCopy Anchor Link

• Do confirm a switch server-side and return the promise, so the row shows the change only once it applied.
• Do lock capabilities that can't change without a restart.
• Don't list backends the app has no driver for.

RelatedCopy Anchor Link

env-list, feature-flags, select, status.

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-developer-tools-provider-switcher--docs