Enjoy the DOM.Write Alpine JS.
Alpine JS allows you to write DOM manipulation all in your HTML, Liquid, Blade etc. Here's a collection of snippets that you can copy and paste into your project.
- Accessible
Accordion (Accessible with Open All)
Create an accordion with Alpine JS keeping accessibility in mind.
- Accessible
Accordion (Accessible)
Create an accordion with Alpine JS keeping accessibility in mind.
- Basic
Accordion Singular
Create an accordion with Alpine JS and the x-collapse plugin to provide a smooth transition. Allows for one accordion to be open at one time.
- Basic
Accordion
Create an accordion with Alpine JS and the x-collapse plugin to provide a smooth transition.
- Basic
Alert Close Auto with Life
Alert that is automatically dismissed after 5 seconds with a bar that shows how long is left.
- Basic
Alert Close Auto
Alert that is automatically dismissed after 5 seconds.
- Basic
Alert Close
Alert that can be dismissed with a close button.
- Basic
Datepicker Clear
Datepicker input using Flatpickr with a button that clears the selected date.
- Basic
Datepicker
Datepicker input using Flatpickr.
- Basic
Dropdown on Hover
Dropdown menu that is displayed when the link/button is on hover.
- Basic
Dropdown
Dropdown menu that is displayed when the link/button is clicked.
- Basic
Format Currency
Format number into currency with alpinejs-money plugin. Also works with Shopify config.
- Basic
Input Card Expiry Date
Mask the value of the input to be formatted like a card expiry date with the x-mask Alpine JS plugin.
- Basic
Input Card Number Dynamic
Mask the value of the input to be formatted like a card number with the x-mask Alpine JS plugin. Masking based on card type.
- Basic
Input Card Number
Mask the value of the input to be formatted like a card number with the x-mask Alpine JS plugin.
- Basic
Input Lowercase
Force an input value to be lowercase.
- Basic
Input Positive Number
Force an input number value to never be less than zero.
- Basic
Input Quantity
Increase and decrease the value of an input with a plus and minus button. Perfect for ecommerce websites.
- Basic
Input Slug
Transform an input value into a hyphenated string with alpinejs-slug plugin.
- Basic
Input Uppercase
Force an input value to be uppercase.
- Basic
Laravel Pass Alpine JS Data
Pass Alpine JS data to Laravel Blade components.
- Basic
Modal
Animate a modal when a link/button is clicked. Can be dismissed when clicking away.
- Basic
Multistep Form
Multistep form that allows the user to go back to previous steps.
- Basic
Slide Out
Animate an off canvas element when a link/button is clicked. Can be dismissed when clicking away.
Tabs with URL
Show and hide tab content. On load match the tab content ID to the URL hash and display.
- Basic
Tabs
Show and hide tab content.
- Basic
Textarea Autogrow (Plugin)
Autogrow the textarea based on the input value. With an Alpine JS plugin.
- Basic
Textarea Autogrow
Autogrow the textarea based on the input value.
- Basic
Update Class When Sticky
Add classes to elements whan a target element is sticky in the DOM with alpinejs-sticky plugin.