Sheet

任意の端からスライドインするパネルです。スワイプで閉じる操作、スクロールロック、重なる入れ子に対応します。

import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetBody,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

export function SheetDemo() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>
        Edit profile
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>
            Changes are saved to your account when you click save.
          </SheetDescription>
        </SheetHeader>
        <SheetBody>
          <div className="flex flex-col gap-4">
            <div className="flex flex-col gap-1.5">
              <label htmlFor="sheet-demo-name" className="text-sm font-medium">
                Name
              </label>
              <input
                id="sheet-demo-name"
                defaultValue="Olivia Martin"
                className="h-9 rounded-md border border-input bg-transparent px-3 text-sm transition-shadow outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-focus-ring focus-visible:outline-hidden pointer-coarse:text-touch"
              />
            </div>
            <div className="flex flex-col gap-1.5">
              <label
                htmlFor="sheet-demo-username"
                className="text-sm font-medium"
              >
                Username
              </label>
              <input
                id="sheet-demo-username"
                defaultValue="@olivia"
                className="h-9 rounded-md border border-input bg-transparent px-3 text-sm transition-shadow outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-focus-ring focus-visible:outline-hidden pointer-coarse:text-touch"
              />
            </div>
          </div>
        </SheetBody>
        <SheetFooter>
          <SheetClose render={<Button variant="outline" />}>Cancel</SheetClose>
          <SheetClose render={<Button />}>Save changes</SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}

インストール

pnpm dlx shadcn@latest add https://hextaui.com/r/sheet.json

コンポーネント、HextaUIのテーマトークン、依存するHextaUIコンポーネントを追加します。

まだ追加していない場合は、グローバルCSSにテーマトークンを追加してください。

依存関係をインストールします。

pnpm add @base-ui/react @tabler/icons-react class-variance-authority cn

次のコードをコピーしてプロジェクトに貼り付けてください。

components/ui/sheet.tsx

"use client"

import * as React from "react"
import { Drawer as SheetPrimitive } from "@base-ui/react/drawer"
import { IconX } from "@tabler/icons-react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

components/ui/button.tsx

"use client"

import * as React from "react"
import { Button as ButtonPrimitive } from "@base-ui/react/button"
import { IconAlertCircle, IconCircleCheck } from "@tabler/icons-react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

インポートパスは、お使いのプロジェクト構成に合わせて更新してください。

使い方

import {
  Sheet,
  SheetBody,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

<Sheet>
  <SheetTrigger render={<Button variant="outline" />}>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit profile</SheetTitle>
      <SheetDescription>Make changes to your profile.</SheetDescription>
    </SheetHeader>
    <SheetBody>{/* content */}</SheetBody>
    <SheetFooter>
      <SheetClose render={<Button />}>Save changes</SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>

コンポジション

Sheet
├── SheetTrigger
└── SheetContent
    ├── SheetHeader
    │   ├── SheetTitle
    │   └── SheetDescription
    ├── SheetBody
    └── SheetFooter
        └── SheetClose

例

サイド

side を設定すると、任意の端からスライドインします。各 sheet はそれぞれの端に向かってスワイプして戻せ、閉じるジェスチャーは慣性を伴って指に追従します。

import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

const sides = ["top", "right", "bottom", "left"] as const

export function SheetSides() {
  return (
    <div className="grid grid-cols-2 gap-2">
      {sides.map((side) => (
        <Sheet key={side}>
          <SheetTrigger render={<Button variant="outline" />}>
            {side}
          </SheetTrigger>
          <SheetContent side={side}>
            <SheetHeader>
              <SheetTitle>Opens from the {side}</SheetTitle>
              <SheetDescription>
                Swipe towards the {side} edge or press Esc to close it.
              </SheetDescription>
            </SheetHeader>
            <SheetFooter>
              <SheetClose render={<Button />}>Done</SheetClose>
            </SheetFooter>
          </SheetContent>
        </Sheet>
      ))}
    </div>
  )
}

長いコンテンツ

<SheetBody /> は単独でスクロールするため、コンテンツがどれだけ長くなっても、ヘッダーとフッターは固定されたままです。

import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetBody,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

export function SheetLongContent() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>
        Release notes
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>What’s new</SheetTitle>
          <SheetDescription>Version 2.4.0</SheetDescription>
        </SheetHeader>
        <SheetBody>
          <div className="flex flex-col gap-3 text-sm text-muted-foreground">
            {Array.from({ length: 24 }, (_, index) => (
              <p key={index}>
                {index + 1}. Improved performance of the dashboard charts and
                fixed an issue where filters reset after navigation.
              </p>
            ))}
          </div>
        </SheetBody>
        <SheetFooter>
          <SheetClose render={<Button />}>Got it</SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}

閉じるボタンなし

フッターにすでに閉じる手段がある場合は、showCloseButton={false} を設定します。Escape、背景、スワイプでは引き続き閉じられます。

import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

export function SheetNoCloseButton() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>Share</SheetTrigger>
      <SheetContent side="bottom" showCloseButton={false}>
        <SheetHeader>
          <SheetTitle>Share link</SheetTitle>
          <SheetDescription>
            Anyone with the link can view this document.
          </SheetDescription>
        </SheetHeader>
        <SheetFooter>
          <SheetClose render={<Button />}>Done</SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}

入れ子

sheet から開いた sheet や alert dialog は上に重なります。親はわずかに縮小し、重なるごとにより薄い背景が加わるので、スタックは読み取りやすいままです。Escape は最上位のレイヤーだけを閉じます。

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetBody,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

export function SheetNested() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>
        Workspace settings
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Workspace settings</SheetTitle>
          <SheetDescription>
            Manage members and the danger zone.
          </SheetDescription>
        </SheetHeader>
        <SheetBody>
          <div className="flex flex-col items-start gap-2">
            <Sheet>
              <SheetTrigger render={<Button variant="outline" />}>
                Manage members
              </SheetTrigger>
              <SheetContent>
                <SheetHeader>
                  <SheetTitle>Members</SheetTitle>
                  <SheetDescription>
                    The parent sheet steps back while this one is open.
                  </SheetDescription>
                </SheetHeader>
              </SheetContent>
            </Sheet>
            <AlertDialog>
              <AlertDialogTrigger render={<Button variant="destructive" />}>
                Delete workspace
              </AlertDialogTrigger>
              <AlertDialogContent>
                <AlertDialogHeader>
                  <AlertDialogTitle>Delete workspace?</AlertDialogTitle>
                  <AlertDialogDescription>
                    All projects in this workspace will be removed.
                  </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter>
                  <AlertDialogCancel>Cancel</AlertDialogCancel>
                  <AlertDialogAction variant="destructive">
                    Delete
                  </AlertDialogAction>
                </AlertDialogFooter>
              </AlertDialogContent>
            </AlertDialog>
          </div>
        </SheetBody>
      </SheetContent>
    </Sheet>
  )
}

制御

open と onOpenChange を渡すと、トリガーなしでどこからでも開けます。

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetBody,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet"

export function SheetControlled() {
  const [open, setOpen] = React.useState(false)

  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button variant="outline" onClick={() => setOpen(true)}>
        Open from state
      </Button>
      <span className="text-sm text-muted-foreground">
        {open ? "Open" : "Closed"}
      </span>
      <Sheet open={open} onOpenChange={setOpen}>
        <SheetContent>
          <SheetHeader>
            <SheetTitle>Edit profile</SheetTitle>
            <SheetDescription>
              Changes are saved to your account when you click save.
            </SheetDescription>
          </SheetHeader>
          <SheetBody>
            <div className="flex flex-col gap-4">
              <div className="flex flex-col gap-1.5">
                <label
                  htmlFor="sheet-controlled-name"
                  className="text-sm font-medium"
                >
                  Name
                </label>
                <input
                  id="sheet-controlled-name"
                  defaultValue="Olivia Martin"
                  className="h-9 rounded-md border border-input bg-transparent px-3 text-sm transition-shadow outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-focus-ring focus-visible:outline-hidden pointer-coarse:text-touch"
                />
              </div>
              <div className="flex flex-col gap-1.5">
                <label
                  htmlFor="sheet-controlled-username"
                  className="text-sm font-medium"
                >
                  Username
                </label>
                <input
                  id="sheet-controlled-username"
                  defaultValue="@olivia"
                  className="h-9 rounded-md border border-input bg-transparent px-3 text-sm transition-shadow outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-focus-ring focus-visible:outline-hidden pointer-coarse:text-touch"
                />
              </div>
            </div>
          </SheetBody>
          <SheetFooter>
            <SheetClose render={<Button variant="outline" />}>
              Cancel
            </SheetClose>
            <SheetClose render={<Button />}>Save changes</SheetClose>
          </SheetFooter>
        </SheetContent>
      </Sheet>
    </div>
  )
}

分離したトリガー

createSheetHandle で、1つの sheet を複数のトリガーで共有します。各トリガーは payload を渡し、sheet は関数の子要素を通じてそれを描画します。

"use client"

import { Button } from "@/components/ui/button"
import {
  createSheetHandle,
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

const orders = createSheetHandle<{ id: string; status: string }>()

export function SheetDetached() {
  return (
    <div className="flex flex-wrap justify-center gap-2">
      <SheetTrigger
        handle={orders}
        payload={{ id: "#1042", status: "Shipped" }}
        render={<Button variant="outline" size="sm" />}
      >
        Order #1042
      </SheetTrigger>
      <SheetTrigger
        handle={orders}
        payload={{ id: "#1043", status: "Processing" }}
        render={<Button variant="outline" size="sm" />}
      >
        Order #1043
      </SheetTrigger>
      <Sheet handle={orders}>
        {({ payload }) => (
          <SheetContent>
            <SheetHeader>
              <SheetTitle>Order {payload?.id}</SheetTitle>
              <SheetDescription>Status: {payload?.status}</SheetDescription>
            </SheetHeader>
          </SheetContent>
        )}
      </Sheet>
    </div>
  )
}

右から左

dir="rtl" では、右側は左端に反転し、そこからスライドインして、同じ向きにスワイプして閉じます。

import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

export function SheetRtl() {
  return (
    <div dir="rtl">
      <Sheet>
        <SheetTrigger render={<Button variant="outline" />}>افتح</SheetTrigger>
        <SheetContent dir="rtl">
          <SheetHeader>
            <SheetTitle>تعديل الملف الشخصي</SheetTitle>
            <SheetDescription>
              يتم حفظ التغييرات عند النقر على حفظ.
            </SheetDescription>
          </SheetHeader>
          <SheetFooter>
            <SheetClose render={<Button variant="outline" />}>إلغاء</SheetClose>
            <SheetClose render={<Button />}>حفظ</SheetClose>
          </SheetFooter>
        </SheetContent>
      </Sheet>
    </div>
  )
}

キーボード

キー	アクション
`EnterSpace`	トリガー上では sheet を開き、フォーカスを内側に移します。
`TabShift + Tab`	フォーカス可能な要素の間を移動します。フォーカスは sheet の内側に留まります。
`Esc`	最上位の sheet を閉じ、そのトリガーにフォーカスを戻します。

アクセシビリティ

sheet はモーダルダイアログです。<SheetTitle /> がラベルを、<SheetDescription /> が説明を提供するので、必ずタイトルを含めてください。
開いている間、ページのスクロールはロックされ、背後のコンテンツは支援技術から隠されます。
閉じるボタンには「Close」というラベルが付きます。内側の端にあるハンドルは sheet をドラッグできることを示し、支援技術からは隠されます。
視差効果の軽減が有効な場合、sheet はスライドせずにフェードで出入りします。

APIリファレンス

Base UI の drawer をベースにしています。各パーツは、ラップしているプリミティブの props を受け付けます。

Sheet

プロパティ	型	デフォルト
`defaultOpen`	`boolean`	`false`
`open`	`boolean`	`–`
`onOpenChange`	`(open: boolean, details) => void`	`–`
`onOpenChangeComplete`開閉アニメーションの終了後に呼ばれます。	`(open: boolean) => void`	`–`
`modal`	`boolean \| "trap-focus"`	`true`
`disablePointerDismissal`背景がクリックされても開いたままにします。	`boolean`	`false`
`swipeDirection`コンテンツの側と方向から自動で設定されます。	`"up" \| "down" \| "left" \| "right"`	`–`
`handle`	`SheetHandle<Payload>`	`–`
`children`	`ReactNode \| ({ payload }) => ReactNode`	`–`

SheetTrigger

プロパティ	型	デフォルト
`handle`	`SheetHandle<Payload>`	`–`
`payload`	`Payload`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`<button>`

属性	説明
`data-slot="sheet-trigger"`	CSSでトリガーを指定します。
`data-popup-open`	その sheet が開いている間付きます。

SheetContent

ポータル、背景、ビューポート、ポップアップに加え、ドラッグハンドルと閉じるボタンを描画します。

プロパティ	型	デフォルト
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"right"`
`showCloseButton`	`boolean`	`true`
`dir`sheet の方向を設定します。right と left は rtl で反転します。	`"ltr" \| "rtl"`	`–`
`initialFocus`	`boolean \| RefObject \| (type) => HTMLElement \| boolean`	`–`
`finalFocus`	`boolean \| RefObject \| (type) => HTMLElement \| boolean`	`–`
`className`サイド sheet の幅は75%で、sm ブレークポイント以上では最大24remです。	`string \| (state) => string`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

属性	説明
`data-slot="sheet-content"`	sheet のパネル。
`data-side`	開く側。
`data-open`	sheet が開いている間付きます。
`data-starting-style`	表示アニメーションの間存在します。
`data-ending-style`	非表示アニメーションの間存在します。
`data-swiping`	ドラッグされている間、付与されます。
`data-swipe-direction`	閉じる方向。
`data-nested-drawer-open`	ネストされた sheet が上に開いている間付きます。
`data-slot="sheet-handle"`	内側の端にあるドラッグハンドル。
`data-slot="sheet-close-button"`	組み込みの閉じるボタン。
`--drawer-swipe-movement-x`	水平方向のドラッグ距離。-y の変数もあります。
`--nested-drawers`	上に開いているネストされた sheet の数。

SheetOverlay

<SheetContent /> によって描画されます。ネストされたレイヤーにはより薄い背景が付きます。

属性	説明
`data-slot="sheet-overlay"`	バックドロップ。
`data-nested`	ネストされたレイヤーの背景に付きます。

SheetHeader, SheetBody, SheetFooter

sheet をレイアウトするプレーンな <div> 要素。ヘッダーは閉じるボタンの余白を確保し、ボディはスクロールして残りの高さを占め、フッターは小さい画面ではアクションを縦に積み、sm ブレークポイント以上では末尾に並べます。

属性	説明
`data-slot="sheet-header"`	タイトルと説明。
`data-slot="sheet-body"`	スクロール可能なコンテンツ。
`data-slot="sheet-footer"`	アクション。

SheetTitle

プロパティ	型	デフォルト
`render`	`ReactElement \| (props, state) => ReactElement`	`<h2>`

属性	説明
`data-slot="sheet-title"`	sheet にラベルを付けます。

SheetDescription

プロパティ	型	デフォルト
`render`	`ReactElement \| (props, state) => ReactElement`	`<p>`

属性	説明
`data-slot="sheet-description"`	sheet を説明します。

SheetClose

プロパティ	型	デフォルト
`render`	`ReactElement \| (props, state) => ReactElement`	`<button>`

属性	説明
`data-slot="sheet-close"`	押すと sheet を閉じます。

createSheetHandle

createSheetHandle<Payload>() は、別の場所にレンダリングされたトリガーと <Sheet /> をつなぐハンドルを返します。コンポーネントの外で一度だけ作成してください。

使用しているブロック

Sheet の上に構築されるブロック。

Diff Reviewエージェントによる編集を、反映される前にファイルをまたいで確認します。件数つきのファイルツリー、変更ごと、ファイルごと、またはすべてに対する承認と却下、任意の行や範囲に付けてエージェントへ返せるコメント、ユニファイドビューとスプリットビュー、単語単位のハイライト、取り消し、ストリーミングされる編集、チャット向けの「Edited 4 files」サマリーを備えています。