Documentation

AnimatedCounter

An animated number counter that smoothly counts from a start value to an end value when scrolled into view, ideal for showcasing statistics, metrics, and numbers on any site.

general

AnimatedGradient

Smooth animated gradient background for modern, premium aesthetics. Supports linear and radial gradients with configurable colors, animation speed, and intensity. GPU‑accelerated for smooth 60fps performance.

general

AppSettings

App-level configuration that applies to the entire application. It controls app metadata, publishing, authentication, email notifications, SEO, webhooks, and branding. These settings are distinct from page-level and component-level properties.

general

Badge

A small label or tag component used for status indicators, categories, highlights, and similar purposes. It supports multiple visual variants.

general

Button

An interactive button component that supports link navigation, page data source operations (record navigation, new record, mode switching), form submission, and custom JavaScript execution. Save/Delete actions must use a custom script with navigation. The component offers two visual variants and can enable or disable dynamically based on data context.

interactive

Calendar

A full‑featured calendar component built with react‑big‑calendar. It can display events in month, week, day, or agenda views and includes navigation and view‑switching capabilities, making it suitable for any site that needs scheduling, event management, or date visualization.

general

Card

Feature card component with an icon, title, description, and entrance animations. Ideal for showcasing features, services, or benefits in grid layouts with world‑class animation support.

general

Carousel

A professional carousel/slider component that automatically rotates slides, provides navigation controls, and supports customizable transition effects. It can display images, text overlays, and call‑to‑action buttons, making it suitable for any site type.

general

Chart

Professional data visualization component using Recharts. Supports bar, line, pie, and area charts with customizable styling. Universal component suitable for any site type that displays data such as dashboards, analytics, reports, statistics, progress tracking, and comparisons.

general

Chatbot

AI Chatbot component that embeds a chatbot on any page. It can appear as a floating widget (corner bubble) or be placed inline within page content.

advanced

Checkbox

A checkbox group component that lets users select multiple options from a predefined list. It renders as a set of checkboxes with individual labels and supports vertical or horizontal layout.

inputs

ConfettiTrigger

Triggers a confetti explosion on page load, button click, or manually. Ideal for celebration moments such as form‑submission success, milestone achievements, or festive events. Uses a hardware‑accelerated canvas animation.

general

CountdownTimer

A real‑time countdown timer that shows the time remaining until a specified target date/time. It updates every second, offers customizable formatting, and displays a completion message when the countdown reaches zero. Suitable for any site.

general

DataCardGrid

A visual card‑based grid for displaying data. Ideal for consumer‑facing content where visual discovery matters, such as recipes, products, portfolios, and similar collections. Use it instead of DataGrid when browsing or discovering items is more important than managing data.

data-display

DataGrid

A feature‑rich data grid powered by AG Grid Community. It can display structured data from static JSON or dynamic data sources such as database tables or REST APIs. The grid supports virtual scrolling, column resizing and filtering, CSV export, inline editing, CRUD actions, and custom JavaScript handlers for row clicks.

data-display

DataSourceSearch

A search/filter control that connects to a page data source. Place it above a DataGrid to add search functionality.

advanced

Date

Date picker input for selecting dates. Provides a calendar popup on desktop and a native date picker on mobile.

inputs

DateTime

A combined date and time picker input that lets users select both a calendar date and a clock time. It uses the native <code>datetime-local</code> picker on most platforms.

inputs

DateTimePicker

A flexible date and time picker built with react-datepicker. It can handle date‑only, time‑only, combined datetime, and date‑range selections, with customizable formatting for any site that requires date or time input.

inputs

DecorativeDivider

An elegant decorative element that shows horizontal lines with an optional icon between them. Place it above section headings to add visual polish and signal the start of important sections, creating the “--- icon ---” pattern often seen on premium websites.

general

Divider

A horizontal line that visually separates content sections, helping to establish hierarchy and organization.

layout

Dropdown

Select dropdown for choosing one option from a predefined list. Supports static options, dynamic options from queries, and query‑centric data binding.

inputs

FileUpload

File upload input component allowing users to select and upload files with validation for file types, size limits, and multiple file selection.

general

Flex

A flexible layout component that uses CSS Flexbox to arrange child components horizontally (row) or vertically (column). It offers control over alignment, justification, gaps, and wrapping, and includes a default top margin of 20 px for vertical spacing.

layout

FloatingElements

Animated floating elements such as hearts, stars, sparkles, bubbles, or petals that create a whimsical background layer. The component lets you configure density, speed, colors, layering, and optional blur to suit weddings, celebrations, romance, or creative portfolio contexts.

general

Footer

Responsive footer component that displays brand identity, organized link groups, social media links, and a copyright notice. It supports light and dark visual variants and adapts its grid layout from mobile to desktop.

navigation

GameCanvas

An interactive HTML5 Canvas component that provides a sandboxed JavaScript environment for building games and interactive visualizations. It includes a game loop, keyboard input handling, score tracking, and high‑score persistence, making it suitable for classic arcade titles, puzzles, educational games, and other interactive experiences.

general

Grid

Responsive grid layout component that arranges child components in equal‑width columns. It automatically stacks to a single column on mobile devices, making it ideal for professional multi‑column form layouts and card grids.

layout

Heading

Heading text with configurable size and semantic HTML level. Used for page titles, section headers, and content hierarchy.

typography

Hero

Large banner section with a heading, description, optional image, and call‑to‑action buttons. Ideal for landing pages, feature introductions, and main page banners.

general

HeroParallax

A scroll‑based parallax hero section that applies 3D rotation and translation effects to three animated rows of products or items. Each row moves according to scroll position using spring physics, and every item links to a page within your app.

general

HoverScale

Provides a subtle zoom or lift animation on hover for images and cards. It adds responsive, interactive feel to photo‑heavy sites while keeping performance smooth with pure CSS.

general

Image

The Image component displays photos, illustrations, or graphics and supports various sizing and fit modes.

media

Input

Single-line text input field with support for various input types (text, email, password, number, tel, url). Includes label, placeholder, validation, and data binding capabilities.

inputs

Logos

Displays a horizontal row of logos for partners, clients, integrations, or certifications. Use on landing pages to show social proof.

general

Map

Embedded Google Maps for displaying locations. Use an address or latitude/longitude coordinates.

advanced

Navbar

A responsive navigation bar that displays brand identity, navigation links, an optional call‑to‑action button, and a mobile hamburger menu. It supports three visual variants (light, dark, glass) and can be fixed to the top of the viewport.

navigation

PageRoot

Page-level configuration stored in <code>puckData.root.props</code>. It controls page metadata, data sources, form settings, and overall page behavior. These settings apply to the entire page, not to individual components.

general

PhotoGallery

An interactive photo gallery that includes a lightbox viewer, offering grid or masonry layouts with hover effects and click‑to‑zoom functionality. It can be used on any type of site.

general

QRCode

Generates a QR code from provided content such as URLs, text, or vCard data. Suitable for shareable links, tickets, payments, and contact information.

advanced

Radio

Radio button group for selecting one option from mutually exclusive choices. Use when the user can see all options at once, typically with 2‑5 options.

inputs

RichText

Rich text component that supports HTML formatting such as bold, italic, links, lists, and headings. All content is sanitized with DOMPurify for security.

typography

RoleGate

Conditional rendering component that shows or hides content based on user roles. It supports OR logic (user needs any role) or AND logic (user needs all roles). Use it for role‑specific UI elements such as admin buttons or owner‑only sections.

authentication

ScrollReveal

Scroll-triggered animations that reveal content as the user scrolls down the page. It supports a stagger mode for card grids where child elements animate one‑by‑one and uses IntersectionObserver for performance.

general

ShoppingCart

E‑commerce shopping cart component with a product grid, category filtering, a floating cart sidebar, and configurable checkout. Product data is loaded via a query binding with field mappings for title, price, image, categories, and more. The component provides add‑to‑cart, quantity controls, and subtotal calculation.

general

Signature

A signature capture pad for forms that need handwritten signatures. The component records the signature and provides it as a data URL for storage.

inputs

SkeletonLoader

A loading placeholder that displays a shimmer or pulse animation while content loads, providing a professional UX for data fetched from APIs or databases.

general

Space

A spacing component that adds vertical or horizontal whitespace between elements, ensuring consistent spacing throughout a layout.

layout

Stats

A component that displays multiple statistics or feature items in a horizontal row, showing a title and a short description for each. Ideal for highlighting key metrics, features, or value propositions.

general

Table

A simple read‑only data table for displaying tabular data. Use DataGrid instead if pagination, sorting, search, or inline editing are required.

advanced

Text

A simple paragraph component for body copy, descriptions, and supporting text. It allows alignment, sizing, and color customization.

typography

TextArea

A multi-line text input field for longer content such as descriptions, comments, notes, or messages. Supports configuration of visible rows and a maximum character length.

inputs

TextHighlight

Animated background, underline, or text‑gradient highlights applied to key phrases within a block of text. Uses pure CSS for smooth performance and works well with hero copy, headings, and benefit statements.

general

Time

Time picker input for selecting times. Provides time selection interface on desktop and native time picker on mobile.

inputs

Timeline

An animated vertical timeline with a scroll‑based progress indicator that presents chronological entries, each with a title, description, optional bullet points, and optional images. Ideal for company histories, product roadmaps, project milestones, changelogs, and “About Us” pages.

general

TypingAnimation

A dynamic typing animation that cycles through multiple text strings, creating an eye‑catching typewriter effect for headlines and other prominent text areas.

general

VideoPlayer

A professional video player that supports URLs from YouTube, Vimeo, Facebook, Twitch, SoundCloud, Streamable, Wistia, DailyMotion, Mixcloud, as well as direct file URLs. It is fully responsive, offers customizable controls, and allows setting of aspect ratios, making it suitable for any site type.

media