Sheet
@sushindustries/uiThe dialog docked to an edge, for content tall enough that centring it would mean scrolling a floating box.
Sheet is a dialog docked to an edge instead of centred - for a list or a filter form tall enough that centring it would mean scrolling a floating box in the middle of the page. It is still fully modal: the page behind it stays unreachable until it closes.
tanstacktanstack add https://adamjurek.com/r/tanstack/sheet.json
shadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/sheet.jsonWhy it is built this way
It is the same native <dialog> element and the same open, onClose and
title props as a centred dialog - only the geometry differs. side writes
data-side on the element, so choosing docked over centred is a prop, not a
second component with its own API to learn.
Install
tanstack add https://adamjurek.com/r/tanstack/sheet.jsonshell
pnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/sheet.jsonshell
pnpm add @sushindustries/ui @sushindustries/atomsshell
What you get
| Version | 0.1.0 |
| Category | layout · Overlays |
| Files | sheet.tsx |
| Dependencies | None |
| Also installs | iconIconThe glyph set, generated from a Markdown table where every drawing carries its reason. One component, typed names, no icon font.@sushindustries/ui · content |
| Tags | modal, drawer, no-deps |
No runtime dependencies
It brings nothing with it beyond the stylesheet.