Overlays

Sheet

Modal panel that slides in from the left, right or bottom edge, with a pinned footer. Fills the width on phones.

Radix Dialog

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/SheetExample.tsx
import { Button, Sheet, TextInput } from '@krackedui/motion';

export function FiltersSheet() {
  return (
    <Sheet.Root>
      <Sheet.Trigger asChild>
        <Button variant="secondary" icon="filter">Filters</Button>
      </Sheet.Trigger>
      <Sheet.Content side="right" size="sm">
        <Sheet.Title>Filters</Sheet.Title>
        <Sheet.Description>Show only the tasks you need.</Sheet.Description>
        <TextInput aria-label="Assignee" placeholder="Assignee" className="mt-3" />
        <TextInput aria-label="Tag" placeholder="Tag" />
        <Sheet.Footer>
          <Sheet.Close asChild><Button variant="secondary">Reset</Button></Sheet.Close>
          <Sheet.Close asChild><Button variant="primary">Apply</Button></Sheet.Close>
        </Sheet.Footer>
      </Sheet.Content>
    </Sheet.Root>
  );
}

Examples

Filters panel

Sides

Composition

anatomy.tsx
<Sheet.Root>
  <Sheet.Trigger asChild>…</Sheet.Trigger>
  <Sheet.Content side="right" size="md">
    <Sheet.Title />
    <Sheet.Description />
    …body (scrolls)…
    <Sheet.Footer>
      <Sheet.Close asChild>…</Sheet.Close>
    </Sheet.Footer>
  </Sheet.Content>
</Sheet.Root>
  • Content includes the overlay, the portal and a close button in the top-right corner (showClose={false} to hide it).

API Reference

Sheet.Root

Holds the open state.

PropTypeDefault
open
boolean
defaultOpen
boolean
false
onOpenChange
(open: boolean) => void
modal
boolean
true

Sheet.Trigger

Opens the sheet.

PropTypeDefault
asChild
boolean
false

Sheet.Content

The panel, with overlay, portal and close button. Body padding 20, flex column with 8px gaps, scrolls.

PropTypeDefault
side
"right""left""bottom"
"right"
size
"sm""md""lg"
"md"
showClose
boolean
true
closeLabel
string
"Close"
onOpenAutoFocus
(event: Event) => void
onEscapeKeyDown
(event: KeyboardEvent) => void

Sheet.Title / Description / Footer

Accessible name, description, and the action row pinned to the bottom.

PropTypeDefault
className
string

Sheet.Close

Closes the sheet.

PropTypeDefault
asChild
boolean
false

Accessibility

  • Follows the WAI-ARIA modal dialog pattern: role="dialog", aria-modal, named by Sheet.Title, described by Sheet.Description.
  • Focus moves in on open and is trapped; Escape, the close button (labelled "Close") or an overlay click closes it, and focus returns to the trigger.
  • The close button grows to 36px on touch screens.
  • Slides in from its edge and out again on close; with reduced motion it fades instead.

Usage

  • Use for filters, details of a selected item, settings and navigation on phones.
  • Use side="bottom" for short, touch-first choices on phones.
  • Use Dialog for short centered tasks, Popover for small inline edits.
  • Keep the main actions in Sheet.Footer so they stay visible while the body scrolls.
© 2026 Motion. Internal documentation.