Browse all PageHub component schemas with props, examples, and CSS variable references.
View all available CSS custom properties for theming.
Browse Tailwind utility schemas and their options.
Audio player component
Third-party service embed component. Supports booking (Calendly, Cal.com), payments (Stripe, Gumroad, Ko-fi), forms (Typeform, Tally, Jotform), newsletters (Mailchimp, ConvertKit, Beehiiv), audio (Spotify, SoundCloud, Apple Podcasts), social (Instagram, Twitter/X, TikTok), chat widgets (Crisp, Intercom, Tidio), Google Calendar, or custom HTML/iframe/script code.
Image component with responsive image support
Container for multiple Image child components with various display modes (grid, carousel, flex, etc.)
Map component supporting background, static, and interactive display modes with OpenStreetMap tiles and multiple marker points via MapPoint children
Marker lat/lng for a parent Map. Renders editor chrome only; live site uses data from props.
Video embed component supporting multiple providers (YouTube, Vimeo, Dailymotion, Wistia, Facebook, Twitch, or direct URLs)
Craft ROOT node (resolvedName Background). Holds the design system (pallet, styleGuide), site-wide HTML injection (header/footer), SEO fields, company variables for {{company.*}} templates, AI hints, integrations, redirects, and JSON-LD.
Layout container that holds child components. Can contain any type of child component.
Container that groups child components by type for easier management
Horizontal rule divider (renders as <hr>). Use the DaisyUI 'divider' class for styled dividers. Place inside a section Container, never as a standalone 1px Container.
Footer container for site-wide footer content. Same as Container but positioned at the bottom.
Header container for site-wide navigation and branding. Same as Container but positioned at the top.
Empty space component for adding vertical/horizontal spacing between elements
Single button component with optional icon and link
Container for multiple Button child components with layout controls
Shopping cart icon button with live item count badge. Place in navbar/header. Fires toggle-cart action on click to open/close the CartDrawer.
Shopping cart slide-out drawer. Place once at site root level. Toggles open/closed via pagehub:toggle-cart event (fired by CartBadge or toggle-cart action). Shows cart items with quantity controls, subtotal, and checkout button.
Post-checkout notification banner. Place at site root level. Hidden by default — auto-shows after Stripe checkout success or cancellation. Auto-dismisses after configurable delay.
Cookie consent banner: fixed bar that auto-shows on page load, persists accepted/rejected state in localStorage. Wraps child nodes (text, buttons) — no hardcoded content.
Data-aware container. Same layout as Container — one DOM element, no extra wrapper — but repeats its children per item from a connector (Stripe products, customer orders, nested item arrays). Children act as a template with {{item.*}} variables.
CSS grid layout canvas (renders as div with Tailwind grid utilities). Use for responsive columns, card grids, and bento-style layouts. Use Table + TableSection + TableRow + TableCell for semantic data tables.
Standalone decorative or semantic icon. Renders as <span> with inline SVG (react-icons) or media-library image inside. Use this for icons in feature lists, card heroes, inline flourishes, and any icon that is NOT inside a clickable Button/Link. For a clickable icon, use Button with icon.only: true. For an icon next to text in a link/button, use the Button or Link `icon` prop — do NOT add a separate Icon component alongside.
Text-styled hyperlink. Always renders as <a>. Use this for inline text links, 'read more' patterns, nav links, and any clickable text that is NOT a button. For filled/outlined CTAs use Button instead.
Semantic ul/ol container. Add only ListItem children for feature bullets, pricing rows, or checklists. Prefer this over raw HTML lists in Text when you need consistent markers (check, bullet, dash, Material icon).
Single row inside List. Body HTML in props.text; optional markerStyle/markerIcon overrides the parent list defaults.
Scrollable wrapper around a semantic HTML table. Children must be TableSection nodes only (thead/tbody/tfoot), never raw rows.
td or th cell. Body HTML in props.text; optional colSpan/rowSpan/scope.
A single tr. Children are TableCell only.
Maps to thead, tbody, or tfoot. Children are TableRow only.
Rich text component with Tiptap editor support
Form container that holds FormElement children for collecting user input
Single form control (Craft resolvedName FormElement). Props use type (not inputType) for the HTML input kind.
Editor-only wrapper whose craft rule restricts children to FormElement. Do not use for published layout; use FormElement nodes inside Form.