Sheet

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetFooter } from "@line/abc-def-react/sheet";

<script setup lang="ts">
import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetFooter } from "@line/abc-def-vue/sheet";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@line/abc-def-react/sheet";
import { Button } from "@line/abc-def-react/button";

export function Example() {
  return (
    <Sheet>
      <SheetTrigger asChild><Button variant="outline">Open sheet</Button></SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Token settings</SheetTitle>
          <SheetDescription>Scoped component overrides.</SheetDescription>
        </SheetHeader>
      </SheetContent>
    </Sheet>
  );
}

<script setup lang="ts">
import { Button } from "@line/abc-def-vue/button";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@line/abc-def-vue/sheet";
</script>

<template>
  <Sheet>
    <SheetTrigger :as-child="true">
      <Button variant="outline">Open sheet</Button>
    </SheetTrigger>
    <SheetContent>
      <SheetHeader>
        <SheetTitle>Token settings</SheetTitle>
        <SheetDescription>Scoped component overrides.</SheetDescription>
      </SheetHeader>
    </SheetContent>
  </Sheet>
</template>

Component tokens

Composition exports

Usage notes

• Use for side panels and supporting workflows.
• Keep focus management aligned with modal behavior.
• Related component tokens use the `sheet` token group in `@line/abc-def-styles/css`.