WireKit v1.0.0
First stable release of WireKit — a free, MIT-licensed UI component library for Laravel Livewire built on Tailwind CSS v4, Alpine.js, and PHP 8.4+.
Added
- 71 Blade components spanning form controls, overlays, navigation, display,
feedback, and specialized categories — every component uses design tokens
exclusively (zero hardcoded colors), auto-switches between light and dark mode
via
.darkclass, and supports personalization viaWireKit::.personalize() - Form controls: Input, Textarea, Select, Checkbox, Toggle, Radio Group, Range Slider, Color Picker, Date Picker, File Upload, Pin Input, OTP Input, Multi-Select, Combobox, Rich Text Editor (Tiptap).
- Overlay components: Modal, Drawer, Dropdown, Popover, Tooltip, Hover Card, Command Palette, Context Menu, Toast (with toast region), Confirm Dialog, Tour.
- Navigation: Navigation Menu, Breadcrumb, Pagination, Tabs, Stepper, Scroll-to-Top.
- Display components: Avatar, Badge, Card, Accordion, Timeline, Carousel, Image Compare, Scroll Area, Skeleton, Prose, QR Code, Clipboard Button, Collapsible, Separator, Resizable Panels, Tree View, Calendar, Stat Card, Data Table.
- Feedback: Alert, Progress Bar, Rating, Spinner.
- Typography & layout: Fonts (21 GDPR-compliant Google Fonts served locally), Icon system (4 presets: Heroicons, Lucide, Phosphor, Tabler with 26 semantic aliases), Chart (via Chart.js adapter).
- Theming system with ~80 CSS custom properties, 7 theme presets (Default, Minimal, Soft, Material, Brutalist, Retro, Cupertino), all WCAG 2.2 AA compliant in both light and dark mode.
- Font system — 21 locally bundled Google Fonts (10 sans, 5 serif, 6 mono),
zero external requests, configurable via
config/, served from the app's own domain for CSP and GDPR compliance.wirekit. php - Icon system — pluggable SVG icon presets with resolved aliases, caching,
and a
<x-wirekit::component that renders any icon by name.icon> - Chart system — adapter-based architecture with a Chart.js adapter, a
class-based
<x-wirekit-chart>component, and dark-mode-aware color tokens. - JavaScript bundles: full bundle (Floating UI + focus-trap, ~76 KB), core bundle (chart + image-compare only, ~7.5 KB), and ESM bundle for tree-shaking.
- Accessibility: every interactive component follows WAI-ARIA Authoring
Practices — proper
role,aria-*attributes, keyboard navigation, focus management, screen-reader announcements viaaria-liveregions. Tour and modal userole="dialog", combobox implements full ARIA 1.2 combobox pattern, all form components support error and description associations. - Personalization system — three levels of customization: CSS variable
overrides (theme presets),
WireKit::for global class overrides, andpersonalize() WireKit::for per-instance class overrides.scope() - Reduced-motion support —
@media (prefers-reduced-motion: reduce)disables all WireKit animations and transitions, including skeleton pulse, progress bar indeterminate, and Alpine x-transition durations.
Browser Support
Chrome 111+, Edge 111+, Safari 16.4+, Firefox 128+ — matching the Tailwind CSS v4 browser baseline.