Sheet

Displays a callout for user attention.

Quick note on browser compatibility.

This component makes use of two modern CSS features:

Unfortunately both are not (yet) supported in Firefox. The component will still work as expected but it will be missing the enter & exit animations.

<x-sheet>
    <x-sheet.trigger>
        <x-button variant="outline">
            Open
        </x-button>
    </x-sheet.trigger>
    <x-sheet.content>
        <x-sheet.header>
            <x-sheet.title>Edit profile</x-sheet.title>
            <x-sheet.description>
                Make changes to your profile here. Click save when you're done.
            </x-sheet.description>
        </x-sheet.header>
        <x-sheet.main>
            <div class="grid gap-4 py-4">
                <div class="grid grid-cols-4 items-center gap-4">
                    <x-label
                        htmlFor="name"
                        class="text-right"
                    >
                        Name
                    </x-label>
                    <x-input
                        id="name"
                        value="pedro duarte"
                        class="col-span-3"
                    />
                </div>
                <div class="grid grid-cols-4 items-center gap-4">
                    <x-label
                        htmlFor="username"
                        class="text-right"
                    >
                        Username
                    </x-label>
                    <x-input
                        id="username"
                        value="@peduarte"
                        class="col-span-3"
                    />
                </div>
            </div>
        </x-sheet.main>
        <x-sheet.footer>
            <x-sheet.close type="submit">
                Save changes
            </x-sheet.close>
        </x-sheet.footer>
    </x-sheet.content>
</x-sheet>

Installation

php artisan vendor:publish --tag=sheet --force

Usage

<x-sheet>
    <x-sheet.trigger>open</x-sheet.trigger>
    <x-sheet.content>
        <x-sheet.header>
            <x-sheet.title>are you absolutely sure?</x-sheet.title>
            <x-sheet.description>
                this action cannot be undone. this will permanently delete your account
                and remove your data from our servers.
            </x-sheet.description>
        </x-sheet.header>
    </x-sheet.content>
</x-sheet>

Examples

Side

@php
    $sides = ['top', 'right', 'bottom', 'left'];
@endphp
 
<div class="grid grid-cols-2 gap-2">
    @foreach ($sides as $side)
        <x-sheet>
            <x-sheet.trigger>
                <x-button
                    variant="outline"
                    class="w-full"
                >
                    {{ $side }}
                </x-button>
            </x-sheet.trigger>
            <x-sheet.content side="{{ $side }}">
                <x-sheet.header>
                    <x-sheet.title>Edit profile</x-sheet.title>
                    <x-sheet.description>
                        Make changes to your profile here. Click save when you're done.
                    </x-sheet.description>
                </x-sheet.header>
                <x-sheet.main>
                    <div class="grid gap-4 py-4">
                        <div class="grid grid-cols-4 items-center gap-4">
                            <x-label
                                htmlFor="name"
                                class="text-right"
                            >
                                Name
                            </x-label>
                            <x-input
                                id="name"
                                value="pedro duarte"
                                class="col-span-3"
                            />
                        </div>
                        <div class="grid grid-cols-4 items-center gap-4">
                            <x-label
                                htmlFor="username"
                                class="text-right"
                            >
                                Username
                            </x-label>
                            <x-input
                                id="username"
                                value="@peduarte"
                                class="col-span-3"
                            />
                        </div>
                    </div>
                </x-sheet.main>
                <x-sheet.footer>
                    <x-sheet.close type="submit">
                        Save changes
                    </x-sheet.close>
                </x-sheet.footer>
            </x-sheet.content>
        </x-sheet>
    @endforeach
</div>

Size

<x-sheet>
    <x-sheet.trigger>
        <x-button variant="outline">Open</x-button>
    </x-sheet.trigger>
    <x-sheet.content class="w-[400px] sm:w-[540px]"> 
        <x-sheet.header>
            <x-sheet.title>are you absolutely sure?</x-sheet.title>
            <x-sheet.description>
                this action cannot be undone. this will permanently delete your account
                and remove your data from our servers.
            </x-sheet.description>
        </x-sheet.header>
    </x-sheet.content>
</x-sheet>

Overflow Content

<x-sheet>
    <x-sheet.trigger>
        <x-button variant="outline">
            Open
        </x-button>
    </x-sheet.trigger>
    <x-sheet.content>
        <x-sheet.header>
            <x-sheet.title>Edit profile</x-sheet.title>
            <x-sheet.description>
                Make changes to your profile here. Click save when you're done.
            </x-sheet.description>
        </x-sheet.header>
        <x-sheet.main class="overflow-y-auto"> 
            <div class="grid gap-4 py-4">
                <div class="grid grid-cols-4 items-center gap-4">
                    <x-label
                        htmlFor="name"
                        class="text-right"
                    >
                        Name
                    </x-label>
                    <x-input
                        id="name"
                        value="pedro duarte"
                        class="col-span-3"
                    />
                </div>
                <div class="grid grid-cols-4 items-center gap-4">
                    <x-label
                        htmlFor="username"
                        class="text-right"
                    >
                        Username
                    </x-label>
                    <x-input
                        id="username"
                        value="@peduarte"
                        class="col-span-3"
                    />
                </div>
            </div>
            <div class="space-y-4">
                <p>
                    lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                    culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <p>
                    lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                    culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <p>
                    lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                    culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <p>
                    lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                    culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <p>
                    lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                    culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>
        </x-sheet.main>
        <x-sheet.footer>
            <x-sheet.close type="submit">
                Save changes
            </x-sheet.close>
        </x-sheet.footer>
    </x-sheet.content>
</x-sheet>

Stacked Sheets

<x-sheet>
    <x-sheet.trigger>
        <x-button variant="outline">Open</x-button>
    </x-sheet.trigger>
    <x-sheet.content class="has-[[open]]:-translate-x-6 has-[[open]]:scale-[.97]">
        <x-sheet.header>
            <x-sheet.title>are you absolutely sure?</x-sheet.title>
            <x-sheet.description>
                this action cannot be undone. this will permanently delete your account
                and remove your data from our servers.
            </x-sheet.description>
        </x-sheet.header>
 
        <x-sheet>
            <x-sheet.trigger>
                <x-button variant="outline">Open second</x-button>
            </x-sheet.trigger>
            <x-sheet.content class="backdrop:bg-transparent shadow-2xl">
                <x-sheet.header>
                    <x-sheet.title>are you absolutely sure?</x-sheet.title>
                    <x-sheet.description>
                        this action cannot be undone. this will permanently delete your account
                        and remove your data from our servers.
                    </x-sheet.description>
                </x-sheet.header>
            </x-sheet.content>
        </x-sheet>
    </x-sheet.content>
</x-sheet>

On This Page

Installation
Usage
Examples