PHPackages lukeraymonddowning/alpinimations - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. lukeraymonddowning/alpinimations AbandonedArchivedLibrary[Templating & Views](/categories/templating) lukeraymonddowning/alpinimations ================================ Streamline your animations by using these simple blade includes in your components! v1.5.0(3y ago)10220.2k↓50%3MITBladePHP ^7.4|^8.0 Since Jun 27Pushed 3y ago6 watchersCompare [ Source](https://github.com/lukeraymonddowning/alpinimations)[ Packagist](https://packagist.org/packages/lukeraymonddowning/alpinimations)[ Docs](https://github.com/lukeraymonddowning/alpinimations)[ GitHub Sponsors](https://github.com/lukeraymonddowning)[ RSS](/packages/lukeraymonddowning-alpinimations/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (7)Dependencies (3)Versions (10)Used By (0) Alpinimations ============= [](#alpinimations) Clean up your Alpine JS animations. Table of Contents ================= [](#table-of-contents) - [About Alpinimations](#about-alpinimations) - [Installation](#installation) - [Usage](#usage) - [Available animations](#available-animations) - [Tailwind UI](#tailwind-ui) - [Dropdowns](#dropdowns) - [Menus](#menus) - [Modals](#modals) - [Notifications](#notifications) - [Slideovers](#slideovers) - [Contributing](#contributing) - [Code of conduct](#code-of-conduct) - [License](#license) About Alpinimations ------------------- [](#about-alpinimations) Alpinimations helps you clean up your Laravel blade files when using Alpine JS. Alpine has a super powerful animation system, but it can often bloat your HTML. This package bundles common animations into small blade files that you can include in your HTML. We currently support all Tailwind UI animations and will be adding animations from more places over time. Installation ------------ [](#installation) To install the package, simply run `composer require lukeraymonddowning/alpinimations` in the terminal from the root of your Laravel project. If you'd like to edit the animation files, you can publish the views by running `php artisan vendor:publish --tag=alpinimations`. Usage ----- [](#usage) Using Alpinimations couldn't be simpler. Let's take a super awesome Tailwind UI component, the slideover. After copying over the HTML from the Tailwind UI component library, you'll have something like this: ``` Panel title ``` Note that Tailwind UI includes the animations we should apply. These animations are included out of the box with Alpinimations. Let's sweeten up our component with Alpine: ``` Panel title ``` Note how we can use the `@anim` blade directive to include all the necessary alpine animation directives. A list of all Tailwind UI animations available can be found below. We can go even further here. As most animations are coupled with `x-show`, Alpinimations includes an `@xshow` blade directive. Check it out: ``` Panel title ``` Suuuuuper clean. Available animations -------------------- [](#available-animations) ### Tailwind UI [](#tailwind-ui) #### Dropdowns [](#dropdowns) - `tailwindui.dropdown.panel` - Can apply to all dropdown components. [Tailwind UI docs](https://tailwindui.com/components/application-ui/elements/dropdowns) #### Menus [](#menus) - `tailwindui.menu.card` - Can apply to mobile menus such as seen in Tailwind UI hero mobile menus. [Tailwind UI docs](https://tailwindui.com/components/marketing/sections/heroes) - `tailwindui.menu.flyout` - Works with all flyout menus. [Tailwind UI docs](https://tailwindui.com/components/marketing/elements/flyout-menus) - `tailwindui.menu.off-canvas` - For those swanky mobile sidebar menus. [Tailwind UI docs](https://tailwindui.com/components/application-ui/application-shells/sidebar) - `tailwindui.menu.overlay` - For any overlay backgrounds needed when menus are displayed, especially in mobile. [Tailwind UI docs](https://tailwindui.com/components/application-ui/application-shells/sidebar#component-ba754bf465a594eb075045eb9e940b60) #### Modals [](#modals) - `tailwindui.modal.overlay` - The overlay that shows behind a modal when it is displayed. [Tailwind UI docs](https://tailwindui.com/components/application-ui/overlays/modals) - `tailwindui.modal.panel` - The actual panel/card that shows the modal content. [Tailwind UI docs](https://tailwindui.com/components/application-ui/overlays/modals) #### Notifications [](#notifications) - `tailwindui.notification.panel` - The container for the notification. [Tailwind UI docs](https://tailwindui.com/components/application-ui/overlays/notifications) #### Select Boxes [](#select-boxes) - `tailwindui.select.popover` - The option menu popover. [Tailwind UI docs](https://tailwindui.com/components/application-ui/forms/select-menus) #### Slideovers [](#slideovers) - `tailwindui.slideover.close-button` - The close button for a slideover. This could apply to any close button. [Tailwind UI docs](https://tailwindui.com/components/application-ui/overlays/slide-overs) - `tailwindui.slideover.overlay` - The background overlay that applies to certain slideovers. [Tailwind UI docs](https://tailwindui.com/components/application-ui/overlays/slide-overs#component-3e8348c3c183bd14fceb018d4cca1942) - `tailwindui.slideover.panel` - The actual slideover panel/card that will contain your content. [Tailwind UI docs](https://tailwindui.com/components/application-ui/overlays/slide-overs) Contributing ------------ [](#contributing) Thank you for considering contributing to the Laravel framework! The contribution guide can be found in the [Laravel documentation](https://laravel.com/docs/contributions). Code of Conduct --------------- [](#code-of-conduct) In order to ensure that the Laravel community is welcoming to all, please review and abide by the [Code of Conduct](https://laravel.com/docs/contributions#code-of-conduct). License ------- [](#license) The Laravel framework is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT). ### Health Score 38 — LowBetter than 85% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity37 Limited adoption so far Community13 Small or concentrated contributor base Maturity66 Established project with proven stability Bus Factor1 Top contributor holds 95.8% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~135 days Recently: every ~197 days Total 8 Last Release 1201d ago PHP version history (3 changes)1.0.0PHP ^7.1 1.2.0PHP ^7.3 1.3.0PHP ^7.4|^8.0 ### Community Maintainers ![](https://www.gravatar.com/avatar/139db346fa173a79481af05b0455e2e8ad7d2ab594c7f53bde3522a3dfeeaf25?d=identicon)[96downlu](/maintainers/96downlu) --- Top Contributors [![lukeraymonddowning](https://avatars.githubusercontent.com/u/12202279?v=4)](https://github.com/lukeraymonddowning "lukeraymonddowning (23 commits)")[![Enaah](https://avatars.githubusercontent.com/u/10073766?v=4)](https://github.com/Enaah "Enaah (1 commits)") --- Tags lukeraymonddowningalpinimations ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/lukeraymonddowning-alpinimations/health.svg) ``` [![Health](https://phpackages.com/badges/lukeraymonddowning-alpinimations/health.svg)](https://phpackages.com/packages/lukeraymonddowning-alpinimations) ``` ### Alternatives [craftcms/cms Craft CMS 3.6k3.6M2.6k](/packages/craftcms-cms)[robsontenorio/mary Gorgeous UI components for Livewire powered by daisyUI and Tailwind 1.5k454.7k15](/packages/robsontenorio-mary)[livewire/blaze A tool for optimizing Blade component performance by folding them into parent templates 688221.3k17](/packages/livewire-blaze)[pressbooks/pressbooks Pressbooks is an open source book publishing tool built on a WordPress multisite platform. Pressbooks outputs books in multiple formats, including PDF, EPUB, web, and a variety of XML flavours, using a theming/templating system, driven by CSS. 44643.1k1](/packages/pressbooks-pressbooks)[rareloop/lumberjack-core A powerful MVC framework for the modern WordPress developer. Write better, more expressive and easier to maintain code 42155.0k19](/packages/rareloop-lumberjack-core)[konekt/html HTML and Form Builders for the Laravel Framework 24403.2k5](/packages/konekt-html) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)