React Aria integration blocks.

The 100 integration blocks show how your product connects to the tools teams already use: detail pages, connect flows, capability grids, synced-object lists and usage figures. Each is written for one named service, such as GitHub, Slack or Stripe.

There are 12 groups: Scopes and steps, With a product drawing, Guided steps, Keys and code, Choose and verify, Switch and tick grids, and more. Every service comes as a set of five sections, a detail page, a setup flow, a grid, a list and stats, so a service's integration page can be built from matching parts.

Use the detail block for the page that explains what access the integration asks for. Use the setup block for the connect wizard, for example GitHub Setup Integration with account, access and repository steps. Use the grid for switching things on and the list for synced records with Retry. The stats block shows usage.

A comment describes the section, then typed constants hold the permissions, steps, repositories or records, and the component renders them. The service is named in text only: no logo, colour or wordmark of the service ships, and the data is example data.

The blocks name a service in text only and show a neutral lettermark tile as a placeholder. Replace that tile in the mark pair with the service's official logo, under its brand terms, and never redraw a brand's logo yourself.

The setup blocks only simulate the connection and say that nothing is installed or sent. Where the final step ends, redirect to the service's OAuth authorization URL, handle the callback on your server, then show the installed state from what you stored.

Replace the typed list with your synced records, keep each row's state (such as synced or failed) and send Retry to your sync job. GitHub List Integration works this way: a failed row shows Retry, which here just waits and then reads In release notes.

In the grid blocks the switches and ticks only change the page, with a tally and status line that follow. Save them where the toggle changes: call your API with the setting and the new value, and keep the polite status line so the change is announced.

The stats blocks draw bars, lines or dials from typed figures and work out their headline sentence from the data. Pass your usage series in the same shape, and the sentence and the drawing update; no chart library is needed.

This page lists 100 of the category's 100 integration blocks for React on React Aria. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The integration blocks here are written on React Aria primitives; the layout, the copy and the theme tokens are the same on every base, and the install path follows it (/r/aria/integration-aws-detail.json). The other bases are one picker away from /integration-block/aria.

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens, and imports our components (installed with it) on React Aria. Icons come from lucide-react.

Open a block, copy its command and run it: `npx shadcn@latest add` with the block's registry URL, such as /r/aria/integration-aws-detail.json for AWS Detail Integration. The code is copied into your project and it's yours to edit.

The block's file and the components it imports: AWS Detail Integration brings Badge, Button, Guides and Shine Button, installed before it. Nothing else changes in your project.

Use the filters above the grid: 12 kinds of integration block, led by switch and tick grids (12), with a product drawing (11), synced tables (10) and grouped and triaged (10), and sort by popular or name. A good first look: AWS Detail Integration, AWS Grid Integration and AWS List Integration. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a integration block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the connect, configure and synced data kinds.

Open its page and use the full-screen viewer (/view/integration/aria/aws-detail) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each integration block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on React Aria, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the integration blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 100 integration blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a integration block, read it with get_block and install it on your React on React Aria stack.

Pass `category: "integration"` to search_blocks to search only the 100 integration blocks, or to list_blocks for the 12 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "integration", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.