affectUI › Components › Inputs

Integration Settings

Settings card for a connected service – on/off switch, API key, validated site address, time zone and a save bar.

Part of affectUI Pro. Install: npx shadcn@latest add https://www.affectui.com/r/integration-settings.json · Import from @/components/ui/integration-settings

When to use

  • The settings of one connected service – a store, an ad account, a data source
  • Forms that should only save when someone confirms, with a clear way to discard

When not to use

  • Long settings pages with many sections – split them into separate cards or pages

Usage

import { IntegrationSettings } from "@/components/ui/integration-settings";

export function Store() {
  return (
    <IntegrationSettings
      name="Shopify store"
      logo={<ShopifyLogo />}
      count={128}
      meta="Connected on March 4, 2026"
      defaultValues={{ siteUrl: "lumen-studio.com", timeZone: "(GMT +01:00) Berlin" }}
      onGenerateKey={() => api.createKey()}
      onSave={(values) => api.saveSettings(values)}
    />
  );
}

Props

NameTypeDefaultDescription
namestringName of the service
logoReactNodeLogo in the white tile
countnumberSmall number next to the name
metastringLine under the name; switching off shows a paused note instead
defaultValuesPartial<IntegrationValues>enabled, siteUrl, timeZone and apiKey to start with
siteHintstringHelper text under the address field
timeZonesstring[]Choices in the time zone picker
onGenerateKey() => string | Promise<string>Creates a key – a random demo key without it
onSave(values) => void | Promise<void>Called with all values from the save bar
onToggle(enabled: boolean) => voidCalled when the switch changes

Keyboard

  • Space: Toggle the switch
  • Tab: Move through the key actions, the address and the time zone
  • Escape: Close the time zone picker

Accessibility

  • The toggle is a real switch; the address field reports invalid input and points to its hint
  • A new key is announced together with the reminder to copy it

Responsive

  • Dark mode built in: switches when an ancestor (usually <html>) has the class dark or data-theme="dark"

Requirements

  • React 19

Related

  • App Directory – Browse, search and connect integrations – categories, filters and app cards with a connect flow
  • Data Table – Spreadsheet-style table: select cells and ranges, edit in place, copy and paste, undo and sort

Guides