Component Showcase
Every major UI pattern built with Alpine.js + Tailwind CSS. All interactive, all in one file. Works on GitHub Pages out of the box.
Modals
Simple open/close with backdrop click to dismiss.
Basic Modal
Click outside the modal or the close button to dismiss. Alpine handles the transition automatically with x-transition.
Destructive action confirmation dialog.
✓ Item deleted!
Delete this item?
This action cannot be undone.
Modal with reactive form and validation state.
✓ Submitted:
Contact Form
Lightbox-style image or content preview modal.
Slides in from the right like a side panel.
Side Drawer
This is a side drawer panel. It slides in from the right using x-transition with translate classes.
Status alert modals — success, error, warning.
<div x-data="{ open: false }">
<button @click="open = true">Open</button>
<div x-show="open" x-transition @click.self="open = false">...</div>
</div>
Dropdown
Selected:
Action:
Accordion
Tabs
<button @click="tab='a'">Tab A</button>
<div x-show="tab==='a'">...</div>
</div>
x-show to toggle panels and :class for active styling.
x-show.
Carousel
Auto-advances every 4s · Pauses on hover
Notifications
Notifications appear in the top-right corner. They stack and auto-dismiss.
Radio Group
Selected:
Toggle / Switch
Tooltip
Hover over the buttons to see tooltips. Built with CSS data-tip attribute and Alpine x-show.
Form Binding (x-model)
✓ Looks good Required
✓ Valid email Must include @
Transitions & Animations
Reactively runs a side-effect when data changes.
Watch data and react to changes.
Dynamic list with $refs usage.
Global Store (Alpine.store)
Shared state across separate components using Alpine.store.
This component reads from the same store — no props needed.