Integration Connector Rail
A free SaaS integrations component with selectable connection evidence.
One connection, every workflow
Connect the work, not just the tools
Choose an integration to see exactly what moves between your product system and the teams shipping from it.
Empire OS
The source of truth for every product decision
Live relationship
Empire OS and Linear
Turn product decisions into linked issues and carry delivery status back.
Synced capabilities
- Two-way issue sync
- Milestone updates
- Priority mapping
- Release evidence
Customise
Code
<IntegrationConnectorRail
title="Connect the work, not just the tools"
product={{ label: "Empire OS", description: "Your source of truth" }}
items={[
{
id: "linear",
label: "Linear",
description: "Keep roadmap decisions linked to delivery.",
capabilities: ["Two-way issue sync", "Milestone updates"],
},
{
id: "github",
label: "GitHub",
description: "Attach pull requests and checks to product work.",
capabilities: ["Pull request links", "Check summaries"],
},
{
id: "slack",
label: "Slack",
description: "Route decisions to the right channels.",
capabilities: ["Channel routing", "Approval actions"],
},
]}
/>Integration Connector Rail is a free integrations section for Next.js and React, styled with Tailwind and animated with Motion. It presents one source product, a manual tab rail of connected apps, and a stable evidence panel describing the capabilities shared with each integration.
Selecting an app retargets one shared marker, draws its connector once, sends a single packet along the path, and swaps the relationship panel without shifting the surrounding page. Keyboard users get orientation-aware arrow controls, Home and End navigation, and a single roving tab stop. Reduced motion keeps connector geometry settled and makes every update immediate.
Install
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-connector-railUsage
import { IntegrationConnectorRail } from "@/components/integration-connector-rail";
const integrations = [
{
id: "linear",
label: "Linear",
description: "Keep roadmap decisions linked to delivery.",
capabilities: ["Two-way issue sync", "Milestone updates"],
href: "/integrations/linear",
},
{
id: "github",
label: "GitHub",
description: "Attach pull requests and checks to product work.",
capabilities: ["Pull request links", "Check summaries"],
href: "/integrations/github",
},
{
id: "slack",
label: "Slack",
description: "Route decisions to the channels that need them.",
capabilities: ["Channel routing", "Approval actions"],
},
];
export default function Page() {
return (
<IntegrationConnectorRail
title="Connect the work, not just the tools"
product={{ label: "Empire OS", description: "Your source of truth" }}
items={integrations}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "One connection, every workflow" | Introductory label above the section heading. |
| title | string | required | Section heading rendered as an h2. |
| description | string | undefined | Optional supporting copy below the heading. |
| product | { label: string; description?: string } | required | Fixed source product shown at the head of the rail. |
| items | IntegrationItem[] | required | Three to eight integrations with stable IDs, descriptions, capability lists and optional links. |
| activeId | string | undefined | Active integration ID for controlled usage. |
| defaultActiveId | string | first item ID | Initial integration ID for uncontrolled usage. |
| onActiveChange | (id: string) => void | undefined | Called after the visitor makes a valid selection. |
| orientation | "horizontal" | "vertical" | "horizontal" | Desktop rail direction. Narrow screens always use a vertical rail. |
| railGap | number | 28 | Gap between choices in pixels, clamped from 16 to 56. |
| packetDuration | number | 1.1 | One-shot packet duration in seconds, clamped from 0.45 to 3. |
| markerSize | number | 48 | Marker diameter in pixels, clamped from 40 to 72. |
| className | string | undefined | Additional classes merged onto the section root. |
Customisation
Use the orientation, railGap, packetDuration and markerSize props to tune geometry and response. The connector colours are Tier 3 tokens that default to the global border and primary semantic tokens:
<IntegrationConnectorRail
title="Connected to your workflow"
product={product}
items={integrations}
orientation="vertical"
railGap={36}
packetDuration={0.8}
markerSize={56}
className="integration-rail-brand"
/>
.integration-rail-brand {
--integration-connector-line: var(--muted);
--integration-connector-active: var(--primary);
--integration-connector-packet: var(--primary);
}Frequently asked questions
- Is Integration Connector Rail free for commercial use?
- Yes. Integration Connector Rail is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is the connector rail accessible?
- Yes. It uses a labelled section and a manual tab pattern with stable relationships, roving tab index, orientation-aware arrow keys, Home and End controls, visible focus states, and real links. Capability meaning stays in normal HTML. Reduced motion removes marker, packet and panel movement.
- How can I customise the connector effect?
- Choose a horizontal or vertical desktop rail, then adjust the gap, packet duration and marker size props. Override the three connector colour tokens to fit your theme. Integration copy and capability data remain ordinary typed props rather than playground text controls.