Drawer

Imports

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

import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerFooter } from "@line/abc-def-react/drawer";

<script setup lang="ts">
import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerFooter } from "@line/abc-def-vue/drawer";
</script>

Shadcn references

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

Basic usage

import {
  Drawer,
  DrawerContent,
  DrawerDescription,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@line/abc-def-react/drawer";
import { Button } from "@line/abc-def-react/button";

export function Example() {
  return (
    <Drawer>
      <DrawerTrigger asChild><Button variant="outline">Open drawer</Button></DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Token drawer</DrawerTitle>
          <DrawerDescription>Review component groups.</DrawerDescription>
        </DrawerHeader>
      </DrawerContent>
    </Drawer>
  );
}

<script setup lang="ts">
import { Button } from "@line/abc-def-vue/button";
import {
  Drawer,
  DrawerContent,
  DrawerDescription,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@line/abc-def-vue/drawer";
</script>

<template>
  <Drawer>
    <DrawerTrigger :as-child="true">
      <Button variant="outline">Open drawer</Button>
    </DrawerTrigger>
    <DrawerContent>
      <DrawerHeader>
        <DrawerTitle>Token drawer</DrawerTitle>
        <DrawerDescription>Review component groups.</DrawerDescription>
      </DrawerHeader>
    </DrawerContent>
  </Drawer>
</template>

Component tokens

Composition exports

Usage notes

• Use for secondary workflows.
• Ensure mobile content remains scrollable.
• Related component tokens use the `drawer` token group in `@line/abc-def-styles/css`.