Integrations

An onboarding step to connect the tools someone already uses, with a category filter, search, sort, a switch per tool and their logos drifting over a painting.

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/integrations.json

Features

One toolbar row. The category filter, search and the sort menu sit together on every screen. When the panel is wide enough for every category they are tabs, and below that they are a menu.
A switch per tool. Connected rows are tinted. While onToggle runs the switch waits with a spinner, and if it fails the switch turns back and a toast says so.
Details. The caret opens what the tool can do once connected, its category and website, with Connect or Disconnect. It is a dialog on desktop and a drawer on phones.
Sort. Recent keeps your order, Name sorts A to Z and Connected first lifts the switched on tools to the top.
Showcase. On wide screens a public domain painting sits to the right of the list with the same logos drifting over it in columns of glass tiles, built with Marquee. A connected tool turns into a solid tile in full colour, hovering a row lifts its tile, and a glass Card at the top counts what is connected. Pass art to change the painting.
63 tools. The sample list covers developer, design, communication, productivity, data, sales, payments and browser tools, so the columns rarely repeat.
Brand marks. Every logo comes from theSVG, in mono where the brand is black so it follows light and dark.

Usage

import Linear from "@thesvg/react/linear"
import { IntegrationsPage } from "@/components/blocks/integrations"
 
<IntegrationsPage
  integrations={[
    {
      id: "linear",
      name: "Linear",
      domain: "linear.app",
      description: "Plan, track and ship product work.",
      category: "productivity",
      logo: <Linear variant="mono" aria-hidden />,
      enabled: true,
    },
  ]}
  onToggle={(id, enabled) => (enabled ? connect(id) : disconnect(id))}
  onSkip={() => router.push("/home")}
  onContinue={(ids) => saveIntegrations(ids)}
/>

Use IntegrationsPanel for the list alone, inside a settings page or a dialog.

Props

title, description. The heading over the list.
art. The painting behind the logos, on IntegrationsPage.
integrations. Each has an id, name, domain, description, category, logo, and optionally glyph (a one colour mark for the glass tiles), isNew, enabled and permissions. Their order is the Recent order.
categories. The filter, as { id, label }. View all is always first.
onToggle. Runs when a switch changes. Return a promise to show a spinner, and reject it to turn the switch back.
onContinue. Runs with the connected ids. Continue is hidden when it is not set.
onSkip. Shows "I'll do this later".
onEnabledChange, onHover. On IntegrationsPanel, for keeping your own grid or summary in step.

Share Dialog motion

On This Page

Installation Features Usage Props