IntegrationsPro
An 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
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { Integrations } from 'animui/integrations';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
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 "animui/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 animui search-field, drawer, select, hold-to-confirm, avatar, and button.
The full library index for assistants is at /llms.txt.