Design Atlas
한국어
▣ UI components

Sheet (side panel)

사이드 시트

An edge-anchored panel that can be modal or non-modal — the term recent design systems use is "sheet."

Also known as: Side sheetPanelInspector panel
···
html
<div class="spw">
  <div class="splist">
    <div class="sprow" data-active>주문 #1042</div>
    <div class="sprow">주문 #1041</div>
    <div class="sprow">주문 #1040</div>
  </div>
  <aside class="sppanel" id="sppanel" role="dialog" aria-label="주문 상세" aria-modal="false">
    <h3>주문 #1042</h3>
    <p>정경훈 · 2026-09-26</p>
    <p class="spstatus">배송 중</p>
  </aside>
</div>
css
.spw{position:absolute;inset:0}
.splist{position:absolute;inset:0;padding:12px;display:flex;flex-direction:column;gap:6px}
.sprow{padding:8px 10px;border-radius:7px;background:var(--surface);border:1px solid var(--line);font-size:10px;color:var(--muted)}
.sprow[data-active]{border-color:var(--accent);color:var(--fg);font-weight:700}
.sppanel{position:absolute;top:0;right:0;bottom:0;width:min(150px,55%);background:var(--surface);border-left:1px solid var(--line);box-shadow:-10px 0 24px rgba(0,0,0,.14);padding:14px 12px;transform:translateX(100%);transition:transform .3s ease}
.sppanel[data-open]{transform:translateX(0)}
.sppanel h3{margin:0 0 4px;font-size:12px;color:var(--fg)}
.sppanel p{margin:0 0 4px;font-size:10px;color:var(--muted)}
.spstatus{color:var(--accent) !important;font-weight:700}
js
const rows = [...document.querySelectorAll('.sprow')];
const panel = document.getElementById('sppanel');
const DATA = [
  { id: '#1042', status: '배송 중' },
  { id: '#1041', status: '배송 완료' },
  { id: '#1040', status: '결제 확인' },
];
function paint(i) {
  rows.forEach((r, idx) => r.toggleAttribute('data-active', idx === i));
  panel.querySelector('h3').textContent = '주문 ' + DATA[i].id;
  panel.querySelector('.spstatus').textContent = DATA[i].status;
}
let auto = true, i = 0;
rows.forEach((r, idx) => r.addEventListener('click', () => { auto = false; paint(idx); }));
panel.setAttribute('data-open', '');
paint(0);
setInterval(() => { if (!auto) return; i = (i + 1) % rows.length; paint(i); }, 1300);

Visually it's almost identical to a drawer — a panel sliding in from a screen edge — but "sheet" is the term recent design systems like Material 3 and shadcn/ui use for this pattern. Dialog, drawer, and sheet get used interchangeably, but they emphasize different things. A dialog always centers on screen and is always modal (fully blocking what's behind it), so it reads clearly as "decide now to continue." Drawer and sheet both slide in from an edge, but they're a broader concept that can be built modal (blocking) or non-modal (the page behind stays usable).

The demo below is deliberately non-modal — there's no dimmed scrim, and every row in the list stays clickable, so the panel behaves like an inspector that floats details about whatever's currently selected. A detail panel beside an order list, or a properties panel beside a code editor, are typical non-modal sheets. A sheet holding a form that needs confirmation, on the other hand, should go modal and block the background — in that case its accessibility requirements match a modal or drawer exactly: role="dialog" aria-modal="true", a focus trap, Esc to close.

Mobile's "bottom sheet" (see that entry) is the same conceptual family's variant for the bottom edge — narrow screens don't have room to slide in sideways, so it rises from the bottom instead.