← All components Feedback & overlays

Sheet

Side-anchored modal (top / right / bottom / left). Built on Dialog; slides in with Vaul-style easing.

Inspired by Apple HIG Sheets (attached to parent window), Vaul (Emil Kowalski), shadcn Sheet pattern.

Preview

What it looks like.

Choose a side, then click Open settings.

Live — the real component, scoped to this frame.

Usage

Drop it into your app.

import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetBody } from '@locara/components'

<Sheet open={settingsOpen} onOpenChange={setSettingsOpen}>
  <SheetContent side="right" size={400}>
    <SheetHeader>
      <SheetTitle>Settings</SheetTitle>
    </SheetHeader>
    <SheetBody>
      <FormField label="Default model">
        <Select value={modelId} onValueChange={setModelId} options={MODELS} />
      </FormField>
      <FormField label="Stream tokens to UI">
        <Switch checked={streaming} onCheckedChange={setStreaming} />
      </FormField>
    </SheetBody>
  </SheetContent>
</Sheet>

Or copy the source into your repo: locara add sheet