Sheet / Drawer

A panel that slides in from any edge of the screen. Use for navigation, forms, and supplementary content. Includes mobile-style bottom drawers with snap points.

Directions

Sheets can slide in from any edge.

html 
<button onclick="openSheet('sheet-right')">Open Right</button>

<div id="sheet-right" class="uc-sheet-right">
  <div class="uc-p-6">
    ...content
  </div>
</div>

Bottom Drawer

A mobile-style bottom drawer sliding up from the bottom edge.

html

Move Goal

Set your daily activity goal.

400 KCAL 
<div class="uc-fixed uc-bottom-0 uc-left-0 uc-right-0 uc-rounded-t-xl uc-border-t uc-shadow-2xl">
  <div class="uc-w-10 uc-h-1 uc-rounded-full uc-bg-neutrals-muted uc-mx-auto uc-mt-2"></div>
  <div class="uc-p-4">
    <h3>Drawer Title</h3>
    <p>Drawer content goes here.</p>
  </div>
</div>

Left Navigation Drawer

A side navigation panel commonly used for app-level navigation.

html
AppName

John Doe

john@example.com

<div class="uc-fixed uc-top-0 uc-left-0 uc-h-full uc-w-64 uc-bg-neutrals-surface uc-border-r">
  <div class="uc-p-4 uc-border-b">
    <div class="uc-flex uc-items-center uc-gap-2">
      <div class="uc-w-8 uc-h-8 uc-rounded-lg uc-bg-accents-blue"></div>
      <span class="uc-text-sm uc-font-bold">AppName</span>
    </div>
  </div>
  <nav class="uc-flex-1 uc-p-3 uc-space-y-0.5">...</nav>
</div>

Snap Points

Bottom drawer at different snap positions: peek, half, and full.

html

Peek

Details

Half

Details

Additional information about this item.

Status Active
Created Jan 15
Priority High

Full

Details

Additional information about this item.

Status Active
Created Jan 15
Priority High

Description

This is a detailed description of the selected item with all relevant context and metadata.

<!-- Peek -->
<div class="uc-fixed uc-bottom-0 uc-left-0 uc-right-0 uc-h-16 uc-rounded-t-xl uc-bg-neutrals-surface uc-border-t">...</div>

<!-- Half -->
<div class="uc-fixed uc-bottom-0 uc-left-0 uc-right-0 uc-h-1/2 uc-rounded-t-xl uc-bg-neutrals-surface uc-border-t">...</div>

<!-- Full -->
<div class="uc-fixed uc-bottom-0 uc-left-0 uc-right-0 uc-h-[calc(100%-1.5rem)] uc-rounded-t-xl uc-bg-neutrals-surface uc-border-t">...</div>

API Reference

All CSS classes available for the Sheet / Drawer component.

Class Type Description
uc-sheet-overlay Base Full-screen backdrop overlay behind the sheet
uc-sheet-right Variant Sheet sliding in from the right edge
uc-sheet-bottom Variant Sheet sliding up from the bottom edge
uc-sheet-left Variant Sheet sliding in from the left edge
uc-open State Toggles the sheet and overlay to visible/open state

Accessibility

Keyboard and screen reader support.

Feature Details
Role Use role="dialog" with aria-modal="true" for modal sheets
Label Sheet must have aria-labelledby pointing to the title
Focus trap Focus is trapped inside the sheet while open
Keyboard Escape closes the sheet, Tab cycles through focusable elements
Close Close button should have aria-label="Close"

Edit Profile

Make changes to your profile.

Share

Share this with others.