Overlays

Sheet

Generic sheet that docks to any edge (top, right, bottom, left) with a spring slide-in. Drag-to-dismiss handle on bottom-docked sheets.

Sheet is the iOS-style overlay. Docks to any edge (top, right, bottom, left) with a spring slide-in. Bottom-docked sheets render a drag handle and respect a min-height so kids' fingers have a forgiving target.

Same body-portal escape as Modal and Tooltip so backdrop-filter ancestors don't trap it.

Example

tsx

import { Sheet, Button } from '@kidcash/ui';

const [open, setOpen] = useState(false);
<Button onClick={() => setOpen(true)}>Open</Button>
<Sheet open={open} onClose={() => setOpen(false)} side="bottom">
  <h3>Add a chore</h3>
  {/* form */}
</Sheet>

Try it live

← Back to the playground to see Sheet rendered with every variant. Or install @kidcash/ui and copy the example above into your own app.

← Previous

Modal

CommandPalette