# WireKit
> Free, MIT-licensed UI component library for Laravel Livewire — 130+ components, full theming, GDPR-safe fonts.

The full text of every page below, in the same order, is one markdown file: [llms-full.txt](https://docs.wirekit.app/llms-full.txt)

## API Map
- [API Map](https://docs.wirekit.app/api-map.json) — hierarchical sitemap of every WireKit surface for AI agents.

## Components
- [App Rail](https://docs.wirekit.app/components/app-rail.md): Full-height module rail with tooltip, below (captions under the icons), or inline labels
- [App Shell](https://docs.wirekit.app/components/app-shell.md): A full-page layout that arranges rail, sidebar, header and main content for dashboards and admin screens, and can fill the window.
- [Aspect Ratio](https://docs.wirekit.app/components/aspect-ratio.md): A container that holds a fixed aspect ratio for images, videos, maps and embeds, so the layout does not shift while the content loads.
- [Brand](https://docs.wirekit.app/components/brand.md): Your logo and app name as one home link for the leading slot of a header or sidebar, with separate logos for dark mode and small screens.
- [Brand Bar](https://docs.wirekit.app/components/brand-bar.md): Page-chrome wrapper for brand, tagline and actions. Carries the content-edge spine padding, so the brand aligns with the body text below it.
- [Card Stack](https://docs.wirekit.app/components/card-stack.md): Named parts, such as the cards of a record page, drawn in an order the application remembers, with the parts a reader hid carried along hidden.
- [Center](https://docs.wirekit.app/components/center.md): A flex container that centers its children horizontally and vertically, without repeating the centering utilities in every template.
- [Container](https://docs.wirekit.app/components/container.md): A width-constrained wrapper that centers page sections and sets their maximum width and inline padding, so content lines up across the page.
- [CTA](https://docs.wirekit.app/components/cta.md): A call-to-action section for landing pages, with a headline, supporting text and buttons on a default, accent or dark surface.
- [Divider](https://docs.wirekit.app/components/divider.md): A horizontal or vertical separator between content sections, in several variants and with an optional inline label.
- [Feature](https://docs.wirekit.app/components/feature.md): A feature card with an icon, a title and a short description, laid out on its own or inside a feature grid on marketing pages.
- [Feature Grid](https://docs.wirekit.app/components/feature-grid.md): A responsive grid of feature cards that gives every feature the same footing, with optional staggered entrance animations.
- [Footer](https://docs.wirekit.app/components/footer.md): A landing page footer with your brand, columns of links and a legal row, for marketing sites and product pages.
- [Grid](https://docs.wirekit.app/components/grid.md): A CSS grid with a compact column syntax for breakpoints, such as 1 sm:2 lg:3, for card lists, galleries and dashboard tiles.
- [Header](https://docs.wirekit.app/components/header.md): The page header inside an app shell, a sticky bar with a bottom border and elevated background that holds your brand, navigation and profile.
- [Hero](https://docs.wirekit.app/components/hero.md): A landing page hero with a title, a lede, actions and optional aside content, on a default, accent or dark surface.
- [List](https://docs.wirekit.app/components/list.md): Ordered, unordered and unstyled lists with consistent spacing and marker styles from your design tokens, for content and navigation.
- [Main](https://docs.wirekit.app/components/main.md): The primary content area inside an app shell, a semantic main element that fills the remaining space and scrolls on its own.
- [Page Header](https://docs.wirekit.app/components/page-header.md): The title of a screen, an optional sentence under it, and the actions that belong to it.
- [Profile](https://docs.wirekit.app/components/profile.md): Your avatar and name side by side for the trailing slot of a header or the trigger of a user menu, laid out and nothing more.
- [Row](https://docs.wirekit.app/components/row.md): A horizontal flex layout that places its children side by side with consistent spacing, and can wrap below a breakpoint on small screens.
- [Section](https://docs.wirekit.app/components/section.md): A full-width page section with vertical padding, a background color and optional dividers, made to wrap a container on landing pages.
- [Shell Bar](https://docs.wirekit.app/components/shell-bar.md): The head of one column in an app shell, a fixed-height band with a bottom rule for a title, navigation or actions that lines up across columns.
- [Scope Switcher](https://docs.wirekit.app/components/scope-switcher.md): The breadcrumb control that switches which team, server or site a page is about, showing the current one and offering the others to search.
- [Sidebar](https://docs.wirekit.app/components/sidebar.md): A vertical navigation landmark with grouped items and optional group labels, for the main navigation of an app shell.
- [Spacer](https://docs.wirekit.app/components/spacer.md): A flexible element that pushes its neighbors apart inside a row or stack, so you can separate items without margins.
- [Spine-Aware](https://docs.wirekit.app/components/spine-aware.md): Opt-in wrapper for developer-authored components that want to join the page-edge content spine
- [Stack](https://docs.wirekit.app/components/stack.md): A vertical flex layout that stacks its children with consistent spacing, so you do not write the same flex column utilities by hand.
- [Sticky Panel](https://docs.wirekit.app/components/sticky-panel.md): A companion column that stays beside an article while the page scrolls, with a header, a scrollable body and a footer, for carts and filters.
- [Pricing Table](https://docs.wirekit.app/components/pricing-table.md): A row of pricing plans — formatted amounts, feature lists, and a featured highlight
- [Testimonial](https://docs.wirekit.app/components/testimonial.md): A cited customer quote with an attribution — and a grid to line several of them up.
- [FAQ](https://docs.wirekit.app/components/faq.md): An accordion of questions that emits FAQPage structured data derived from what it rendered.
- [Bento Grid](https://docs.wirekit.app/components/bento-grid.md): An asymmetric feature showcase — cells claim different amounts of space.
- [Logo Cloud](https://docs.wirekit.app/components/logo-cloud.md): A wall of partner or customer logos, muted so their colors do not compete with yours and exposed to screen readers as a labeled list.
- [Team Section](https://docs.wirekit.app/components/team-section.md): A responsive roster of people for a meet-the-team block, each with a portrait, a name, a role and optional links.
- [Theme Controller](https://docs.wirekit.app/components/theme-controller.md): A drop-in dark-mode control — no JS wiring, no flash of the wrong theme.
- [Mockup](https://docs.wirekit.app/components/mockup.md): Frame a screenshot or a live composition in a browser, window, code, phone, or tablet shell
- [Announcement Banner](https://docs.wirekit.app/components/announcement-banner.md): A dismissible bar across the top of the page for launches, sales and maintenance windows, aligned with the rest of your page chrome.
- [Band](https://docs.wirekit.app/components/band.md): An edge-to-edge strip with padding and a single rule — the divider between two areas of a multi-band window.
- [Button](https://docs.wirekit.app/components/button.md): A button composed from a semantic intent and a visual surface, with sizes, icons, a loading state and link rendering for navigation.
- [Checkbox](https://docs.wirekit.app/components/checkbox.md): A checkbox for binary choices or lists of options, with checked, unchecked and indeterminate states, labels, hints and error messages.
- [Color Picker](https://docs.wirekit.app/components/color-picker.md): A color input that wraps the browser's native picker in a round swatch with a live hex readout, for forms and theme settings.
- [Combobox](https://docs.wirekit.app/components/combobox.md): A searchable select that filters options as you type, following the WAI-ARIA combobox pattern with full keyboard support.
- [Date Picker](https://docs.wirekit.app/components/date-picker.md): A date input built on the browser's native date field, with its built-in calendar popup, localization and no JavaScript dependency.
- [Datetime Picker](https://docs.wirekit.app/components/datetime-picker.md): A field that picks a date and a time together, from a calendar and a list of times in a dialog, for a form or a Livewire property.
- [Editor](https://docs.wirekit.app/components/editor.md): A rich-text editor adapter for Tiptap that works in a Livewire form like a textarea, with a toolbar, wire:model binding and themed styles.
- [Field](https://docs.wirekit.app/components/field.md): A form field wrapper that composes label, hint, error message and required indicator around any input and wires their ids together.
- [File Upload](https://docs.wirekit.app/components/file-upload.md): A drag-and-drop file area with a click-to-browse fallback that lists the selected files and their sizes before you upload them.
- [Filter Builder](https://docs.wirekit.app/components/filter-builder.md): Active-filter chip bar with a typed add/edit popover (field/operator/value)
- [Form](https://docs.wirekit.app/components/form.md): A form wrapper that sets one error-announcement policy for every control inside, and can send itself once.
- [Input](https://docs.wirekit.app/components/input.md): A text input with a label, a hint, an error message and prefix or suffix content such as a currency symbol or a unit.
- [Inline Edit](https://docs.wirekit.app/components/inline-edit.md): Edit a displayed value in place and switch back, without a dialog or a separate form page, and nothing is saved until the reader confirms.
- [Label](https://docs.wirekit.app/components/label.md): A form label with an optional required indicator, for inputs that are not wrapped in a field and need their label on their own.
- [Multi-Select](https://docs.wirekit.app/components/multi-select.md): A searchable select for several values that shows the chosen items as removable pills inside the field and filters options as you type.
- [Number Input](https://docs.wirekit.app/components/number-input.md): A number field with styled stepper buttons in place of the browser's spinners, with min, max and step, for quantities and settings.
- [OTP Input](https://docs.wirekit.app/components/otp-input.md): A row of single-character fields for one-time passwords and verification codes, with auto-advance and paste that fills every field.
- [Password Input](https://docs.wirekit.app/components/password-input.md): A password field with a visibility toggle and an optional strength meter, for sign-up, sign-in and password change forms.
- [Phone](https://docs.wirekit.app/components/phone.md): An international phone field — a country picker beside a number box, binding one E.164 value.
- [Radio](https://docs.wirekit.app/components/radio.md): A radio button with a label and a hint, where radios that share a name form a group from which exactly one option is chosen.
- [Range Slider](https://docs.wirekit.app/components/range-slider.md): A slider with two handles for choosing a numeric range, such as a price filter, operable by pointer and keyboard.
- [Rating](https://docs.wirekit.app/components/rating.md): A star rating control built as a radio group, so every value can be chosen with the keyboard and announced by screen readers.
- [Segmented Control](https://docs.wirekit.app/components/segmented-control.md): A pill-shaped group of mutually exclusive options for switching views or filters, built as a radio group with full keyboard support.
- [Select](https://docs.wirekit.app/components/select.md): A native select with a label, a placeholder, a hint and an error message, in sizes that line up with the other form fields.
- [Sign-in Button](https://docs.wirekit.app/components/sign-in-button.md): A button that signs someone in with Google, Apple, Facebook, PayPal or Amazon, drawn the way each service asks, with the logo your application provides.
- [Slider](https://docs.wirekit.app/components/slider.md): A slider for one value built on the native range input, painted from your theme tokens, with sizes and an optional value display.
- [Swatch Group](https://docs.wirekit.app/components/swatch-group.md): A choice of colors or patterns as swatches, one value as radio buttons or several as checkboxes, with every option named in words.
- [Tags Input](https://docs.wirekit.app/components/tags-input.md): A field where the reader types free-form tags and confirms each with Enter or a comma, with a remove button on every tag.
- [Textarea](https://docs.wirekit.app/components/textarea.md): A multi-line text input with a label, a hint, an error message and configurable rows, for comments, notes and descriptions.
- [Time Picker](https://docs.wirekit.app/components/time-picker.md): A time input built on the browser's native time field, with its built-in picker and localization and no JavaScript dependency.
- [Toggle](https://docs.wirekit.app/components/toggle.md): A switch for on and off settings that take effect immediately, visually distinct from a checkbox, with a label and a hint.
- [Toggle Button](https://docs.wirekit.app/components/toggle-button.md): A button that stays pressed for a two-state setting such as bold, italic or mute, announced to screen readers through aria-pressed.
- [Translatable Input](https://docs.wirekit.app/components/translatable-input.md): A value in several languages: the primary language's field, a chip per translation with its state, and one language at a time when there are many
- [Unsaved Hint](https://docs.wirekit.app/components/unsaved-hint.md): Says beside the save button that a form holds values its server does not have yet, frames each unsaved field, and can ask before the reader leaves
- [Alert](https://docs.wirekit.app/components/alert.md): An inline banner for status, warnings and errors, with semantic intents, an optional title, actions and dismissal.
- [Avatar](https://docs.wirekit.app/components/avatar.md): A user image with an automatic fallback to initials or an icon, in several sizes and shapes, with an optional status indicator.
- [Badge](https://docs.wirekit.app/components/badge.md): A compact pill-shaped label for status, counts and categories, in semantic intents and surfaces, with optional icons and dismissal.
- [Blockquote](https://docs.wirekit.app/components/blockquote.md): A styled quotation with a left border, an optional citation and an accent variant, for testimonials and quoted passages in content.
- [Bulk Selection](https://docs.wirekit.app/components/bulk-selection.md): Row selection for a list the server pages, around your own table — a header checkbox for the page, and every match on all pages offered with its count.
- [Callout](https://docs.wirekit.app/components/callout.md): A persistent notice for documentation-style content, denser than an alert, with semantic intents and an optional accent stripe.
- [Card](https://docs.wirekit.app/components/card.md): A container for grouping related content, in several visual variants, composed with header, body and footer parts and optionally a link.
- [Code](https://docs.wirekit.app/components/code.md): Inline code for short snippets inside running text, such as variable names, paths and commands, in the monospace font on a tinted background.
- [Code Block](https://docs.wirekit.app/components/code-block.md): A multi-line code block in a monospace font with an optional filename header, a copy button and a language attribute.
- [Data Table](https://docs.wirekit.app/components/data-table.md): Client-mode data table with sort, search, selection, density, and column manager
- [Date Separator](https://docs.wirekit.app/components/date-separator.md): A divider with a centered date label for chat threads, feeds and timelines, showing Today or Yesterday before it falls back to full dates.
- [Event Calendar](https://docs.wirekit.app/components/event-calendar.md): A scheduling calendar with month, week and agenda views, with event pills, an overflow for busy days and an hour grid for the week.
- [Fit Text](https://docs.wirekit.app/components/fit-text.md): Text that shrinks from its own size down to a floor so it fits its line, such as a heading on a phone or a long price in a narrow column.
- [Flag](https://docs.wirekit.app/components/flag.md): A country or region flag in its drawn 4:3 or 1:1 artwork, served from a cached route or your own web server.
- [Heading](https://docs.wirekit.app/components/heading.md): A semantic heading from h1 to h6 that sizes itself from its level, with accent colors and tracking control for page and section titles.
- [Highlight](https://docs.wirekit.app/components/highlight.md): Text that highlights the parts matching a search query, for result lists where the matches are only known at runtime.
- [Image](https://docs.wirekit.app/components/image.md): Content image as a figure with alt text, lazy loading, and a CLS-safe ratio box
- [Image Gallery](https://docs.wirekit.app/components/image-gallery.md): A responsive grid of images that opens an accessible lightbox with keyboard navigation, captions and optional overlays on thumbnails and zoom.
- [Image Compare](https://docs.wirekit.app/components/image-compare.md): A before-and-after image slider with a draggable divider, for retouching, redesigns, theme swaps and other visual comparisons.
- [Kanban](https://docs.wirekit.app/components/kanban.md): A board of horizontally scrolling status columns for tasks, pipelines and workflows, with WIP limits, colored column accents and drag-and-drop support.
- [Kbd](https://docs.wirekit.app/components/kbd.md): A keyboard key indicator built on the HTML kbd element, for shortcuts such as Ctrl+K in documentation, tooltips and menus.
- [Link](https://docs.wirekit.app/components/link.md): A styled anchor with variants and underline control, and support for external links with their own marker.
- [Mark](https://docs.wirekit.app/components/mark.md): Highlighted text in a styled mark element with a warm background, for emphasis inside running text that does not depend on a query.
- [Prose](https://docs.wirekit.app/components/prose.md): A typography wrapper that styles raw HTML such as articles, Markdown output and CMS content with the fonts and spacing of your theme.
- [Reveal](https://docs.wirekit.app/components/reveal.md): Animation wrapper with viewport / click / manual triggers and 11 in/out presets
- [Status Dot](https://docs.wirekit.app/components/status-dot.md): A dot in the line beside a value, which carries a state in its color, names it for a screen reader and explains it in a tooltip
- [Text](https://docs.wirekit.app/components/text.md): A typography component for body text and descriptions, with size, color variant, weight, alignment and truncation.
- [Indicator](https://docs.wirekit.app/components/indicator.md): Anchor a count badge, status dot, or ribbon to any corner of any target
- [Data List](https://docs.wirekit.app/components/data-list.md): Label and value pairs rendered as a native definition list, for record details, settings summaries and other structured information.
- [Empty State](https://docs.wirekit.app/components/empty-state.md): A placeholder for pages and panels without content yet, combining an icon, a title, a description and an optional call to action.
- [Live List](https://docs.wirekit.app/components/live-list.md): A list the server re-renders while it is being read, which keeps the reader's place when entries arrive above it and points to new entries out of sight.
- [Pagination](https://docs.wirekit.app/components/pagination.md): Page navigation for result sets, a thin UI layer over Laravel's length-aware paginator that you pass straight in.
- [Page Progress](https://docs.wirekit.app/components/page-progress.md): A page-edge bar that reports the request the reader is waiting on — navigation and Livewire round trips, without a per-screen opt-in.
- [Price](https://docs.wirekit.app/components/price.md): Locale-aware currency display with compare-at, unit-price (Grundpreis) and delta indicators
- [Progress](https://docs.wirekit.app/components/progress.md): A horizontal progress bar for a known completion percentage, or for ongoing work without a known total, with an optional value label.
- [Progress Radial](https://docs.wirekit.app/components/radial-progress.md): A circular progress ring — determinate, token-driven, with threshold coloring.
- [Reading](https://docs.wirekit.app/components/reading.md): A family of primitives for long-form content pages — progress, spine, minimap, bookmark, meta, plus a one-tag composition shell
- [Reorder](https://docs.wirekit.app/components/reorder.md): The drag handle and the move-up and move-down arrows for one row of a list Livewire sorts, so a keyboard and a screen reader can reorder it too.
- [Shimmer](https://docs.wirekit.app/components/shimmer.md): An animated highlight that sweeps across the letters of live status text while an assistant streams a reply or a long task runs.
- [Skeleton](https://docs.wirekit.app/components/skeleton.md): Animated placeholders that show the shape of the layout while content loads, so the page does not jump when the data arrives.
- [Spinner](https://docs.wirekit.app/components/spinner.md): An accessible loading indicator for in-place activity without a measurable end, such as a form that is submitting or a panel that is fetching.
- [Stage Card](https://docs.wirekit.app/components/stage-card.md): Pipeline / kanban / roadmap stage card with intent-tinted border, count pill, and optional progress
- [Stat](https://docs.wirekit.app/components/stat.md): A metric card for one key number with a label, a trend indicator, a change against the previous period and a description, for dashboards.
- [Stats](https://docs.wirekit.app/components/stats.md): Statistics group container — responsive grid of stat cards with optional cascading entrance animation
- [Step Marker](https://docs.wirekit.app/components/step-marker.md): A small filled chip that holds a step's number, for onboarding flows, how-to sections and numbered feature lists.
- [Table](https://docs.wirekit.app/components/table.md): A table with head, body and foot parts, striped and hoverable rows, compact density, sortable columns and horizontal scrolling on small screens.
- [Ticker](https://docs.wirekit.app/components/ticker.md): A compact label, value and change indicator for dashboards, colored automatically by whether the change is an increase or a decrease.
- [Timeline](https://docs.wirekit.app/components/timeline.md): A vertical feed of chronological events such as deployments, audit logs and status updates, with a colored dot, icon and timestamp per item.
- [Notification Center](https://docs.wirekit.app/components/notification-center.md): Bell trigger with unread badge and a grouped, realtime-capable notification panel
- [Status Matrix](https://docs.wirekit.app/components/status-matrix.md): 2D grid of typed status cells (tristate / toggle / status / heat) with sticky headers
- [Status Tiles](https://docs.wirekit.app/components/status-tiles.md): N entities as colored status tiles — a fleet light you read at a glance
- [Stream](https://docs.wirekit.app/components/stream.md): Streaming text output (SSE) with the accessibility, reduced-motion, and error handling done right
- [Strength Meter](https://docs.wirekit.app/components/strength-meter.md): A row of bars for how hard a value is to guess, with the step named for screen readers and spoken when it changes.
- [Tree View](https://docs.wirekit.app/components/tree-view.md): A hierarchical list for nested data such as file trees and category hierarchies, following the WAI-ARIA tree view pattern with full keyboard support.
- [Usage Meter](https://docs.wirekit.app/components/usage-meter.md): Usage-vs-limit meter with threshold intent, panel grid, and plan-paywall gate
- [Swap](https://docs.wirekit.app/components/swap.md): A two-state icon — fade (crossfade), rotate or flip between two children.
- [Swatch](https://docs.wirekit.app/components/swatch.md): A color or a pattern as a value, drawn as a circle or a square and named in words for the reader who cannot see it.
- [Product Card](https://docs.wirekit.app/components/product-card.md): The ecommerce keystone — image, price with compare-at, rating, stock state, CTA.
- [Energy Label](https://docs.wirekit.app/components/energy-label.md): The EU energy label arrow beside a price, with the class in its color, the range of the scale and links to the label and the product information sheet
- [Tire Label](https://docs.wirekit.app/components/tire-label.md): The class arrows of the EU tire label beside a price: fuel efficiency, wet grip and rolling noise, linked to the label and the product information sheet
- [Review Summary](https://docs.wirekit.app/components/review-summary.md): The reviews of a product at a glance — the average as stars, the count, and how the stars are distributed, each row a filter for the reviews below.
- [Review](https://docs.wirekit.app/components/review.md): One customer review as an article — its stars, title, author, date, a verified-purchase badge and the shop's reply.
- [Cart List](https://docs.wirekit.app/components/cart-list.md): The cart — a semantic list of lines, each with a thumbnail, a price, a quantity stepper and a line total.
- [Cart Summary](https://docs.wirekit.app/components/cart-summary.md): The order totals — subtotal, discount, shipping, tax and an emphasized grand total below the rule.
- [Overview](https://docs.wirekit.app/components/chat.md): The component suite for chat threads, comment sections and AI conversations — messages, delivery status, typing indicators and streaming turns.
- [Message](https://docs.wirekit.app/components/message.md): A chat or comment bubble with author, timestamp and side-based alignment, with slots for reactions and attachments.
- [Conversation](https://docs.wirekit.app/components/conversation.md): Stick-to-bottom chat transcript scroller with follow-output and jump-to-latest
- [Assistant Message](https://docs.wirekit.app/components/assistant-message.md): An AI assistant turn with roles, streaming, model chip, reasoning disclosure, and readable announcements
- [Tool Call](https://docs.wirekit.app/components/tool-call.md): One tool invocation an assistant made — name, status, arguments as JSON, and the result behind a disclosure
- [Branch Switcher](https://docs.wirekit.app/components/branch-switcher.md): Step between several generated answers — prev/next, a live count, and a polite announcement per move
- [Message Group](https://docs.wirekit.app/components/message-group.md): A run of consecutive messages from one sender, with the avatar and the name printed once instead of on every bubble.
- [Message Typing](https://docs.wirekit.app/components/message-typing.md): An animated typing indicator of three dots for chat threads, shown while the other side writes or an assistant works on a reply.
- [Quick Replies](https://docs.wirekit.app/components/quick-replies.md): Suggested replies under a message — a named group of chips, each dispatching the answer the reader picked.
- [Chat Marker](https://docs.wirekit.app/components/chat-marker.md): In-thread meta rows for streaming status, tool activity, system notes, and date breaks
- [Attachment](https://docs.wirekit.app/components/attachment.md): File and image attachment cards with formatted metadata, upload state, and actions
- [Reaction](https://docs.wirekit.app/components/reaction.md): An emoji reaction pill for messages and comments with a count and a toggled state, announcing who reacted to screen readers.
- [Accordion](https://docs.wirekit.app/components/accordion.md): Collapsible content sections for FAQs and settings, with single or multiple open panels and the keyboard model of the WAI-ARIA accordion pattern.
- [Breadcrumb](https://docs.wirekit.app/components/breadcrumb.md): A navigation trail that shows where a page sits in your hierarchy, with custom separators and the WAI-ARIA breadcrumb pattern.
- [Collapsible](https://docs.wirekit.app/components/collapsible.md): A single disclosure where one trigger shows and hides one region, following the WAI-ARIA disclosure pattern with no extra chrome.
- [Countdown](https://docs.wirekit.app/components/countdown.md): A live countdown to an absolute deadline that ticks in the browser without server round-trips and marks urgent and overdue states.
- [Menubar](https://docs.wirekit.app/components/menubar.md): A horizontal menu bar with dropdown menus, like the File and Edit menus of a desktop app, following the WAI-ARIA menubar pattern.
- [Navbar](https://docs.wirekit.app/components/navbar.md): A responsive top navigation bar with brand, links and actions that collapses into a menu button on small screens.
- [Navigation Menu](https://docs.wirekit.app/components/navigation-menu.md): A top-level site navigation with flyout panels for mega menus, combining plain links with rich panels opened by hover or click.
- [Overflow Nav](https://docs.wirekit.app/components/overflow-nav.md): A wrapping row of links kept to a number of lines, with the links that do not fit behind a button that counts them.
- [Stepper](https://docs.wirekit.app/components/stepper.md): A step indicator for multi-step flows that styles each step as completed, current or upcoming based on where the reader is.
- [Wizard](https://docs.wirekit.app/components/wizard.md): A multi-step flow container — it holds the step, gates advancing, and announces the change.
- [Tabs](https://docs.wirekit.app/components/tabs.md): Tabbed content with keyboard navigation, several visual variants and automatic ARIA wiring, following the WAI-ARIA tabs pattern.
- [Toolbar](https://docs.wirekit.app/components/toolbar.md): A horizontal bar with named slots for search, filters and actions above a list or table, with sticky positioning and density options.
- [Bottom Nav](https://docs.wirekit.app/components/bottom-nav.md): A fixed mobile tab bar — safe-area aware, real touch targets, honest active state.
- [Alert Dialog](https://docs.wirekit.app/components/alert-dialog.md): A confirmation dialog for destructive actions that asks for an explicit answer before anything proceeds, unlike a regular modal.
- [Command Palette](https://docs.wirekit.app/components/command-palette.md): A search dialog opened with a keyboard shortcut such as Cmd+K, for jumping to pages and running commands from anywhere in the app.
- [Pages](https://docs.wirekit.app/components/command-palette/pages.md): A command palette whose entries open a list of values in the same palette, with a search of its own, Back, and the digits 1 to 9.
- [Remote Search](https://docs.wirekit.app/components/command-palette/remote-search.md): A command palette whose results come from a server, with a filter row above the list and a loading and an error state while the request is out.
- [Search Field](https://docs.wirekit.app/components/command-palette/search-field.md): A search field in a page's header that opens the command palette and hands it what is typed, the keys typed while it opens included.
- [Context Menu](https://docs.wirekit.app/components/context-menu.md): A menu opened with a right-click on an element, with the same keyboard navigation and ARIA roles as the dropdown, positioned at the pointer.
- [Drawer](https://docs.wirekit.app/components/drawer.md): A panel that slides in from any edge of the screen, with the focus trap, scroll lock and events of a modal, for filters, details and forms.
- [Dropdown](https://docs.wirekit.app/components/dropdown.md): A menu attached to a trigger, with keyboard navigation and positioning that flips and shifts to stay on screen, for actions and options.
- [Hover Card](https://docs.wirekit.app/components/hover-card.md): A rich popup that appears on hover or focus to preview a profile, a link destination or a product, and can hold interactive content.
- [Lightbox](https://docs.wirekit.app/components/lightbox.md): Focus-trapped media viewer for images, video, and embeds — opened from any control
- [Modal](https://docs.wirekit.app/components/modal.md): A dialog overlay with a backdrop, focus trap, scroll lock and keyboard support, rendered at the end of the page so it stacks above everything.
- [Popover](https://docs.wirekit.app/components/popover.md): A floating panel opened by a click and anchored to its trigger, for rich content and controls that a tooltip or hover card cannot hold.
- [Shortcuts](https://docs.wirekit.app/components/shortcuts.md): Keyboard shortcuts for a whole application, bound on the element they act on, by area, with sequences, a switch for single keys and an overview on ?
- [Toast](https://docs.wirekit.app/components/toast.md): Temporary notifications that confirm an action or raise a warning, stacked in a corner of the viewport and dismissed after a set time.
- [Tooltip](https://docs.wirekit.app/components/tooltip.md): A short text hint shown on hover, focus or long press, positioned to stay on screen, for icon buttons and abbreviations.
- [Tour](https://docs.wirekit.app/components/tour.md): A guided product tour that walks the reader through your interface step by step, with each step positioned next to its target.
- [FAB](https://docs.wirekit.app/components/fab.md): A floating action button in a corner of the screen for the main action of a view, which can fan out into a set of secondary actions.
- [Action Bar](https://docs.wirekit.app/components/action-bar.md): A floating toolbar at the bottom of the viewport for bulk actions, shown when one or more items in a list or table are selected.
- [Activity Row](https://docs.wirekit.app/components/activity-row.md): A row for activity feeds, audit logs and timelines — a kind-colored dot, an actor, a timestamp, and slots for badges and block detail.
- [Calendar](https://docs.wirekit.app/components/calendar.md): A standalone month grid for picking a date, with full keyboard navigation and a hidden input that submits the value with your form.
- [Carousel](https://docs.wirekit.app/components/carousel.md): A slide rotator for images or content with autoplay, looping navigation and indicator dots, following the WAI-ARIA carousel pattern.
- [Chart](https://docs.wirekit.app/components/chart.md): One chart component for Chart.js or ApexCharts that takes its colors, fonts and dark mode from your WireKit theme.
- [Chart Mixed](https://docs.wirekit.app/components/chart-mixed.md): Multi-type / multi-axis dashboard chart — per-dataset type and y-axis bindings.
- [Chart.js Demos](https://docs.wirekit.app/components/charts-chartjs.md): WireKit chart gallery powered by the Chart.js adapter — every chart family Chart.js ships natively, with realistic seed data.
- [Advanced](https://docs.wirekit.app/components/charts-chartjs/advanced.md): Multi-axis charts, wire:streaming live updates, and the annotations plugin.
- [Area](https://docs.wirekit.app/components/charts-chartjs/area.md): Filled and stacked area charts with realistic e-commerce and devops data.
- [Bar](https://docs.wirekit.app/components/charts-chartjs/bar.md): Simple, grouped and stacked bar variations with realistic SaaS revenue and headcount data.
- [Line](https://docs.wirekit.app/components/charts-chartjs/line.md): Smooth, stepped and multi-series line charts with realistic devops and product-analytics data.
- [Pie + Doughnut](https://docs.wirekit.app/components/charts-chartjs/pie-doughnut.md): Categorical breakdowns — traffic sources, plan distribution, attribution funnels.
- [Radar + Polar](https://docs.wirekit.app/components/charts-chartjs/radar-polar.md): Multi-dimensional comparisons — security posture audits, NPS vs CSAT, skill matrices.
- [Scatter + Bubble](https://docs.wirekit.app/components/charts-chartjs/scatter-bubble.md): Two-axis correlation and three-axis bubble visualization with realistic LTV/CAC data.
- [Theming](https://docs.wirekit.app/components/charts-chartjs/theming.md): How WireKit themes Chart.js — CSS-variable bridge, dark-mode reactivity, palette overrides.
- [ApexCharts Demos](https://docs.wirekit.app/components/charts-apex.md): WireKit chart gallery powered by the ApexCharts adapter — every chart family including financial, sparklines, annotations, and live streaming.
- [Motion](https://docs.wirekit.app/components/charts-apex/motion.md): Entrance animations, the dark-mode transition, custom timing, and turning animation off.
- [Annotations](https://docs.wirekit.app/components/charts-apex/annotations.md): Mark events, target zones and outliers on an ApexCharts chart with vertical lines, horizontal regions, point labels and image overlays.
- [Area](https://docs.wirekit.app/components/charts-apex/area.md): Area charts with ApexCharts, filled and stacked or drawn as a range band, with colors and curves taken from your WireKit theme.
- [Bar](https://docs.wirekit.app/components/charts-apex/bar.md): Bar charts — grouped, stacked, 100%-stacked, negative-axis, and the horizontal opt-in.
- [Box Plot](https://docs.wirekit.app/components/charts-apex/boxplot.md): Statistical distribution visualization with min/Q1/median/Q3/max boxes.
- [Candlestick](https://docs.wirekit.app/components/charts-apex/candlestick.md): Candlestick charts for open, high, low and close data such as stock prices, with an optional moving-average line, drawn by ApexCharts.
- [Column](https://docs.wirekit.app/components/charts-apex/column.md): Vertical bar charts with ApexCharts in basic, grouped and stacked forms, themed by WireKit. For horizontal bars, use the bar type.
- [Funnel](https://docs.wirekit.app/components/charts-apex/funnel.md): Funnel charts with ApexCharts for drop-off across stages such as checkout or signup conversion, including stepped variants.
- [Heatmap](https://docs.wirekit.app/components/charts-apex/heatmap.md): Heatmaps with ApexCharts for two-dimensional data colored by value, such as activity over weeks, in plain and range-colored forms.
- [Line](https://docs.wirekit.app/components/charts-apex/line.md): Line charts with ApexCharts in smooth, step and multi-series forms, with tooltips and hover states themed by WireKit.
- [Mixed](https://docs.wirekit.app/components/charts-apex/mixed.md): Dashboards that combine column, line and area series on one ApexCharts chart, with more than one y-axis where the scales differ.
- [Pie + Donut](https://docs.wirekit.app/components/charts-apex/pie-donut.md): Pie and donut charts with ApexCharts for categorical breakdowns, including a monochrome variant, under the same doughnut type name as Chart.js.
- [Radar](https://docs.wirekit.app/components/charts-apex/radar.md): Multi-series radar with polygon-fill variants for multi-dimensional comparisons.
- [Radial Bar](https://docs.wirekit.app/components/charts-apex/radial-bar.md): Radial bar charts with ApexCharts for KPI gauges, multi-ring comparisons and semicircle dials, colored from your WireKit theme.
- [Range Bar](https://docs.wirekit.app/components/charts-apex/range-bar.md): Date-range and Gantt-style schedule visualizations with paired start/end values.
- [Scatter + Bubble](https://docs.wirekit.app/components/charts-apex/scatter-bubble.md): Scatter and bubble charts with ApexCharts for correlation between two values, a third value as bubble size, and datetime axes.
- [Sparklines](https://docs.wirekit.app/components/charts-apex/sparklines.md): Inline KPI sparklines and dashboard-grid patterns using the sparkline component.
- [Streaming](https://docs.wirekit.app/components/charts-apex/streaming.md): Live data via Livewire wire:streaming — appending points, and who is responsible for bounding the series.
- [Timeline](https://docs.wirekit.app/components/charts-apex/timeline.md): Timeline charts with ApexCharts for events along a date axis, such as release schedules, tenure or project plans across several rows.
- [Treemap](https://docs.wirekit.app/components/charts-apex/treemap.md): Hierarchical breakdowns — one level, multi-dimensional, and distributed colors.
- [Theming](https://docs.wirekit.app/components/charts-apex/theming.md): How WireKit themes ApexCharts — CSS-variable bridge, dark-mode reactivity, palette overrides.
- [Clipboard Button](https://docs.wirekit.app/components/clipboard-button.md): A button that copies a value to the clipboard with one click and briefly confirms it, for API keys, commands and share links.
- [Fonts](https://docs.wirekit.app/components/fonts.md): A font loader that serves the bundled Google Fonts from your own app instead of Google's servers, and sets the typography tokens for your preset.
- [DM Sans](https://docs.wirekit.app/components/fonts/dm-sans.md): DM Sans, a sans-serif typeface bundled with WireKit and served from your own app, in weights 400, 500, 600 and 700. Its key is dm-sans.
- [Google Sans Code](https://docs.wirekit.app/components/fonts/google-sans-code.md): Google Sans Code, a monospace typeface bundled with WireKit and served from your own app, in weights 400, 500 and 700. Its key is google-sans-code.
- [IBM Plex Mono](https://docs.wirekit.app/components/fonts/ibm-plex-mono.md): IBM Plex Mono, a monospace typeface bundled with WireKit and served from your own app, in weights 400, 500 and 700. Its key is ibm-plex-mono.
- [IBM Plex Sans](https://docs.wirekit.app/components/fonts/ibm-plex-sans.md): Category: Sans-Serif · Key: ibm-plex-sans · Weights: 400, 500, 600, 700
- [IBM Plex Serif](https://docs.wirekit.app/components/fonts/ibm-plex-serif.md): IBM Plex Serif, a serif typeface bundled with WireKit and served from your own app, in weights 400, 500 and 700. Its key is ibm-plex-serif.
- [Inter](https://docs.wirekit.app/components/fonts/inter.md): Inter, a sans-serif typeface bundled with WireKit and served from your own app, in weights 400, 500, 600 and 700. Its key is inter.
- [JetBrains Mono](https://docs.wirekit.app/components/fonts/jetbrains-mono.md): JetBrains Mono, a monospace typeface bundled with WireKit and served from your own app, in weights 400, 500 and 700. Its key is jetbrains-mono.
- [Lato](https://docs.wirekit.app/components/fonts/lato.md): Lato, a sans-serif typeface bundled with WireKit and served from your own app, in weights 400 and 700. Its key is lato.
- [Lora](https://docs.wirekit.app/components/fonts/lora.md): Lora, a serif typeface bundled with WireKit and served from your own app, in weights 400, 500, 600 and 700. Its key is lora.
- [Merriweather](https://docs.wirekit.app/components/fonts/merriweather.md): Merriweather, a serif typeface bundled with WireKit and served from your own app, in weights 400 and 700. Its key is merriweather.
- [Montserrat](https://docs.wirekit.app/components/fonts/montserrat.md): Montserrat, a sans-serif typeface bundled with WireKit and served from your own app, in weights 400, 500, 600 and 700. Its key is montserrat.
- [Noto Sans](https://docs.wirekit.app/components/fonts/noto-sans.md): Noto Sans, a sans-serif typeface bundled with WireKit and served from your own app, in weights 400, 500, 600 and 700. Its key is noto-sans.
- [Noto Serif](https://docs.wirekit.app/components/fonts/noto-serif.md): Noto Serif, a serif typeface bundled with WireKit and served from your own app, in weights 400, 500, 600 and 700. Its key is noto-serif.
- [Nunito Sans](https://docs.wirekit.app/components/fonts/nunito-sans.md): Nunito Sans, a sans-serif typeface bundled with WireKit and served from your own app, in weights 400, 500, 600 and 700. Its key is nunito-sans.
- [Open Sans](https://docs.wirekit.app/components/fonts/open-sans.md): Open Sans, a sans-serif typeface bundled with WireKit and served from your own app, in weights 400, 500, 600 and 700. Its key is open-sans.
- [Playfair Display](https://docs.wirekit.app/components/fonts/playfair-display.md): Playfair Display, a serif typeface bundled with WireKit and served from your own app, in weights 400, 500, 600 and 700. Its key is playfair-display.
- [Roboto](https://docs.wirekit.app/components/fonts/roboto.md): Roboto, a sans-serif typeface bundled with WireKit and served from your own app, in weights 400, 500 and 700. Its key is roboto.
- [Roboto Mono](https://docs.wirekit.app/components/fonts/roboto-mono.md): Roboto Mono, a monospace typeface bundled with WireKit and served from your own app, in weights 400, 500 and 700. Its key is roboto-mono.
- [Source Code Pro](https://docs.wirekit.app/components/fonts/source-code-pro.md): Source Code Pro, a monospace typeface bundled with WireKit and served from your own app, in weights 400, 500 and 700. Its key is source-code-pro.
- [Space Mono](https://docs.wirekit.app/components/fonts/space-mono.md): Space Mono, a monospace typeface bundled with WireKit and served from your own app, in weights 400 and 700. Its key is space-mono.
- [VT323](https://docs.wirekit.app/components/fonts/vt323.md): VT323, a pixel-style display typeface bundled with WireKit and served from your own app, in weight 400. Its key is vt323.
- [Icon](https://docs.wirekit.app/components/icon.md): SVG icons addressed by semantic names such as close, search or trash, so switching icon sets changes every icon without touching templates.
- [Liquid Glass](https://docs.wirekit.app/components/liquid-glass.md): Liquid glass surfaces in four levels, from clear to opaque, with an optional refraction
- [Map](https://docs.wirekit.app/components/map.md): Map adapter (MapLibre/Leaflet peer dependency) with markers and an accessible location list
- [MapLibre GL](https://docs.wirekit.app/components/map/maplibre.md): Set up MapLibre GL as the map engine — install, map styles, dark mode, and real-world marker patterns
- [Leaflet & OpenStreetMap](https://docs.wirekit.app/components/map/leaflet.md): Set up Leaflet as the map engine with OpenStreetMap tiles — install, attribution, usage policy, license, and live previews
- [QR Code](https://docs.wirekit.app/components/qr-code.md): A QR code generated on the server as inline SVG from any string, such as a URL or a Wi-Fi setup code, with no JavaScript.
- [Replay Button](https://docs.wirekit.app/components/replay-button.md): Companion button that re-mounts its closest replay target — pairs with the contract emitted by re-runnable and resettable WireKit previews.
- [Resizable](https://docs.wirekit.app/components/resizable.md): Split panel layouts with a divider that the reader drags to resize the panels, for editors, file browsers and side-by-side views.
- [Scroll Area](https://docs.wirekit.app/components/scroll-area.md): A scrollable container with a slim themed scrollbar, configurable orientation and maximum height, reachable and scrollable from the keyboard.
- [Scroll to Top](https://docs.wirekit.app/components/scroll-to-top.md): A floating button that appears once the reader has scrolled past a set depth and takes them smoothly back to the top of the page.
- [Scrollbar](https://docs.wirekit.app/components/scrollbar.md): A CSS utility class that gives any scrollable element a slim scrollbar in your theme's colors, dark mode included.
- [Sparkline](https://docs.wirekit.app/components/sparkline.md): Inline trend sparkline — axis-less line chart for KPI strips and dashboard cells.
- [Skip Link](https://docs.wirekit.app/components/skip-link.md): A skip link for WCAG 2.4.1 that stays hidden until a keyboard user tabs onto it, then jumps past the navigation to the main content.
- [Structured Data](https://docs.wirekit.app/components/structured-data.md): Emits valid JSON-LD for search engines from a plain PHP array, escaped safely, without hand-writing JSON inside a Blade template.
- [Visually Hidden](https://docs.wirekit.app/components/visually-hidden.md): Content hidden from sight but kept for screen readers, for labels and context that the visual layout already makes clear.
- [Button Group](https://docs.wirekit.app/components/button-group.md): Weld adjacent controls into a single unit — attached buttons, split buttons, search fields

## Theming
- [Design Tokens](https://docs.wirekit.app/theming/design-tokens.md): Reference for the WireKit CSS variables — colors, typography, spacing, motion, sizing, component-specific tokens, and the chart-theming palette
- [Theme: Default](https://docs.wirekit.app/theming/default.md): WireKit's refined default theme — neutral palette, editorial typography, subtle shadows, 0.5rem radius.
- [Theme: Aurora](https://docs.wirekit.app/theming/aurora.md): Modern, color-confident preset toned to the WireKit brand magenta, with one-line --theme-hue retinting.
- [Theme: Brutalist](https://docs.wirekit.app/theming/brutalist.md): High-contrast, hard-edged brutalist theme — thick borders, zero radius, stark shadows.
- [Theme: Cupertino](https://docs.wirekit.app/theming/cupertino.md): Apple-inspired theme — translucent surfaces, system-blue accent. Includes the Liquid Glass extension.
- [Theme: Material](https://docs.wirekit.app/theming/material.md): Material Design 3 aesthetic — elevated surfaces, indigo accent, Roboto type.
- [Theme: Minimal](https://docs.wirekit.app/theming/minimal.md): Radical reduction — no radius, no shadows, no decorative borders. For data-dense interfaces and admin tools.
- [Theme: Retro Terminal](https://docs.wirekit.app/theming/retro-terminal.md): A theme preset with green text on a black background and a monospace type stack, the look of a phosphor terminal.
- [Theme: Soft](https://docs.wirekit.app/theming/soft.md): Warm, rounded aesthetic for an end-user-facing SaaS, with a violet accent (DM Sans).

## Extending
- [ComponentRegistry — Programmatic Discovery](https://docs.wirekit.app/extending/component-registry.md): Discover WireKit components from PHP: the ComponentRegistry API for names, categories, props and their defaults.
- [Authoring Custom Blade Components](https://docs.wirekit.app/extending/authoring-custom-components.md): Write your own Blade components against the WireKit conventions — design tokens, prop shapes, slots and class merging.
- [Authoring Custom Alpine Plugins](https://docs.wirekit.app/extending/authoring-custom-alpine-plugins.md): Write an Alpine plugin that follows the WireKit conventions for teardown, events and Livewire navigation.
- [Composition Patterns — Chrome vs. Content](https://docs.wirekit.app/extending/composition-patterns.md): How WireKit page-edge primitives divide into chrome and content, and which one to reach for when composing a layout.
- [Prop Naming Conventions](https://docs.wirekit.app/extending/prop-naming-conventions.md): The four semantic-modifier prop families — intent, surface, variant, tone — and how to tell which one a component means.
- [Public CSS API](https://docs.wirekit.app/extending/public-css-api.md): Every load-bearing wk-* class WireKit ships in dist/wirekit.css — emitter, contract, customization pattern, and stability tier
- [Content-Edge Spine](https://docs.wirekit.app/extending/spine-contract.md): The per-component inline-padding contract: every layout primitive that reads the spine token, and how to extend it to your own components.
- [Optimistic UI](https://docs.wirekit.app/extending/optimistic-ui.md): What an optimistic update owes a screen-reader user, and how to build one that keeps the promise: the state machine, the four exits, the four proofs.
- [Pest Browser-Test Setup](https://docs.wirekit.app/extending/pest-browser-setup.md): Set up Pest v4 browser tests against a real browser for a Laravel app that uses WireKit components.
- [Console Output Baseline](https://docs.wirekit.app/extending/console-output-baseline.md): What a WireKit page is expected to log in the browser console, so you can tell a real problem from normal output.
- [Contracts](https://docs.wirekit.app/extending/contracts.md): The two interfaces WireKit publishes for you to implement — a chart library adapter and an icon preset — and what each method is for.

## Recipes
- [Country Picker](https://docs.wirekit.app/blueprints/recipes/country-picker.md): A searchable country combobox with each country's flag and its name in the reader's language, sorted the way that language sorts.
- [Documentation Reader](https://docs.wirekit.app/blueprints/recipes/documentation-reader.md): Heavier reading-shell composition for documentation sites — numbered spine, fillSections, backToTop pill, dwell-tuned bookmark.
- [Feature with Numbered Marker](https://docs.wirekit.app/blueprints/recipes/feature-numbered-marker.md): Replace the auto-generated icon chip with a numbered step indicator using iconSlot.
- [Hero with Code Aside](https://docs.wirekit.app/blueprints/recipes/hero-with-code-aside.md): Marketing hero with copy on the left and an installable code snippet on the right.
- [Live KPI Strip](https://docs.wirekit.app/blueprints/recipes/live-kpi-strip.md): Compact horizontal row of ticker widgets with auto-refresh via wire:poll.
- [Long-form Article](https://docs.wirekit.app/blueprints/recipes/long-form-article.md): Canonical reading-shell composition for blog posts and feature articles — progress bar, sidebar spine, return-bookmark, time-to-read.
- [Marketing Landing Page](https://docs.wirekit.app/blueprints/recipes/marketing-landing-page.md): A complete marketing landing page built from WireKit components alone — navbar, hero, feature grid, pricing, FAQ and footer.
- [Marketing Landing TOC](https://docs.wirekit.app/blueprints/recipes/marketing-landing-toc.md): Sticky horizontal TOC strip across the top of a marketing landing page — Hero, Features, Pricing, FAQ — with active-section highlighting.
- [On-Page TOC](https://docs.wirekit.app/blueprints/recipes/on-page-toc.md): Layout wiring for an in-page table of contents: a right-edge sticky spine that reads the page headings, highlights the active one, and follows the reader.
- [Validating a Phone Number](https://docs.wirekit.app/blueprints/recipes/phone-number-validation.md): The phone field formats and binds E.164; deciding whether a number is real belongs on the server, and this is how.
- [Reading Sidebar](https://docs.wirekit.app/blueprints/recipes/reading-sidebar.md): A sticky reading sidebar that fuses a table of contents, an active-section highlight and an article-scoped progress bar into one "where am I" affordance.
- [Stat with Sparkline](https://docs.wirekit.app/blueprints/recipes/stat-with-sparkline.md): Compact KPI card combining label, value, sparkline trend, and source citation.
- [Toolbar Filter Bar](https://docs.wirekit.app/blueprints/recipes/toolbar-filter-bar.md): Standard admin-list toolbar combining search input, filter selects, and bulk action buttons.

## Partials
- [Hero Sections](https://docs.wirekit.app/blueprints/partials/hero.md): Eye-catching page headers that introduce your product. Choose from centered, split-with-image, or with-screenshot variants.
- [Feature Grids](https://docs.wirekit.app/blueprints/partials/features.md): Showcase your product's capabilities with icon-driven feature cards. Available in 3-column grid and alternating screenshot layouts.
- [Pricing Tables](https://docs.wirekit.app/blueprints/partials/pricing.md): Tier-based pricing displays with feature comparisons. Available in 3-tier and 2-tier layouts.
- [Testimonials](https://docs.wirekit.app/blueprints/partials/testimonials.md): Social proof sections with customer quotes. Available as a grid or single featured quote.
- [CTA Sections](https://docs.wirekit.app/blueprints/partials/cta.md): Call-to-action blocks that drive conversion. Place them between content sections or at the bottom of a page.
- [FAQ Sections](https://docs.wirekit.app/blueprints/partials/faq.md): Frequently asked questions displayed as a disclosure list or a 2-column grid.
- [Footer](https://docs.wirekit.app/blueprints/partials/footer.md): Page footers with navigation links, branding, and optional newsletter signup.
- [Logo Cloud](https://docs.wirekit.app/blueprints/partials/logo-cloud.md): A row of partner/customer logos for social proof. Simple and effective.

## Page Layouts
- [Console Shell](https://docs.wirekit.app/blueprints/application-shells/console-shell.md): A module rail, the module's own navigation beside it, and one horizontal rule across all three columns — the shape modern admin consoles converged on.
- [Rail Shell](https://docs.wirekit.app/blueprints/application-shells/rail-shell.md): A single module rail against an inset content panel — the console shape for an application whose areas need no second navigation column.
- [Sidebar Shell](https://docs.wirekit.app/blueprints/application-shells/sidebar-shell.md): One navigation column at full height, the top bar inside the content column beside it — the shape most admin panels and dashboards take.
- [Stacked Shell](https://docs.wirekit.app/blueprints/application-shells/stacked-shell.md): One bar across the top, the content below it, and no navigation column at all — the shape for an application whose sections fit in a single row.
- [Multi-Column Shell](https://docs.wirekit.app/blueprints/application-shells/multi-column.md): A module rail, a scrollable list of records beside it, and the selected record filling the rest — the shell shape behind mail, queues and chat.

## Changelog
- [Latest release notes](https://docs.wirekit.app/changelog/latest.md): The newest WireKit release, as markdown
- [Release index](https://docs.wirekit.app/changelog.json): Every release with its date, its kind and links to its notes, as JSON
- [WireKit v2.69.0](https://docs.wirekit.app/changelog/v2.69.0.md): Minor release of 2026-10-18
- [WireKit v2.68.0](https://docs.wirekit.app/changelog/v2.68.0.md): Minor release of 2026-10-16
- [WireKit v2.67.0](https://docs.wirekit.app/changelog/v2.67.0.md): Minor release of 2026-10-15
- [WireKit v2.66.0](https://docs.wirekit.app/changelog/v2.66.0.md): Minor release of 2026-10-13
- [WireKit v2.65.0](https://docs.wirekit.app/changelog/v2.65.0.md): Minor release of 2026-10-05
- [WireKit v2.64.0](https://docs.wirekit.app/changelog/v2.64.0.md): Minor release of 2026-10-04
- [WireKit v2.63.0](https://docs.wirekit.app/changelog/v2.63.0.md): Minor release of 2026-10-01
- [WireKit v2.62.0](https://docs.wirekit.app/changelog/v2.62.0.md): Minor release of 2026-10-01
- [WireKit v2.61.0](https://docs.wirekit.app/changelog/v2.61.0.md): Minor release of 2026-09-30
- [WireKit v2.60.0](https://docs.wirekit.app/changelog/v2.60.0.md): Minor release of 2026-09-30

## Optional
- [Getting Started](https://docs.wirekit.app/getting-started.md): Install WireKit in a Laravel + Livewire project, using the verified-working recipe used by docs.wirekit.app itself
- [Adding WireKit to the Livewire Starter Kit](https://docs.wirekit.app/getting-started/livewire-starter-kit.md): Fitting WireKit into an existing Livewire Starter Kit project — what the installer changes, where the kit keeps its head and body, and how to verify it.
- [Integration Guide](https://docs.wirekit.app/getting-started/integration.md): Required setup, optional dependencies, asset publishing, and verification checklist for embedding WireKit in your app
- [Dependencies](https://docs.wirekit.app/dependencies.md): Required and optional dependencies — PHP, Laravel, Livewire, Tailwind CSS, Alpine, blade-icons, Chart.js, bacon-qr-code
- [Theming](https://docs.wirekit.app/theming.md): CSS variable token system, theme presets (Default, Minimal, Soft, Material, Brutalist, Retro Terminal, Cupertino, Aurora) and the Liquid Glass extension
- [Variants & Intents](https://docs.wirekit.app/variants-and-intents.md): Cross-component reference for color/severity props across the WireKit component library
- [Strict Validation](https://docs.wirekit.app/strict-validation.md): How WireKit validates component prop values across CLI, HTTP, and test contexts — and how to opt into the strictest mode.
- [Customization](https://docs.wirekit.app/customization.md): Four levels of customization — CSS variables, PHP defaults, deep personalization scopes, and view publishing
- [Localization](https://docs.wirekit.app/localization.md): Translate WireKit's built-in strings — the JSON key reference, publishing it, and adding your own locale
- [Animations](https://docs.wirekit.app/animations.md): Motion design tokens, animation presets, and the wirekitAnimate Alpine helper
- [CLI Reference](https://docs.wirekit.app/cli-reference.md): Every Artisan command WireKit ships — install, diagnostics, scaffolding, asset publishing, extension installers, AI tooling, machine-readable manifests
- [wirekit:doctor](https://docs.wirekit.app/cli-reference/wirekit-doctor.md): A diagnostic command that checks your WireKit installation for drift from the expected setup and repairs what it can when you pass --fix.
- [AI & Agent Tooling](https://docs.wirekit.app/ai-tooling.md): Point Cursor, Claude Code, Copilot and any LLM at WireKit — a local MCP server, machine-readable manifests, schema exports and a ready-made rules file.
- [Events](https://docs.wirekit.app/events.md): Every event WireKit dispatches, what it carries, and which of the three historical naming conventions it belongs to.
- [Overlay Events](https://docs.wirekit.app/overlays/events.md): The event vocabulary for showing, closing and reacting to WireKit overlays — modal, drawer, alert-dialog, command palette, tour and toasts.
- [Introduction](https://docs.wirekit.app/blueprints/index.md): Drop-in Blade partials and worked-example recipes built from WireKit components — copy-paste patterns to grab, drop in and customize.
- [All Blocks (Gallery)](https://docs.wirekit.app/blocks.json)