Practical UI Components With Livewire and Alpine
In this series, we'll build a collection of practical UI components with Livewire and AlpineJS, using real interface patterns instead of toy examples. We'll start with smaller pieces like inline editing and a reusable toast system, then move into more stateful components like multi-step flows, tag inputs, dynamic search, notifications, and a drag-and-drop Kanban board.
Along the way, we'll focus on the details that make UI feel great to use: autosave, subtle feedback, keyboard navigation, transitions, persisted state, polling, and clean reset behavior. By the end, you'll have a small library of polished components and a clearer sense of how to structure these kinds of interfaces with Livewire and Alpine in your own apps.
Series episodes
Getting Started
1m 52sBuild practical UI components with Livewire and AlpineJS. Learn to craft modern, smooth, thoughtful interactions fast.
Inline Editing
11m 31sBuild polished inline editing in Livewire with autosave, subtle feedback, and a smoother user experience.
Toast Notifications
11m 19sBuild reusable toast notifications with Livewire and Alpine—stack, animate, and dismiss alerts smoothly for better user feedback.
Build a Multi-Step Wizard
13m 31sBuild a polished multi-step wizard in Laravel: validate each step, support backtracking, persist state, and add smooth transitions.
Tag Input
15m 58sBuild a polished tag picker with suggestions, keyboard navigation, and custom tag creation to improve your Laravel app's UX.
Infinite Scroll
13m 56sBuild infinite scroll in Livewire 4, then add search and category filters that reset cleanly for a smooth, polished feed.
Notification Center
13m 23sBuild a dynamic notification center with Livewire and Alpine: poll updates, animate new items, sync unread badges, and manage read state.
Dynamic Search
20m 22sBuild a polished Livewire dynamic search dropdown with keyboard navigation, recent searches, and UX details for faster inline search.
Kanban Board
13m 33sBuild a practical Kanban board with Livewire: add drag-and-drop sorting, quick task creation, and cleanup in this hands-on lesson.
