Sheet — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Reka UI.

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download sheet -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { Sheet } from "@/components/ui/sheet";
import { SheetTrigger } from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import { SheetContent } from "@/components/ui/sheet";
import { SheetHeader } from "@/components/ui/sheet";
import { SheetTitle } from "@/components/ui/sheet";
import { SheetDescription } from "@/components/ui/sheet";
import { SheetFooter } from "@/components/ui/sheet";
import { SheetClose } from "@/components/ui/sheet";
import { reactive } from "vue";
import * as UI from "@/components/ui/sheet";

const Component = UI.Sheet;

const args = reactive(
  {
    "open": false,
    "side": "right",
    "title": "Edit profile",
  } satisfies Partial<
    InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
  > &
    Record<string, unknown> & { side?: "top" | "right" | "bottom" | "left" },
);
</script>

<template>
  <Sheet v-model:open="args.open"
    ><SheetTrigger as-child><Button>Open sheet</Button></SheetTrigger
    ><SheetContent :side="args.side"
      ><SheetHeader
        ><SheetTitle>{{ args.title }}</SheetTitle
        ><SheetDescription>Review your settings.</SheetDescription></SheetHeader
      ><SheetFooter><SheetClose>Close</SheetClose></SheetFooter></SheetContent
    ></Sheet
  >
</template>

No component-specific props are declared in registry metadata; inherited HTML/Radix/Reka props are supported by the component implementation.

Subcomponents

SheetTrigger
SheetClose
SheetPortal
SheetOverlay
SheetContent
SheetHeader
SheetFooter
SheetTitle
SheetDescription

No component-specific props are declared in registry metadata; inherited HTML/Radix/Reka props are supported by the component implementation.

Subcomponents

SheetContent
SheetFooter
SheetHeader

Examples

Default

<script setup lang="ts">
import { Sheet } from "@/components/ui/sheet";
import { SheetTrigger } from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import { SheetContent } from "@/components/ui/sheet";
import { SheetHeader } from "@/components/ui/sheet";
import { SheetTitle } from "@/components/ui/sheet";
import { SheetDescription } from "@/components/ui/sheet";
import { SheetFooter } from "@/components/ui/sheet";
import { SheetClose } from "@/components/ui/sheet";
import * as UI from "@/components/ui/sheet";

const Component = UI.Sheet;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Sheet
    ><SheetTrigger as-child
      ><Button variant="outline">Open</Button></SheetTrigger
    ><SheetContent
      ><SheetHeader
        ><SheetTitle>Edit profile</SheetTitle
        ><SheetDescription
          >Make changes to your profile here. Click save when you're
          done.</SheetDescription
        ></SheetHeader
      ><SheetFooter
        ><SheetClose as-child
          ><Button type="submit">Save changes</Button></SheetClose
        ></SheetFooter
      ></SheetContent
    ></Sheet
  >
</template>

Sides

<script setup lang="ts">
import { Sheet } from "@/components/ui/sheet";
import { SheetTrigger } from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import { SheetContent } from "@/components/ui/sheet";
import { SheetHeader } from "@/components/ui/sheet";
import { SheetTitle } from "@/components/ui/sheet";
import { SheetDescription } from "@/components/ui/sheet";
import { SheetFooter } from "@/components/ui/sheet";
import { SheetClose } from "@/components/ui/sheet";
import * as UI from "@/components/ui/sheet";

const Component = UI.Sheet;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div class="grid grid-cols-2 gap-2">
    <Sheet v-for="side in ['top', 'right', 'bottom', 'left']" :key="side"
      ><SheetTrigger as-child
        ><Button variant="outline">{{ side }}</Button></SheetTrigger
      ><SheetContent :side="side"
        ><SheetHeader
          ><SheetTitle>Edit profile</SheetTitle
          ><SheetDescription
            >Make changes to your profile here. Click save when you're
            done.</SheetDescription
          ></SheetHeader
        ><SheetFooter
          ><SheetClose as-child
            ><Button type="submit">Save changes</Button></SheetClose
          ></SheetFooter
        ></SheetContent
      ></Sheet
    >
  </div>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

SheetContent

Prop	Type	Default
`class`	`HTMLAttributes["class"]`	`—`
`closeLabel`	`string`	`—`
`showCloseButton`	`boolean`	`—`
`side`	`SheetVariants["side"]`	`—`

SheetDescription

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

SheetFooter

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

SheetHeader

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

SheetTitle

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.