Sheet

New

A slide-in panel (drawer) from the left or right edge of the screen. Entirely CSS-driven using DaisyUI's drawer component with a checkbox toggle pattern — no JavaScript required.

API Reference

The sheet is built on DaisyUI's .drawer component. Opening and closing is controlled by a hidden checkbox; toggling via a <label> triggers the CSS transition. The sheet renders as a fixed overlay and does not affect surrounding page flow.

c-sheet

Attribute	Description	Type	Default
`id`	Links the trigger label to the sheet's internal checkbox. Auto-generated when omitted.	string	`auto`
`side`	Which edge the panel slides in from	string	`"right"`
`size`	Width of the drawer panel	string	`"md"`
`title`	Optional heading rendered at the top of the panel	string	`""`
`open`	When present, the checkbox is pre-checked so the drawer starts open	boolean	`False`

c-sheet.trigger

A convenience <label> styled as a button that targets a sheet by id. Accepts the same color, variant, and size props as c-button.

Attribute	Description	Type	Default
`for`	The id of the target `c-sheet` — must match the sheet's `id`	string	`""`
`color`	Button color theme	string	`""`
`variant`	Button style variant	string	`""`
`size`	Button size	string	`"md"`

side

left right

size

xs sm md lg xl full

Focus trap: unlike c-modal (native <dialog>), the sheet is CSS-only and does not natively trap keyboard focus. For production use requiring full focus management, supplement with a small Alpine.js or vanilla JS focus-trap script.

Keyboard reachability: the close button and overlay label are keyboard-reachable via tab navigation out of the box.

Trigger label: c-sheet.trigger renders as a <label>, not a <button>. Screen readers announce it as a button because of the styling, but test with your target assistive technologies to confirm behaviour.

Examples

Usage


<c-sheet.trigger for="my-sheet" color="primary">Open</c-sheet.trigger>
<c-sheet id="my-sheet" title="Panel Title" side="right">
  Content goes here.
</c-sheet>

Right Sheet (Default)

Open Settings

Settings

Display name

Language

Email notifications

Dark mode

<c-sheet.trigger for="settings-sheet" color="primary">Open Settings</c-sheet.trigger>

<c-sheet id="settings-sheet" title="Settings" side="right">
  <c-input label="Display name" placeholder="Your name" />
  <c-input label="Email" type="email" placeholder="you@example.com" />
  <c-toggle label="Email notifications" />
  <div class="mt-6">
    <c-button color="primary" class="w-full">Save changes</c-button>
  </div>
</c-sheet>

Left Sheet

Open Navigation

Navigation

<c-sheet.trigger for="nav-sheet" color="secondary" variant="outline">Open Navigation</c-sheet.trigger>

<c-sheet id="nav-sheet" title="Navigation" side="left" size="sm">
  <nav class="space-y-1">
    <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-base-200">
      Dashboard
    </a>
    <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-base-200">
      Team
    </a>
  </nav>
</c-sheet>

Size Variants

Small (SM)

Small Panel

This sheet uses size="sm" (w-72 / 18rem).

Medium (MD)

Medium Panel

This sheet uses size="md" (w-80 / 20rem) — the default.

Large (LG)

Large Panel

This sheet uses size="lg" (w-96 / 24rem).

Extra Large (XL)

Extra Large Panel

This sheet uses size="xl" (w-[28rem]).

Full Width

Full Width Panel

This sheet uses size="full" and takes 100% of the viewport width.

<!-- Small panel -->
<c-sheet.trigger for="small-sheet">Small</c-sheet.trigger>
<c-sheet id="small-sheet" title="Small" side="right" size="sm">...</c-sheet>

<!-- Large panel -->
<c-sheet.trigger for="large-sheet" color="primary">Large</c-sheet.trigger>
<c-sheet id="large-sheet" title="Large" side="right" size="lg">...</c-sheet>

<!-- Full width panel -->
<c-sheet.trigger for="full-sheet" color="neutral">Full Width</c-sheet.trigger>
<c-sheet id="full-sheet" title="Full Width" side="right" size="full">...</c-sheet>

Custom Trigger

Filters 3

Filter Results

Status

Active

Inactive

Pending

Priority

High

Medium

Low

<!-- Any label targeting the sheet id acts as a trigger -->
<label for="filter-sheet" class="btn btn-outline btn-info cursor-pointer">
  Filters
</label>

<c-sheet id="filter-sheet" title="Filter Results" side="right" size="sm">
  <c-checkbox label="Active" checked />
  <c-checkbox label="Pending" />
</c-sheet>