IntegrationsPro

• Type: Block

• Page: https://ui.xzero.co.uk/components/blocks/integrations

• Markdown: https://ui.xzero.co.uk/components/blocks/integrations/markdown

• Access: Xzero Pro

• Registry id: integrations

• Source file: registry/blocks/integrations/integrations.tsx

• Built from: Search field, Drawer, Select, Hold to confirm, Avatar, Button

• Keywords: react integrations page, app marketplace, connect apps ui, integrations directory, oauth connect button, third party integrations

Use this on a settings or marketplace page. Load integrations and connection state from your API, start each provider's OAuth flow from Connect, and save sync frequency and Disconnect through it; every connection in the preview is simulated.

When to use

• Settings or marketplace pages for third party connections.
• Directories with search, category filters, and Connect buttons.
• Connections that need sync settings and a safe disconnect.

When not to use

• Use webhooks for outgoing event endpoints.
• Use api-keys for developer credentials.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/integrations

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { Integrations } from "@/components/xzero/blocks/integrations/integrations";

export default function IntegrationsPage() {
  return (
    <main>
      <Integrations />
    </main>
  );
}

API reference

Integrations

An integrations directory with search, category filters, Connect buttons that morph to Connected, and a drawer for sync settings and hold to disconnect. Providers and connections are simulated.

No props.

Keyboard interactions

Keys	Action
Arrow keys, Home / End	Move between filter options.

Accessibility

• Filters are a role="radiogroup" of role="radio" buttons with aria-checked and roving arrow keys.
• Filter results and connection changes are announced in a polite status region.
• Disconnect uses hold to confirm, so it cannot fire from a stray click.

Motion

• Connect morphs into a Connected state and filter counts recount as you go.
• Cards reflow with layout animation when filtering.
• Reduced motion swaps morphs and reflow for instant changes.

Responsive behavior

• Below 720px container width the search goes full width under the title.
• Below 480px the filters become one horizontally scrolling row instead of wrapping.
• Settings open in a drawer, which goes nearly full width on phones.

Performance

• Cards reflow with layout animation when filtering; the grid is not virtualized.
• ResizeObservers drive the filter indicator and height morphs.

Notes for AI

• Use on a settings or marketplace page for third party connections.
• Load integrations and connection state from your API, start each provider's OAuth flow from Connect, and save sync frequency and Disconnect through it.
• Composes Xzero search-field, drawer, select, hold-to-confirm, avatar, and button.

Related

• Webhooks: A webhooks console with delivery history, a payload inspector and retries that roll the rate.
• API keys: API key management where Create key unfolds into its form and each secret is shown once.
• Drawer: A temporary side surface for focused work.
• Hold to confirm: Confirm a destructive action by holding, not tapping.
• Search field: A recognizable search entry point with clear affordances.

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt