Skip to main content

Blueprints

Blueprints are copy-paste patterns built entirely from WireKit components, organized in two flavors:

  • Partials — marketing-page building blocks. Hero sections, feature grids, pricing tables, FAQs, footers, CTAs — drop one into a landing page and customize.
  • Recipes — worked examples that compose several WireKit primitives into a complete UI shape. Live-updating KPI strips, on-page TOCs, long-form article shells, marketing landing pages with full code walk-throughs.

Both are production-grade Blade snippets — no new dependencies, no stylesheet and no class names of their own. Layout that a component does not already express is a handful of inline one-offs (a max-width, a text-align); every COLOR resolves through a WireKit design token, so a theme change reaches all of it.

Partials

Self-contained marketing-section patterns. Each partial is a single Blade snippet you paste into a parent layout and customize.

Marketing Partials

Hero

Page-top hero with headline, supporting copy, primary CTA, and optional secondary action.

Features

Three- or four-column feature grid with icons, titles, and short descriptions.

Pricing

Comparison-style pricing table with featured tier and per-tier feature lists.

Testimonials

Quote-card grid with avatars and attribution.

Logo cloud

Trust-signal logo strip for "trusted by" sections.

FAQ

Accordion-based question/answer list with expand/collapse.

CTA

Conversion-focused call-to-action block with headline + primary button.

Footer

Multi-column site footer with link groups, brand mark, and legal line.

 
<x-wirekit::grid cols="1 md:2 lg:3">
    <x-wirekit::card href="/blueprints/partials/hero">
        <x-wirekit::card.body>
            <x-wirekit::heading level="3" size="sm">Hero</x-wirekit::heading>
            <x-wirekit::text size="sm">Page-top hero with headline, supporting copy, primary CTA, and optional secondary action.</x-wirekit::text>
        </x-wirekit::card.body>
    </x-wirekit::card>

    <x-wirekit::card href="/blueprints/partials/features">
        <x-wirekit::card.body>
            <x-wirekit::heading level="3" size="sm">Features</x-wirekit::heading>
            <x-wirekit::text size="sm">Three- or four-column feature grid with icons, titles, and short descriptions.</x-wirekit::text>
        </x-wirekit::card.body>
    </x-wirekit::card>

    <x-wirekit::card href="/blueprints/partials/pricing">
        <x-wirekit::card.body>
            <x-wirekit::heading level="3" size="sm">Pricing</x-wirekit::heading>
            <x-wirekit::text size="sm">Comparison-style pricing table with featured tier and per-tier feature lists.</x-wirekit::text>
        </x-wirekit::card.body>
    </x-wirekit::card>

    <x-wirekit::card href="/blueprints/partials/testimonials">
        <x-wirekit::card.body>
            <x-wirekit::heading level="3" size="sm">Testimonials</x-wirekit::heading>
            <x-wirekit::text size="sm">Quote-card grid with avatars and attribution.</x-wirekit::text>
        </x-wirekit::card.body>
    </x-wirekit::card>

    <x-wirekit::card href="/blueprints/partials/logo-cloud">
        <x-wirekit::card.body>
            <x-wirekit::heading level="3" size="sm">Logo cloud</x-wirekit::heading>
            <x-wirekit::text size="sm">Trust-signal logo strip for "trusted by" sections.</x-wirekit::text>
        </x-wirekit::card.body>
    </x-wirekit::card>

    <x-wirekit::card href="/blueprints/partials/faq">
        <x-wirekit::card.body>
            <x-wirekit::heading level="3" size="sm">FAQ</x-wirekit::heading>
            <x-wirekit::text size="sm">Accordion-based question/answer list with expand/collapse.</x-wirekit::text>
        </x-wirekit::card.body>
    </x-wirekit::card>

    <x-wirekit::card href="/blueprints/partials/cta">
        <x-wirekit::card.body>
            <x-wirekit::heading level="3" size="sm">CTA</x-wirekit::heading>
            <x-wirekit::text size="sm">Conversion-focused call-to-action block with headline + primary button.</x-wirekit::text>
        </x-wirekit::card.body>
    </x-wirekit::card>

    <x-wirekit::card href="/blueprints/partials/footer">
        <x-wirekit::card.body>
            <x-wirekit::heading level="3" size="sm">Footer</x-wirekit::heading>
            <x-wirekit::text size="sm">Multi-column site footer with link groups, brand mark, and legal line.</x-wirekit::text>
        </x-wirekit::card.body>
    </x-wirekit::card>
</x-wirekit::grid>

Recipes

Multi-component worked examples — each recipe shows the canonical composition of several WireKit primitives into a complete UI shape.

Recipes

Long-form article

Reading-shell composition for blog posts and editorial content — TOC, progress, prose, bookmark.

Documentation reader

Three-pane docs layout with sidebar, content body, and right-hand on-page TOC.

On-page TOC

Sticky right-rail table of contents that highlights the active heading on scroll.

Reading sidebar

A sticky vertical rail that fuses the table of contents, the active-section marker and the reading progress into one column.

Marketing landing page

Full landing page composed from hero, features, testimonials, pricing, and CTA partials.

Marketing landing with TOC

Landing-page composition with a sticky section-jump TOC for long-scroll product pages.

Hero with code aside

Split-hero pattern with marketing copy on one side and live code preview on the other.

Live KPI strip

Polling strip of headline stats with wire:poll for live updates from server state.

Stat with sparkline

Headline number paired with a trailing sparkline chart for trend at a glance.

Feature with numbered marker

Numbered-step feature block — circular badges for sequential affordance.

Toolbar filter bar

Compound filter-and-action bar — search input, segmented control, primary action.

Country picker

A searchable country field with a flag on every row, built from data your app already has.

Validating a phone number

One composer require, one validation rule, and the stored value formatted back for display.

 
<x-wirekit::grid cols="1 md:2 lg:3">
    <x-wirekit::card href="/blueprints/recipes/long-form-article">
        <x-wirekit::card.body>
            <x-wirekit::heading level="3" size="sm">Long-form article</x-wirekit::heading>
            <x-wirekit::text size="sm">Reading-shell composition for blog posts and editorial content — TOC, progress, prose, bookmark.</x-wirekit::text>
        </x-wirekit::card.body>
    </x-wirekit::card>

    <x-wirekit::card href="/blueprints/recipes/documentation-reader">
        <x-wirekit::card.body>
            <x-wirekit::heading level="3" size="sm">Documentation reader</x-wirekit::heading>
            <x-wirekit::text size="sm">Three-pane docs layout with sidebar, content body, and right-hand on-page TOC.</x-wirekit::text>
        </x-wirekit::card.body>
    </x-wirekit::card>

    <x-wirekit::card href="/blueprints/recipes/on-page-toc">
        <x-wirekit::card.body>
            <x-wirekit::heading level="3" size="sm">On-page TOC</x-wirekit::heading>
            <x-wirekit::text size="sm">Sticky right-rail table of contents that highlights the active heading on scroll.</x-wirekit::text>
        </x-wirekit::card.body>
    </x-wirekit::card>

    <x-wirekit::card href="/blueprints/recipes/reading-sidebar">
        <x-wirekit::card.body>
            <x-wirekit::heading level="3" size="sm">Reading sidebar</x-wirekit::heading>
            <x-wirekit::text size="sm">A sticky vertical rail that fuses the table of contents, the active-section marker and the reading progress into one column.</x-wirekit::text>
        </x-wirekit::card.body>
    </x-wirekit::card>

    <x-wirekit::card href="/blueprints/recipes/marketing-landing-page">
        <x-wirekit::card.body>
            <x-wirekit::heading level="3" size="sm">Marketing landing page</x-wirekit::heading>
            <x-wirekit::text size="sm">Full landing page composed from hero, features, testimonials, pricing, and CTA partials.</x-wirekit::text>
        </x-wirekit::card.body>
    </x-wirekit::card>

    <x-wirekit::card href="/blueprints/recipes/marketing-landing-toc">
        <x-wirekit::card.body>
            <x-wirekit::heading level="3" size="sm">Marketing landing with TOC</x-wirekit::heading>
            <x-wirekit::text size="sm">Landing-page composition with a sticky section-jump TOC for long-scroll product pages.</x-wirekit::text>
        </x-wirekit::card.body>
    </x-wirekit::card>

    <x-wirekit::card href="/blueprints/recipes/hero-with-code-aside">
        <x-wirekit::card.body>
            <x-wirekit::heading level="3" size="sm">Hero with code aside</x-wirekit::heading>
            <x-wirekit::text size="sm">Split-hero pattern with marketing copy on one side and live code preview on the other.</x-wirekit::text>
        </x-wirekit::card.body>
    </x-wirekit::card>

    <x-wirekit::card href="/blueprints/recipes/live-kpi-strip">
        <x-wirekit::card.body>
            <x-wirekit::heading level="3" size="sm">Live KPI strip</x-wirekit::heading>
            <x-wirekit::text size="sm">Polling strip of headline stats with <code>wire:poll</code> for live updates from server state.</x-wirekit::text>
        </x-wirekit::card.body>
    </x-wirekit::card>

    <x-wirekit::card href="/blueprints/recipes/stat-with-sparkline">
        <x-wirekit::card.body>
            <x-wirekit::heading level="3" size="sm">Stat with sparkline</x-wirekit::heading>
            <x-wirekit::text size="sm">Headline number paired with a trailing sparkline chart for trend at a glance.</x-wirekit::text>
        </x-wirekit::card.body>
    </x-wirekit::card>

    <x-wirekit::card href="/blueprints/recipes/feature-numbered-marker">
        <x-wirekit::card.body>
            <x-wirekit::heading level="3" size="sm">Feature with numbered marker</x-wirekit::heading>
            <x-wirekit::text size="sm">Numbered-step feature block — circular badges for sequential affordance.</x-wirekit::text>
        </x-wirekit::card.body>
    </x-wirekit::card>

    <x-wirekit::card href="/blueprints/recipes/toolbar-filter-bar">
        <x-wirekit::card.body>
            <x-wirekit::heading level="3" size="sm">Toolbar filter bar</x-wirekit::heading>
            <x-wirekit::text size="sm">Compound filter-and-action bar — search input, segmented control, primary action.</x-wirekit::text>
        </x-wirekit::card.body>
    </x-wirekit::card>

    <x-wirekit::card href="/blueprints/recipes/country-picker">
        <x-wirekit::card.body>
            <x-wirekit::heading level="3" size="sm">Country picker</x-wirekit::heading>
            <x-wirekit::text size="sm">A searchable country field with a flag on every row, built from data your app already has.</x-wirekit::text>
        </x-wirekit::card.body>
    </x-wirekit::card>

    <x-wirekit::card href="/blueprints/recipes/phone-number-validation">
        <x-wirekit::card.body>
            <x-wirekit::heading level="3" size="sm">Validating a phone number</x-wirekit::heading>
            <x-wirekit::text size="sm">One <code>composer require</code>, one validation rule, and the stored value formatted back for display.</x-wirekit::text>
        </x-wirekit::card.body>
    </x-wirekit::card>
</x-wirekit::grid>

How to use

Each partial and recipe is a self-contained Blade snippet:

  1. Browse the catalog above and open the page that matches your need
  2. Copy the Blade code into your project
  3. Replace any placeholder data with your Eloquent models or Livewire properties
  4. Customize styling through WireKit's design tokens — see Theming

Every snippet assumes you have WireKit installed and your layout includes @wirekitStyles and @wirekitScripts. See Getting Started if you haven't set up WireKit yet.

  • Theming — CSS variable tokens for colors, spacing, typography