Slide-Over Panel Component built using Livewire, Alpine.js and TailwindCSS

Tech Stack: tailwindcss, new, alpine-js, livewire


Default Panel

Purchase LivewireDemos Pro


Sorry, this component's code is restricted
Get Livewiredemos-Pro
Sorry, this component's code is restricted
Get Livewiredemos-Pro


    <button x-data
        class="tw-inline-flex tw-items-center tw-px-4 tw-py-2 tw-font-semibold tw-leading-6 tw-text-sm tw-shadow tw-rounded-md tw-text-white tw-bg-indigo-500 hover:tw-bg-indigo-400 tw-transition tw-ease-in-out tw-duration-150"
            'Realtime Validation Example',
        Open Panel


This Slide Over Panel Component is currently configured to receive a Livewire Component . So whenever we emit an event, we pass in a Livewire Component as a parameter, which gets rendered inside the Panel Component.

We can customize this behavior as per our needs, so instead of passing a component, we can make use of blade components with a combination of slots

So, the general idea here is to extract the component's view code to a component and replace the code where the component is rendered with a {{ $slot }} (the component that is received as a parameter and rendered inside an if block)

Let's say we have a blade component called <slide-panel /> By using this blade component, we can pass in dynamic content to this component and render it accordingly:

    // content to be rendered inside the slide panel can be passed here

As an example:

    // This content passed here will be passed as a slot, and rendered in place of the {{ $slot }} variable