Sheet

Display content that complements the main content of the screen.

Installation 

uvx shadcn_django@latest add sheet

Usage 

<c-sheet>
    <c-sheet.trigger>
        <c-button variant='outline'>Open</c-button>
    </c-sheet.trigger>
    <c-sheet.content side='right'>
        <c-sheet.header>
        <c-sheet.title>Right Sheet</c-sheet.title>
        <c-sheet.description>
            This sheet appears from the right of the screen.
        </c-sheet.description>
        </c-sheet.header>
    </c-sheet.content>
</c-sheet>

Examples 

<div class='grid grid-cols-2 gap-2'>
    <c-sheet>
        <c-sheet.trigger>
        <c-button variant='outline' class='w-full'>Top</c-button>
        </c-sheet.trigger>
        <c-sheet.content side='top'>
        <c-sheet.header>
            <c-sheet.title>Top Sheet</c-sheet.title>
            <c-sheet.description>
            This sheet appears from the top of the screen.
            </c-sheet.description>
        </c-sheet.header>
        </c-sheet.content>
    </c-sheet>
</div>

Adjust Size 

<c-sheet>
    <c-sheet.trigger>
        <c-button variant='outline' class='w-full'>Right</c-button>
    </c-sheet.trigger>
    <c-sheet.content side='right' class='w-[700px] sm:w-[540px]'>
        <c-sheet.header>
            <c-sheet.title>Right Sheet</c-sheet.title>
            <c-sheet.description>
            This sheet appears from the right of the screen.
            </c-sheet.description>
        </c-sheet.header>
    </c-sheet.content>
</c-sheet>