Built-in components
The layout, typography, media and interactive components that ship with payload-puck.
editorConfig and baseConfig include these components, grouped into four categories in the editor's component list. Every component's sidebar fields are arranged in General, Style and Layout tabs with a reset button pinned above them; the tab names are the same across components, so the open tab stays put as you select different ones.
Layout
| Component | Description |
|---|---|
| Container | Content wrapper with max-width and background |
| Flex | Flexible box layout with direction and alignment |
| Grid | CSS Grid layout with responsive columns |
| Columns | Multi-column layout with an independent drop zone per column |
| Section | Two layers: a full-bleed section and a constrained content area |
| Spacer | Vertical or horizontal spacing |
| Template | Save and load reusable component arrangements |
Template stores its arrangements in the puck-templates collection, which the plugin adds for you. It uses Payload's REST API at /api/puck-templates, so it needs no extra routes.
Typography
| Component | Description |
|---|---|
| Heading | H1 to H6 headings with size and alignment |
| Text | Paragraph text with styling options |
| RichText | Puck's native rich text editor with font sizes, text colours with opacity, highlights, superscript and subscript, and inline editing on the canvas |
RichText needs @tailwindcss/typography; see Styling.
Media
| Component | Description |
|---|---|
| Image | Responsive image with alt text, from the Payload media library |
Interactive
| Component | Description |
|---|---|
| Button | Styled button or link with variants |
| Card | Content card with optional image |
| Divider | Horizontal rule with styles |
| Accordion | Expandable content sections; the first item opens by default |
Semantic HTML
Layout components can output semantic HTML for SEO and accessibility. Pick the element in the component's sidebar.
| Component | Available elements |
|---|---|
| Section | section, article, aside, nav, header, footer, main, div |
| Flex | div, nav, ul, ol, aside, section |
| Container | div, article, aside, section |
| Grid | div, ul, ol |
Responsive controls
Layout components support per-breakpoint settings for dimensions, padding and margin, and visibility. The editor previews Mobile, Tablet, Desktop and Full Width viewports.
Using individual components
Each component is exported on its own from @delmaredigital/payload-puck/components, in an editor version (SectionConfig) and a server version (SectionServerConfig), so you can build a config from just the ones you want. See Custom components.