A free React integration carousel that turns connected software stacks into layered, navigable stories.
Stacks that work together
Show the complete systems behind your product, not just the logos on the box.
Connected stack
Join billing, customer context and team response into one commercial signal path.
What this unlocks
Revenue teams see product intent and billing context before the customer has to repeat it.
Signal path
Connected stack
Keep product decisions, source control, deployments and production health in one release record.
What this unlocks
Every launch carries its evidence from approved scope through production health.
Signal path
Connected stack
Connect qualitative conversations to behavioural evidence and durable analysis.
What this unlocks
Teams can trace a roadmap decision back to both the conversation and the behaviour behind it.
Signal path
Connected stack
Turn planning, files, approvals and meetings into a calm operating rhythm.
What this unlocks
Context arrives before the meeting and decisions leave with a clear owner.
Signal path
<IntegrationStackCarousel
title="Every tool has a role"
description={
"Show the complete systems behind your product, " +
"not just the logos on the box."
}
stacks={stacks}
/>Integration Stack Carousel is a free React integration carousel for Next.js and Tailwind that presents complete software relationships as layered cards instead of a passive logo strip. Each stack names the tools, explains their roles and closes with a practical outcome, so visitors can understand how the system works before they follow a link.
Motion retargets the layered transform from its current visual state whenever a visitor uses the previous, next or labelled position controls. The tallest card stays reserved for zero layout shift, stable IDs preserve selection through data changes, fine pointers receive a restrained spring tilt, and reduced-motion or coarse-pointer visitors keep a calm, fully operable carousel.
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/integration-stack-carouselimport { IntegrationStackCarousel } from "@/components/integration-stack-carousel";
const stacks = [
{
id: "release",
label: "Release command",
description: "Connect scope, source control and production health.",
integrations: [
{ id: "linear", label: "Linear", role: "Scope and milestones" },
{ id: "github", label: "GitHub", role: "Pull requests and checks" },
{ id: "vercel", label: "Vercel", role: "Preview and production deploys" },
],
proof: "Every launch carries evidence from approved scope to production.",
href: "/integrations/release",
},
{
id: "revenue",
label: "Revenue intelligence",
description: "Join billing events to account context.",
integrations: [
{ id: "stripe", label: "Stripe", role: "Billing events" },
{ id: "hubspot", label: "HubSpot", role: "Account context" },
],
proof: "Commercial teams see one shared customer signal.",
},
{
id: "support",
label: "Customer support",
description: "Connect conversations to product evidence.",
integrations: [
{ id: "intercom", label: "Intercom", role: "Customer conversations" },
{ id: "posthog", label: "PostHog", role: "Product behaviour" },
],
proof: "Support can answer with the journey already in view.",
},
];
export function Example() {
return (
<IntegrationStackCarousel
title="Every tool has a role"
description="Show the complete systems behind your product."
stacks={stacks}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Stacks that work together" | Introductory label above the section title. |
| title | string | required | Section heading rendered as an h2. |
| description | string | undefined | Optional supporting section copy. |
| stacks | { id; label; description; integrations; proof; href? }[] | required | Three to seven connected stack stories. Every stack and nested integration requires a unique, stable ID. |
| activeId | string | undefined | Controlled active stack ID. |
| defaultActiveId | string | first stack ID | Initial stack ID for uncontrolled usage. |
| onActiveChange | (id: string) => void | undefined | Called with a valid stable ID after previous, next or position navigation. |
| cardSpread | number | 22 | Horizontal layer spread in pixels, clamped from 10 to 44. |
| depth | number | 12 | Per-layer z-depth in pixels, clamped from 4 to 24. |
| maxTilt | number | 5 | Maximum fine-pointer active-card tilt in degrees, clamped from 0 to 8. |
| transitionDuration | number | 0.52 | Transition duration in seconds, clamped from 0.2 to 1. |
| className | string | undefined | Additional classes merged onto the section root. |
The content stays in the stacks array while effect geometry remains independent. Tune cardSpread for the visible fan, depth for the layered perspective, maxTilt for fine-pointer response and transitionDuration for the navigation cadence. Every value is clamped to the component's tested range.
<IntegrationStackCarousel
title="Systems built around the customer"
stacks={stacks}
cardSpread={30}
depth={16}
maxTilt={3}
transitionDuration={0.65}
/>