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

## 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): App shell with header, sidebar, and main content
- [Aspect Ratio](https://docs.wirekit.app/components/aspect-ratio.md): Constrained aspect ratio wrapper
- [Brand](https://docs.wirekit.app/components/brand.md): Logo and name combo for header/sidebar
- [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.
- [Center](https://docs.wirekit.app/components/center.md): Center content horizontally and vertically
- [Container](https://docs.wirekit.app/components/container.md): Max-width content container with optional padding
- [CTA](https://docs.wirekit.app/components/cta.md): Call-to-action banner section
- [Divider](https://docs.wirekit.app/components/divider.md): Horizontal or vertical divider with optional label
- [Feature](https://docs.wirekit.app/components/feature.md): Individual feature card for feature grids
- [Feature Grid](https://docs.wirekit.app/components/feature-grid.md): Responsive grid for feature cards
- [Footer](https://docs.wirekit.app/components/footer.md): Landing page footer with columns and legal
- [Grid](https://docs.wirekit.app/components/grid.md): CSS grid with responsive column syntax
- [Header](https://docs.wirekit.app/components/header.md): Sticky page header for app-shell layouts
- [Hero](https://docs.wirekit.app/components/hero.md): Landing page hero with title, lede, and actions
- [List](https://docs.wirekit.app/components/list.md): Ordered or unordered list with consistent spacing and marker styles
- [Main](https://docs.wirekit.app/components/main.md): Primary content area in app-shell layouts
- [Profile](https://docs.wirekit.app/components/profile.md): Avatar and name display for headers
- [Row](https://docs.wirekit.app/components/row.md): Horizontal flex container
- [Section](https://docs.wirekit.app/components/section.md): Full-width page section with background and padding
- [Shell Bar](https://docs.wirekit.app/components/shell-bar.md): Aligned column head that draws an app shell's top rule
- [Scope Switcher](https://docs.wirekit.app/components/scope-switcher.md): A searchable switcher for the team, server or site a page is about.
- [Sidebar](https://docs.wirekit.app/components/sidebar.md): Vertical sidebar navigation
- [Spacer](https://docs.wirekit.app/components/spacer.md): Flexible space filler in flex layouts
- [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): Vertical flex container
- [Sticky Panel](https://docs.wirekit.app/components/sticky-panel.md): A sticky companion column with header, scrollable body, and footer
- [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 partner or customer logo wall, exposed as a labeled list.
- [Team Section](https://docs.wirekit.app/components/team-section.md): A team roster grid — portrait, name, role and links per person.
- [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 page-edge bar for announcements, promos, and notices
- [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): Action button with intent + surface composition and loading state
- [Checkbox](https://docs.wirekit.app/components/checkbox.md): Checkbox input with label, hint, and error support
- [Color Picker](https://docs.wirekit.app/components/color-picker.md): Native color picker with preview swatch
- [Combobox](https://docs.wirekit.app/components/combobox.md): Autocomplete select with search filtering
- [Date Picker](https://docs.wirekit.app/components/date-picker.md): Calendar-based date input
- [Editor](https://docs.wirekit.app/components/editor.md): Rich-text editor — a Tiptap adapter with a toolbar and form binding
- [Field](https://docs.wirekit.app/components/field.md): Form field wrapper with label, hint, and error
- [File Upload](https://docs.wirekit.app/components/file-upload.md): Drag-and-drop file upload area
- [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.
- [Input](https://docs.wirekit.app/components/input.md): Text input with prefix/suffix support
- [Inline Edit](https://docs.wirekit.app/components/inline-edit.md): Edit a value in place, with an explicit confirm step
- [Label](https://docs.wirekit.app/components/label.md): Form label with required indicator
- [Multi-Select](https://docs.wirekit.app/components/multi-select.md): Multi-value select with tag display
- [Number Input](https://docs.wirekit.app/components/number-input.md): Numeric input with stepper buttons
- [OTP Input](https://docs.wirekit.app/components/otp-input.md): One-time password input with auto-focus
- [Password Input](https://docs.wirekit.app/components/password-input.md): Password input with visibility toggle and strength meter
- [Radio](https://docs.wirekit.app/components/radio.md): Radio button with label and hint
- [Range Slider](https://docs.wirekit.app/components/range-slider.md): Dual-thumb range slider
- [Rating](https://docs.wirekit.app/components/rating.md): Star rating input
- [Segmented Control](https://docs.wirekit.app/components/segmented-control.md): Segmented toggle control
- [Select](https://docs.wirekit.app/components/select.md): Native select dropdown
- [Slider](https://docs.wirekit.app/components/slider.md): Single-thumb slider with value display
- [Tags Input](https://docs.wirekit.app/components/tags-input.md): Tag entry input with add/remove
- [Textarea](https://docs.wirekit.app/components/textarea.md): Multi-line text input with resize control
- [Time Picker](https://docs.wirekit.app/components/time-picker.md): Time selection input
- [Toggle](https://docs.wirekit.app/components/toggle.md): Toggle switch with label and hint
- [Toggle Button](https://docs.wirekit.app/components/toggle-button.md): A single two-state button that stays pressed — bold, italic, mute
- [Alert](https://docs.wirekit.app/components/alert.md): Contextual alert message
- [Avatar](https://docs.wirekit.app/components/avatar.md): User avatar with image, initials, or status
- [Badge](https://docs.wirekit.app/components/badge.md): Small status label
- [Blockquote](https://docs.wirekit.app/components/blockquote.md): Styled blockquote with optional citation
- [Callout](https://docs.wirekit.app/components/callout.md): Highlighted information callout
- [Card](https://docs.wirekit.app/components/card.md): Content container card with optional link
- [Code](https://docs.wirekit.app/components/code.md): Inline code with monospace font
- [Code Block](https://docs.wirekit.app/components/code-block.md): Multi-line code block with copy button
- [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): Horizontal divider with centered date label
- [Event Calendar](https://docs.wirekit.app/components/event-calendar.md): Scheduling calendar with month, week, and agenda views
- [Heading](https://docs.wirekit.app/components/heading.md): Semantic heading (h1–h6) with auto-sizing
- [Highlight](https://docs.wirekit.app/components/highlight.md): Text with highlighted query matches
- [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): Responsive image grid with an accessible, keyboard-navigable lightbox
- [Image Compare](https://docs.wirekit.app/components/image-compare.md): Before/after image comparison slider
- [Kanban](https://docs.wirekit.app/components/kanban.md): Horizontal scrollable board of status columns
- [Kbd](https://docs.wirekit.app/components/kbd.md): Keyboard key indicator
- [Link](https://docs.wirekit.app/components/link.md): Styled anchor with external link support
- [Mark](https://docs.wirekit.app/components/mark.md): Highlighted text mark
- [Prose](https://docs.wirekit.app/components/prose.md): Typography wrapper for raw HTML content
- [Reveal](https://docs.wirekit.app/components/reveal.md): Animation wrapper with viewport / click / manual triggers and 11 in/out presets
- [Text](https://docs.wirekit.app/components/text.md): Body text with size, variant, and weight
- [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): Key-value data display list
- [Empty State](https://docs.wirekit.app/components/empty-state.md): Placeholder for empty content areas
- [Pagination](https://docs.wirekit.app/components/pagination.md): Page navigation for paginated data
- [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): Progress bar with optional value display
- [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
- [Shimmer](https://docs.wirekit.app/components/shimmer.md): Animated text-glyph shimmer for live and streaming status
- [Skeleton](https://docs.wirekit.app/components/skeleton.md): Loading placeholder skeleton
- [Spinner](https://docs.wirekit.app/components/spinner.md): Accessible loading spinner
- [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): Single statistic display
- [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 filled, square-cornered chip for numbering a sequence of steps.
- [Table](https://docs.wirekit.app/components/table.md): Data table with sorting and styling options
- [Ticker](https://docs.wirekit.app/components/ticker.md): Compact label + value + delta widget for dashboards
- [Timeline](https://docs.wirekit.app/components/timeline.md): Vertical timeline of events
- [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
- [Tree View](https://docs.wirekit.app/components/tree-view.md): Hierarchical tree view
- [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.
- [Product Card](https://docs.wirekit.app/components/product-card.md): The ecommerce keystone — image, price with compare-at, rating, stock state, CTA.
- [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): Chat/comment message bubble with author and timestamp
- [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
- [Message Typing](https://docs.wirekit.app/components/message-typing.md): Animated three-dot typing indicator for chat threads
- [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): Emoji reaction pill with count and toggle state
- [Accordion](https://docs.wirekit.app/components/accordion.md): Collapsible content panels
- [Breadcrumb](https://docs.wirekit.app/components/breadcrumb.md): Breadcrumb trail with separator
- [Collapsible](https://docs.wirekit.app/components/collapsible.md): A single show/hide disclosure — one trigger toggles one region
- [Countdown](https://docs.wirekit.app/components/countdown.md): Live countdown to an absolute deadline with overdue and urgent states
- [Menubar](https://docs.wirekit.app/components/menubar.md): Horizontal menu bar with dropdowns
- [Navbar](https://docs.wirekit.app/components/navbar.md): Top navigation bar
- [Navigation Menu](https://docs.wirekit.app/components/navigation-menu.md): Accessible navigation menu with mega-menu support
- [Stepper](https://docs.wirekit.app/components/stepper.md): Step indicator for multi-step flows
- [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 navigation
- [Toolbar](https://docs.wirekit.app/components/toolbar.md): Horizontal bar with search, filters, and action buttons
- [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): Confirmation dialog with required action
- [Command Palette](https://docs.wirekit.app/components/command-palette.md): Searchable command palette (⌘K)
- [Context Menu](https://docs.wirekit.app/components/context-menu.md): Right-click context menu
- [Drawer](https://docs.wirekit.app/components/drawer.md): Slide-out panel from screen edge
- [Dropdown](https://docs.wirekit.app/components/dropdown.md): Dropdown menu with items
- [Hover Card](https://docs.wirekit.app/components/hover-card.md): Content preview on hover
- [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): Dialog overlay with backdrop
- [Popover](https://docs.wirekit.app/components/popover.md): Contextual content popover
- [Toast](https://docs.wirekit.app/components/toast.md): Auto-dismissing notification toast with variant + duration
- [Tooltip](https://docs.wirekit.app/components/tooltip.md): Hover tooltip with configurable position
- [Tour](https://docs.wirekit.app/components/tour.md): Guided product tour with steps
- [FAB](https://docs.wirekit.app/components/fab.md): A floating action button that fans out into secondary actions.
- [Action Bar](https://docs.wirekit.app/components/action-bar.md): Floating action bar for bulk operations
- [Activity Row](https://docs.wirekit.app/components/activity-row.md): Activity-feed / timeline row with kind-colored dot, actor, timestamp, and badge slot
- [Calendar](https://docs.wirekit.app/components/calendar.md): Calendar date display
- [Carousel](https://docs.wirekit.app/components/carousel.md): Image/content carousel with autoplay
- [Chart](https://docs.wirekit.app/components/chart.md): Chart component with Chart.js or ApexCharts adapter
- [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, stacked, and range-filled area charts with realistic e-commerce and devops data.
- [Bar](https://docs.wirekit.app/components/charts-chartjs/bar.md): Simple, grouped, stacked, and horizontal bar variations with realistic SaaS revenue and headcount data.
- [Line](https://docs.wirekit.app/components/charts-chartjs/line.md): Smooth, stepped, dashed, 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): Animation showcase including dark-mode preset transitions and reduced-motion handling.
- [Annotations](https://docs.wirekit.app/components/charts-apex/annotations.md): Vertical lines, horizontal regions, point labels, and image overlays.
- [Area](https://docs.wirekit.app/components/charts-apex/area.md): Filled, stacked, range-area, and spline-with-gradient variants.
- [Bar](https://docs.wirekit.app/components/charts-apex/bar.md): Horizontal bars — grouped, stacked, 100%-stacked, and negative-axis patterns.
- [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): OHLC stock-price visualization with optional moving-average overlay.
- [Column](https://docs.wirekit.app/components/charts-apex/column.md): Vertical bar charts — grouped, stacked, range, and dynamic-loaded patterns.
- [Funnel](https://docs.wirekit.app/components/charts-apex/funnel.md): Conversion-funnel visualization with stepped variants.
- [Heatmap](https://docs.wirekit.app/components/charts-apex/heatmap.md): Activity heatmaps with multi-series, range, and rounded variants.
- [Line](https://docs.wirekit.app/components/charts-apex/line.md): Smooth, spline, dashed, step, and multi-series synchronized line charts.
- [Mixed](https://docs.wirekit.app/components/charts-apex/mixed.md): Multi-axis dashboards with line+column, line+area, and dual y-axis combinations.
- [Pie + Donut](https://docs.wirekit.app/components/charts-apex/pie-donut.md): Categorical breakdowns with monochrome, patterned, and image-fill variants.
- [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): Circle-gauge KPIs, multi-ring comparisons, and semi-circle dials.
- [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): Two-axis correlation, three-axis bubble, and datetime-axis variants.
- [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 with strict / stream FIFO modes.
- [Timeline](https://docs.wirekit.app/components/charts-apex/timeline.md): Project-timeline and multi-series schedule visualizations.
- [Treemap](https://docs.wirekit.app/components/charts-apex/treemap.md): Hierarchical breakdowns with color-range and patterned variants.
- [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): Copy-to-clipboard button
- [Fonts](https://docs.wirekit.app/components/fonts.md): GDPR-compliant font loader
- [Icon](https://docs.wirekit.app/components/icon.md): SVG icon with preset support
- [Liquid Glass](https://docs.wirekit.app/components/liquid-glass.md): Glassmorphism extension with backdrop-blur surfaces and frosted overlays
- [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): QR code generator
- [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): Resizable panel layout
- [Scroll Area](https://docs.wirekit.app/components/scroll-area.md): Scrollable content area with styled scrollbar
- [Scroll to Top](https://docs.wirekit.app/components/scroll-to-top.md): Floating scroll-to-top button
- [Scrollbar](https://docs.wirekit.app/components/scrollbar.md): Themed scrollbar styling utility class for overflow containers
- [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): Drop-in WCAG 2.4.1 (Bypass Blocks) skip-link helper
- [Structured Data](https://docs.wirekit.app/components/structured-data.md): JSON-LD script block emitter (XSS-safe via JSON_HEX_TAG)
- [Visually Hidden](https://docs.wirekit.app/components/visually-hidden.md): Screen-reader-only content wrapper
- [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): Green-on-black terminal aesthetic with a monospace type stack.
- [Theme: Soft](https://docs.wirekit.app/theming/soft.md): Warm, rounded, developer-SaaS aesthetic 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.

## Recipes
- [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.
- [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 an accordion or 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
- [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.
- [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.

## Optional
- [Getting Started](https://docs.wirekit.app/getting-started.md): Install WireKit in a Laravel + Livewire project — 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 — the four touchpoints where Starter-Kit defaults differ from a clean-room install.
- [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) 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, scaffold, verify, theme, list, and publish-icons
- [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.md)