django/shadcn-ui

Sheet

Display content that complements the main content of the screen.

Installation

uvx django_shadcn@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>