---
title: Blueprints — Partials & Recipes
description: Drop-in Blade partials and worked-example recipes built from WireKit components — copy-paste patterns to grab, drop in and customize.
visibility: guest
draft: false
---

# Blueprints

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

- **[Partials](/blueprints/partials/hero)** — marketing-page building blocks. Hero sections, feature grids, pricing tables, FAQs, footers, CTAs — drop one into a landing page and customize.
- **[Recipes](/blueprints/recipes/long-form-article)** — 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.

:::preview{title="Marketing Partials" wide navigable}
<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.

:::preview{title="Recipes" wide navigable}
<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](/theming)

Every snippet assumes you have WireKit installed and your layout includes `@wirekitStyles` and `@wirekitScripts`. See [Getting Started](/getting-started) if you haven't set up WireKit yet.

## Related

- [Theming](/theming) — CSS variable tokens for colors, spacing, typography