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
Map component supporting background, static, and interactive display modes with OpenStreetMap tiles and multiple marker points via MapPoint children
A route line drawn across a parent Map — the 'here's how you drive in' overlay. Renders editor chrome only; the parent Map draws the line on the live site. Use for businesses that are hard to find (set back from the street, behind another building, shared lot).
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.
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.
Single button component with optional icon and link
Shopping cart badge wrapper. Place in navbar/header. Default preset includes a child toggle-cart button.
Shopping cart slide-out drawer. Place once at site root level. Visibility is driven by the `cart:open` state key — any Button with `action: { type: "toggle-cart" }` flips it (or `action: { type: "set-state", key: "cart:open", value: "shown" }` for explicit open). The optional backdrop reads the same key via `Container.visibilityStateKey: "cart:open"`. Shows cart items with quantity controls, subtotal, and checkout button.
Runtime cart line-item list for the CartDrawer. Reads live items from cart context and renders quantity controls in viewer mode.
Runtime subtotal row for CartDrawer. Reads total from cart context and shows formatted currency.
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.
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.
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.
Stripe storefront repeater surface. Use for product grids/lists/cards bound to Stripe data.
Rich text component with Tiptap editor support
Lead-capture form that maps submissions to a CRM connector collection.
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.