---
title: "Sheet"
description: "Ekranın kenarından açılan panel. Listeyi kaybetmeden kayıt detayı, düzenleme ve filtreler için."
---

<Callout type="info" title="Ne zaman kullanılır">
Bir listedeki kaydın detayını veya hızlı düzenlemesini aynı ekranda göstermek, uzun filtre listeleri. Mobilde sürüklenerek kapanan panel için [Drawer](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/drawer), kısa onaylar için [Alert Dialog](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/alert-dialog) kullanın.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/sheet
```

Registry tanımı yoksa önce [Kurulum](https://builders.ikas.com/tr/docs/app-development/ui-kit/installation) adımlarını tamamlayın.

## Örnekler

### Kayıt detayı

Sağdan açılır. SheetBody içerik uzunsa kaydırılır; başlık ve alt bilgi yerinde kalır.

**Örnek: Kayıt detayı** (`sheet/detail`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/sheet/detail)

```tsx
import { ExternalLinkIcon } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import {
  Sheet,
  SheetBody,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"
import { DescriptionList } from "@/components/ikas/description-list"

const lines = [
  { name: "Basic tişört · Siyah · M", qty: 2, price: "₺598,00" },
  { name: "Keten gömlek · Bej · L", qty: 1, price: "₺849,00" },
]

/** Record detail beside a list: the list stays in place, the sheet shows one row. */
export default function SheetDetail() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Siparişi görüntüle</Button>
      </SheetTrigger>
      <SheetContent className="sm:max-w-md">
        <SheetHeader className="border-b">
          <div className="flex items-center gap-2">
            <SheetTitle>#10482</SheetTitle>
            <Badge status="warning" dot>
              Hazırlanıyor
            </Badge>
          </div>
          <SheetDescription>12 Ekim 2026, 14:32 · Online mağaza</SheetDescription>
        </SheetHeader>
        <SheetBody className="flex flex-col gap-5">
          <DescriptionList
            items={[
              { label: "Müşteri", value: "Deniz Yılmaz" },
              { label: "E-posta", value: "deniz@example.com" },
              { label: "Teslimat", value: "Standart kargo" },
            ]}
          />
          <Separator />
          <ul className="flex flex-col gap-3">
            {lines.map((line) => (
              <li key={line.name} className="flex items-baseline justify-between gap-4">
                <span>
                  {line.name} <span className="text-muted-foreground">× {line.qty}</span>
                </span>
                <span className="tabular-nums">{line.price}</span>
              </li>
            ))}
          </ul>
          <div className="flex items-baseline justify-between font-medium">
            <span>Toplam</span>
            <span className="tabular-nums">₺1.447,00</span>
          </div>
        </SheetBody>
        <SheetFooter>
          <SheetClose asChild>
            <Button variant="outline">Kapat</Button>
          </SheetClose>
          <Button>
            Siparişe git
            <ExternalLinkIcon data-icon="inline-end" />
          </Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}
```

### Filtreler

side="left" ile soldan. Uygula ve Sıfırla alt bilgide.

**Örnek: Filtreler** (`sheet/filters`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/sheet/filters)

```tsx
import { SlidersHorizontalIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldGroup, FieldLabel, FieldLegend, FieldSet } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import {
  Sheet,
  SheetBody,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

const statuses = ["Onaylandı", "Hazırlanıyor", "Kargoda", "Teslim edildi"]

export default function SheetFilters() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">
          <SlidersHorizontalIcon data-icon="inline-start" />
          Filtreler
        </Button>
      </SheetTrigger>
      <SheetContent side="left" className="sm:max-w-xs">
        <SheetHeader>
          <SheetTitle>Filtreler</SheetTitle>
          <SheetDescription>Liste filtreler uygulanınca yenilenir.</SheetDescription>
        </SheetHeader>
        <SheetBody>
          <FieldGroup>
            <FieldSet>
              <FieldLegend variant="label">Durum</FieldLegend>
              {statuses.map((status, i) => (
                <Field key={status} orientation="horizontal">
                  <Checkbox id={`status-${i}`} defaultChecked={i < 2} />
                  <FieldLabel htmlFor={`status-${i}`} className="font-normal">
                    {status}
                  </FieldLabel>
                </Field>
              ))}
            </FieldSet>
            <Field>
              <FieldLabel htmlFor="min-total">En az tutar</FieldLabel>
              <Input id="min-total" inputMode="decimal" placeholder="₺0" />
            </Field>
          </FieldGroup>
        </SheetBody>
        <SheetFooter>
          <SheetClose asChild>
            <Button variant="ghost">Sıfırla</Button>
          </SheetClose>
          <SheetClose asChild>
            <Button>Uygula</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- Genişliği içeriğe göre sm:max-w-md gibi bir sınıfla ayarlayın.
- Ana aksiyonu alt bilginin sağına koyun.

**Yapmayın:**

- Sheet içinden başka bir sheet açmayın.
- Kalıcı bir sayfa gibi kullanmayın; adres çubuğunda yeri olmayan geçici işler için.

## API

shadcn/ui ile aynı parçalar: `Sheet`, `SheetTrigger`, `SheetContent`, `SheetHeader`, `SheetTitle`, `SheetDescription`, `SheetFooter`, `SheetClose`. Ek olarak `SheetBody`: başlık ile alt bilgi arasında kaydırılan alan.

### `SheetContent`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `side` | `"top" \| "right" \| "bottom" \| "left"` | `"right"` | Açıldığı kenar. |
| `showCloseButton` | `boolean` | `true` | Sağ üstte kapatma butonu. |