Skip to content

Side panels

<Sheet.Root side="right" detents={['340px']}>
<Sheet.Trigger>Notifications</Sheet.Trigger>
<Sheet.Content className="sheet">{/* ... */}</Sheet.Content>
</Sheet.Root>

side anchors the sheet to 'bottom' (the default), 'top', 'left', or 'right'. Left and right sheets scroll on the x axis instead of y, so detents are widths, not heights. The handle’s arrow-key axis flips to Left/Right for horizontal sides automatically, and the panel’s border-radius/shadow default rounds the lead edge (the one opposite the anchored side).