---
name: "@payload-components"
slug: "payload-components"
description: "MIT registry of typed Payload CMS blocks for Payload v3 + Next.js. Each block installs as reviewable source; the companion CLI also wires collection config, RenderBlocks, types, and the admin import map."
category: "Animated components"
tags: ["animation", "backgrounds", "blocks", "buttons", "cards", "cms", "dashboard", "forms", "icons", "maps", "marketing", "media", "tables"]
framework: "react"
license: "MIT"
author: "Ducksss"
website: "https://www.payload-components.xyz"
github: "https://github.com/Ducksss/payload-components"
registry: "https://www.payload-components.xyz/r/registry.json"
pro: false
pro_url: null
github_stars: 17
component_count: 67
generated_at: "2026-07-28T08:00:50.948Z"
---

# @payload-components

MIT registry of typed Payload CMS blocks for Payload v3 + Next.js. Each block installs as reviewable source; the companion CLI also wires collection config, RenderBlocks, types, and the admin import map.

## Links

- Website: https://www.payload-components.xyz
- GitHub: https://github.com/Ducksss/payload-components
- Registry JSON: https://www.payload-components.xyz/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/payload-components
- This file: https://sh4dcn.vercel.app/md/payload-components.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://www.payload-components.xyz/r/registry.json
pnpm dlx shadcn@latest add https://www.payload-components.xyz/r/registry.json
bunx shadcn@latest add https://www.payload-components.xyz/r/registry.json
# clone the source repo
git clone https://github.com/Ducksss/payload-components.git
# fetch the raw registry index
curl -s https://www.payload-components.xyz/r/registry.json
```

## Components (67)

| name | type | description | install |
| --- | --- | --- | --- |
| hero-basic | registry:block | Payload Components proof-of-concept hero block. | `npx shadcn@latest add https://www.payload-components.xyz/r/hero-basic.json` |
| hero-video | registry:block | Full-bleed video hero with editor-managed media and a reduced-motion poster fallback. | `npx shadcn@latest add https://www.payload-components.xyz/r/hero-video.json` |
| hero-product-tilt | registry:block | Centered product hero with a static perspective frame and editor-managed media. | `npx shadcn@latest add https://www.payload-components.xyz/r/hero-product-tilt.json` |
| hero-aurora | registry:block | Motion-first product hero with an animated aurora field, staggered reveal, parallax panel, and metric ticker. | `npx shadcn@latest add https://www.payload-components.xyz/r/hero-aurora.json` |
| hero-kinetic | registry:block | Motion-first editorial hero with a line-masked type reveal, cinematic plate, and velocity marquee. | `npx shadcn@latest add https://www.payload-components.xyz/r/hero-kinetic.json` |
| feature-grid-basic | registry:block | Text-first Payload feature grid with optional CTA wiring. | `npx shadcn@latest add https://www.payload-components.xyz/r/feature-grid-basic.json` |
| feature-split | registry:block | Two-column Payload feature block: heading and CTA beside a feature list. | `npx shadcn@latest add https://www.payload-components.xyz/r/feature-split.json` |
| feature-bento | registry:block | Asymmetric Payload bento grid with a featured lead cell and supporting cells. | `npx shadcn@latest add https://www.payload-components.xyz/r/feature-bento.json` |
| feature-steps | registry:block | Numbered Payload steps block for sequential, how-it-works feature flows. | `npx shadcn@latest add https://www.payload-components.xyz/r/feature-steps.json` |
| feature-accordion | registry:block | Synchronized feature accordion with editor-selected icons and optional media. | `npx shadcn@latest add https://www.payload-components.xyz/r/feature-accordion.json` |
| feature-cards-media | registry:block | Two-column feature cards with independent media and optional icons. | `npx shadcn@latest add https://www.payload-components.xyz/r/feature-cards-media.json` |
| feature-icon-grid | registry:block | Dense feature grid with editor-selected icons and a tokenized radial decorator. | `npx shadcn@latest add https://www.payload-components.xyz/r/feature-icon-grid.json` |
| embed-basic | registry:block | Responsive, accessible sandboxed iframe block for approved HTTPS embeds. | `npx shadcn@latest add https://www.payload-components.xyz/r/embed-basic.json` |
| logo-cloud-grid | registry:block | Centered, wrapping wall of editable logo uploads under a heading. | `npx shadcn@latest add https://www.payload-components.xyz/r/logo-cloud-grid.json` |
| logo-cloud-hover | registry:block | Logo wall that dims and blurs on hover to reveal a CTA link. | `npx shadcn@latest add https://www.payload-components.xyz/r/logo-cloud-hover.json` |
| logo-cloud-marquee | registry:block | Auto-scrolling marquee of editable logos with progressive-blur edge fades. | `npx shadcn@latest add https://www.payload-components.xyz/r/logo-cloud-marquee.json` |
| logo-cloud-inline | registry:block | Compact label-over-logos strip of editable trust logos. | `npx shadcn@latest add https://www.payload-components.xyz/r/logo-cloud-inline.json` |
| logo-cloud-inline-wrap | registry:block | Single wrapping row keeping the label inline with editable logos. | `npx shadcn@latest add https://www.payload-components.xyz/r/logo-cloud-inline-wrap.json` |
| content-columns | registry:block | Two-column Payload content block: a heading beside body copy and a CTA. | `npx shadcn@latest add https://www.payload-components.xyz/r/content-columns.json` |
| content-image-lead | registry:block | Payload content block led by a full-width image above a heading, body, and CTA. | `npx shadcn@latest add https://www.payload-components.xyz/r/content-image-lead.json` |
| content-feature-media | registry:block | Payload content block: body copy and two icon features beside a framed media panel. | `npx shadcn@latest add https://www.payload-components.xyz/r/content-feature-media.json` |
| content-feature-split | registry:block | Payload content block: a side media panel beside body copy and two icon features. | `npx shadcn@latest add https://www.payload-components.xyz/r/content-feature-split.json` |
| content-showcase | registry:block | Payload content block: a centered intro, a full-width image, and a four-up feature grid. | `npx shadcn@latest add https://www.payload-components.xyz/r/content-showcase.json` |
| content-quote | registry:block | Payload content block: a media panel beside body copy and a cited pull quote. | `npx shadcn@latest add https://www.payload-components.xyz/r/content-quote.json` |
| content-community | registry:block | Payload content block: a centered heading and body above a wall of community avatars. | `npx shadcn@latest add https://www.payload-components.xyz/r/content-community.json` |
| integration-grid | registry:block | A responsive grid of integration cards with logo, name, description, and a learn-more link. | `npx shadcn@latest add https://www.payload-components.xyz/r/integration-grid.json` |
| integration-cluster | registry:block | A centered cluster of integration logos around a featured brand mark, with a heading and CTA. | `npx shadcn@latest add https://www.payload-components.xyz/r/integration-cluster.json` |
| integration-split | registry:block | A two-column section pairing a featured-mark logo cluster with a heading, subtext, and CTA. | `npx shadcn@latest add https://www.payload-components.xyz/r/integration-split.json` |
| integration-connect | registry:block | Integration logos wired to a central brand mark by connector lines. | `npx shadcn@latest add https://www.payload-components.xyz/r/integration-connect.json` |
| integration-orbit | registry:block | Concentric rings of integration logos that orbit a featured brand mark on hover. | `npx shadcn@latest add https://www.payload-components.xyz/r/integration-orbit.json` |
| integration-list | registry:block | A vertical list of integration rows with logo, name, description, and an add action. | `npx shadcn@latest add https://www.payload-components.xyz/r/integration-list.json` |
| integration-marquee | registry:block | Three auto-scrolling rows of integration logos around a featured brand mark. | `npx shadcn@latest add https://www.payload-components.xyz/r/integration-marquee.json` |
| integration-testimonial | registry:block | A two-column section pairing a customer quote with a grid of integration logo cards. | `npx shadcn@latest add https://www.payload-components.xyz/r/integration-testimonial.json` |
| content-split-rows | registry:block | Payload content block: an intro above alternating media-and-text rows. | `npx shadcn@latest add https://www.payload-components.xyz/r/content-split-rows.json` |
| content-rows | registry:block | Payload content block: an intro above a uniform stack of media-and-text rows. | `npx shadcn@latest add https://www.payload-components.xyz/r/content-rows.json` |
| content-image-frame | registry:block | Payload content block: a centered intro above a layered, framed screenshot. | `npx shadcn@latest add https://www.payload-components.xyz/r/content-image-frame.json` |
| content-stats | registry:block | Payload content block: an intro, a grid of icon features, and a stats list. | `npx shadcn@latest add https://www.payload-components.xyz/r/content-stats.json` |
| content-list | registry:block | Payload content block: a serif heading beside a labeled-term list. | `npx shadcn@latest add https://www.payload-components.xyz/r/content-list.json` |
| content-list-columns | registry:block | Payload content block: a serif heading above a two-column labeled-term list. | `npx shadcn@latest add https://www.payload-components.xyz/r/content-list-columns.json` |
| content-list-icons | registry:block | Payload content block: a serif heading and intro above a multi-column icon list. | `npx shadcn@latest add https://www.payload-components.xyz/r/content-list-icons.json` |
| call-to-action-centered | registry:block | Centered Payload call-to-action block: heading, copy, and one or two CTA links. | `npx shadcn@latest add https://www.payload-components.xyz/r/call-to-action-centered.json` |
| call-to-action-boxed | registry:block | Boxed Payload call-to-action block: heading, copy, and CTA links inside a nested panel. | `npx shadcn@latest add https://www.payload-components.xyz/r/call-to-action-boxed.json` |
| call-to-action-signup | registry:block | Email-capture Payload call-to-action block: heading, copy, and a form that posts to a same-origin endpoint. | `npx shadcn@latest add https://www.payload-components.xyz/r/call-to-action-signup.json` |
| contact-routing-form | registry:block | Validated contact channels beside an accessible same-origin inquiry form. | `npx shadcn@latest add https://www.payload-components.xyz/r/contact-routing-form.json` |
| team-roster | registry:block | Payload team block: department-grouped sections, each a grid of member avatars with name and role. | `npx shadcn@latest add https://www.payload-components.xyz/r/team-roster.json` |
| team-grid | registry:block | Payload team block: a heading and intro above a responsive grid of member photo cards that reveal role on hover. | `npx shadcn@latest add https://www.payload-components.xyz/r/team-grid.json` |
| faq-accordion | registry:block | Payload FAQ block: a centered accordion of question/answer items with an optional CTA. | `npx shadcn@latest add https://www.payload-components.xyz/r/faq-accordion.json` |
| faq-split | registry:block | Payload FAQ block: a two-column layout pairing a sticky heading and CTA with an accordion. | `npx shadcn@latest add https://www.payload-components.xyz/r/faq-split.json` |
| faq-card | registry:block | Payload FAQ block: a centered accordion wrapped in a card with an optional CTA. | `npx shadcn@latest add https://www.payload-components.xyz/r/faq-card.json` |
| faq-icons | registry:block | Payload FAQ block: an accordion with a per-question icon from a fixed allowlist. | `npx shadcn@latest add https://www.payload-components.xyz/r/faq-icons.json` |
| faq-grouped | registry:block | Payload FAQ block: titled, icon-tagged category groups of accordions. | `npx shadcn@latest add https://www.payload-components.xyz/r/faq-grouped.json` |
| faq-grid | registry:block | Payload FAQ block: a static two-column grid of question/answer cards. | `npx shadcn@latest add https://www.payload-components.xyz/r/faq-grid.json` |
| comparator-table | registry:block | Tiered feature-comparison table Payload block: plan columns with CTAs over grouped feature rows. | `npx shadcn@latest add https://www.payload-components.xyz/r/comparator-table.json` |
| comparator-grid | registry:block | Plan-column comparison Payload block: pricing columns in a bordered card over a feature matrix. | `npx shadcn@latest add https://www.payload-components.xyz/r/comparator-grid.json` |
| comparator-stack | registry:block | Stacked plan-card comparison Payload block: one card per plan with its own price, CTA, and feature checklist. | `npx shadcn@latest add https://www.payload-components.xyz/r/comparator-stack.json` |
| testimonials-quote | registry:block | Payload testimonials block: a single featured quote with a left accent bar, author, optional role, and avatar. | `npx shadcn@latest add https://www.payload-components.xyz/r/testimonials-quote.json` |
| testimonials-spotlight | registry:block | Payload testimonials block: a single centered testimonial with a quote-mark, large avatar, author, and role. | `npx shadcn@latest add https://www.payload-components.xyz/r/testimonials-spotlight.json` |
| testimonials-grid | registry:block | Payload testimonials block: a heading above a responsive grid of quote cards, each with author, optional role, and avatar. | `npx shadcn@latest add https://www.payload-components.xyz/r/testimonials-grid.json` |
| testimonials-rating | registry:block | Payload testimonials block: a responsive grid of review cards, each with a star rating, quote, author, optional role, and avatar. | `npx shadcn@latest add https://www.payload-components.xyz/r/testimonials-rating.json` |
| testimonials-bento | registry:block | Payload testimonials block: an asymmetric bento with one featured quote in a large cell and supporting quotes around it. | `npx shadcn@latest add https://www.payload-components.xyz/r/testimonials-bento.json` |
| testimonials-wall | registry:block | Payload testimonials block: a heading above a multi-column masonry wall of compact testimonial cards. | `npx shadcn@latest add https://www.payload-components.xyz/r/testimonials-wall.json` |
| stats-proof | registry:block | Narrative and prominent string metrics paired with semantic customer proof. | `npx shadcn@latest add https://www.payload-components.xyz/r/stats-proof.json` |
| pricing-cards | registry:block | Three-up pricing table of editable plan cards with a highlighted plan. | `npx shadcn@latest add https://www.payload-components.xyz/r/pricing-cards.json` |
| pricing-cards-muted | registry:block | Three-up pricing table on muted card surfaces with a highlighted plan. | `npx shadcn@latest add https://www.payload-components.xyz/r/pricing-cards-muted.json` |
| pricing-cards-cta | registry:block | Three-up pricing table with the CTA inside each plan header. | `npx shadcn@latest add https://www.payload-components.xyz/r/pricing-cards-cta.json` |
| pricing-split | registry:block | Two-plan split pricing: a compact entry plan beside an expanded featured plan. | `npx shadcn@latest add https://www.payload-components.xyz/r/pricing-split.json` |
| pricing-enterprise | registry:block | Single wide enterprise pricing panel with an editable trust-logo wall. | `npx shadcn@latest add https://www.payload-components.xyz/r/pricing-enterprise.json` |

## For AI agents

```text
You are adding components from @payload-components to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/payload-components.md) for the component list.
2. Fetch the machine-readable index: https://www.payload-components.xyz/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: payload-components).
```