Getting Started
Templates
Blocks
Components
For solo developers, indie hackers, and freelancers shipping their own products. Pay once, keep everything forever.
Instant download · No subscription · Lifetime access
For small teams, agencies, and freelancers shipping multiple client products. Lifetime access for everyone on your team.
Instant CLI token for 5 seats · Onboarding included · Invoice on request
A focused integrations callout: heading + description on top, brand logos arranged along a dashed arc that fades into the page. Default ships with six logos pulled from /public/single-logos/ — pass your own via the integrations prop.
Key Features:
-60° to upright with a slight overshoot when the section first scrolls into view; staggered left → rightprefers-reduced-motion (logos appear at their final state with no animation)arcSpan controls how wide the icons fan out<a> automatically when href is providedEach entry is { name, icon, href? }. Pass any logo node — <img/>, inline SVG, or a brand component.
<IntegrationsArc
arcSpan={48}
integrations={[
{ name: "Slack", icon: <SlackLogo />, href: "/integrations/slack" },
{ name: "Notion", icon: <NotionLogo />, href: "/integrations/notion" },
{ name: "Linear", icon: <LinearLogo />, href: "/integrations/linear" },
{ name: "Figma", icon: <FigmaLogo />, href: "/integrations/figma" },
{ name: "GitHub", icon: <GitHubLogo />, href: "/integrations/github" },
]}
/>| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Plays nice with your stack." | Bold centered heading. |
description | string | "Connects with the tools your team …" | Muted line under the heading. |
integrations | IntegrationsArcIntegration[] | 6 logos from /public/single-logos/ | Logos to render, left → right along the arc. |
arcSpan | number | 72 | Total degrees the icons span across the top of the arc. |
className | string | undefined | Extra classes on the section root. |