Skip to main content

WireKit v1.0.0

Major release

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 .dark class, and supports personalization via WireKit::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/wirekit.php, served from the app's own domain for CSP and GDPR compliance.
  • Icon system — pluggable SVG icon presets with resolved aliases, caching, and a <x-wirekit::icon> component that renders any icon by name.
  • 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 via aria-live regions. Tour and modal use role="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::personalize() for global class overrides, and WireKit::scope() for per-instance class overrides.
  • 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.