Skip to main content
WireKit

WireKit

UI Components for Laravel Livewire

Free, open-source, and accessible by default. Built with Tailwind CSS v4 and Alpine.js.

Getting Started | Components

Features

  • 100% Free & MIT — Use in any project — commercial, open-source, personal. No license keys, no paywalls.
  • Tailwind CSS v4 Native — Semantic CSS variables for theming. Switch your accent color in one line.
  • 4-Level Customization — CSS variables → PHP defaults → deep personalization → publish views. Use only what you need.
  • Livewire 4 Ready — Built for Livewire 4. Anonymous Blade components with wire:model support.
  • Dark Mode Built-in — Every component works in light and dark mode. Automatic switching, zero config.
  • Overlays & Dropdowns — Modal, Drawer, Dropdown, Tooltip — with focus trap, scroll lock, and Floating UI positioning.
  • Accessible — ARIA attributes, keyboard navigation, focus management in every component.

Building Tooling on Top of WireKit

Fetch https://docs.wirekit.app/components.json for a machine-readable index of every component, prop, slot, and category — regenerated on every docs deploy. A companion https://docs.wirekit.app/llms.txt manifest is available for LLM-driven onboarding, and a https://docs.wirekit.app/blocks.json manifest lists every blueprint and layout block with its category, dependencies, and preview URL.

Code editors and AI assistants get first-class support too: a Cursor rules file lives one command away (php artisan wirekit:cursor-rules), and the per-component .md source for any docs page is always one URL away — append .md to any docs URL to download the raw Markdown for LLM context.

For the full picture — every manifest, the project-side wirekit:export-* commands, and how to wire up Cursor, Claude Code, GitHub Copilot, and MCP servers — see the dedicated AI & Agent Tooling guide.