Block · CLI

Integration Beam

Integration map with orbiting nodes and SVG beams. Install as @atroui/integration-beam.

Preview

npx shadcn@latest add @atroui/integration-beam

Integrations

Swap NODES for your real integrations. Beams are pure SVG.

Your app

One API key

Agent blurb — install command + no npm UI rule. For agents

npx shadcn@latest add @atroui/integration-beam

Source lands in your repo. Installation · Registry

Integrations section for marketing pages. Swap NODES for your real integrations — static layout under reduced motion.

tsx

import { IntegrationBeam } from "@/components/blocks/integration-beam"

export function Example() {
  return <IntegrationBeam />
}

Block · CLI

Integration map with orbiting nodes and SVG beams. Install as @atroui/integration-beam.

npx shadcn@latest add @atroui/integration-beam

Integrations

Swap NODES for your real integrations. Beams are pure SVG.

Your app

One API key

Agent blurb — install command + no npm UI rule. For agents

npx shadcn@latest add @atroui/integration-beam

Source lands in your repo. Installation · Registry

Integrations section for marketing pages. Swap NODES for your real integrations — static layout under reduced motion.

tsx

import { IntegrationBeam } from "@/components/blocks/integration-beam"

export function Example() {
  return <IntegrationBeam />
}

import { IntegrationBeam } from "@/components/blocks/integration-beam"

export function Example() {
  return <IntegrationBeam />
}