Integration Orbit
Concentric rings of integration logos that orbit a featured brand mark on hover.
Installation
npx payload-components add integration-orbitWhat it installs
Copies 3 source files into your project:
src/blocks/shared/integrationFields.tssharedsrc/blocks/IntegrationOrbit/config.tssrc/blocks/IntegrationOrbit/Component.tsx
…and makes 4 edits to wire the block into your project:
| Registers the block | src/collections/Pages/index.ts |
| Maps the renderer | src/blocks/RenderBlocks.tsx |
| Regenerates types | src/payload-types.ts |
| Regenerates the admin import map | src/app/(payload)/admin/importMap.js |
src/collections/Pages/index.tssrc/blocks/RenderBlocks.tsxsrc/payload-types.tssrc/app/(payload)/admin/importMap.jsintegrationFields.ts is the shared field core for this family — every variant composes it. Editing it updates each installed block at once, and re-running an install never overwrites a copy you have changed.Re-running the install converges: it detects existing wiring, skips it, and records install state in .payload-components/state.json.
Content model
heading, subtext, and integrations come from the shared integrationFields base. This variant
adds an optional featuredLogo at the center of the rings. The rings spin only on hover and respect
prefers-reduced-motion.
Prop
Type
Each item in integrations carries:
Prop
Type
Usage
IntegrationOrbit block to its layout.RenderBlocks on the frontend, fully typed — no extra wiring.Requirements
- Target
- payload-website-starter
- Payload
- v3
- Next.js
- 15 / 16
- shadcn UI
- none
Your project must already expose components.json, src/payload.config.ts, src/blocks/RenderBlocks.tsx, src/collections/Pages/index.ts — the surfaces payload-components add patches. The CLI verifies this against the support matrix before touching anything.
In this family
integration-orbitcurrentintegration-marqueeintegration-connectintegration-clusterintegration-splitintegration-gridintegration-listintegration-testimonial