Integrations
ProAn integrations directory where Connect morphs to Connected and the filters recount as you go.
Integrations
Connect the tools your team already works in.
- Communication
Post release notes and approval requests to the channels you pick.
Connected - Storage
Attach docs and keep shared folders in step with their projects.
Connected - Analytics
Send product events and funnels to Mixpanel as they happen.
- Communication
Turn customer emails into tracked requests with the thread attached.
- Storage
Link team folders to projects without uploading files twice.
- Analytics
Track sign-ups and traffic on your public project pages.
- Communication
Attach recordings and transcripts to the meetings on each project.
- Storage
Archive nightly exports and audit logs to a bucket you own.
- Analytics
Sync projects, tasks, and time entries to your warehouse every night.
- 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.
- Use webhooks for outgoing event endpoints.
- Use api-keys for developer credentials.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
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.
import { Integrations } from "@/components/arc/blocks/integrations/integrations"; export default function IntegrationsPage() { return ( <main> <Integrations /> </main> );}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.
- Arrow keys, HomeorEnd
- Move between filter options.
- 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.
- 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.
- 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.
- Cards reflow with layout animation when filtering; the grid is not virtualized.
- ResizeObservers drive the filter indicator and height morphs.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- 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 Arc search-field, drawer, select, hold-to-confirm, avatar, and button.
The full library index for assistants is at /llms.txt.