Components

Sheet

A panel that slides in from the edge of the screen.

example.tsx

Import

tsx

import {
  AppSheet,
  AppSheetTrigger,
  AppSheetContent,
  AppSheetHeader,
  AppSheetTitle,
  AppSheetDescription,
} from "@/components/primitives/AppSheet"

API Reference

AppSheet extends all native <div> HTML attributes.

Prop	Type	Default	Description
className	string	—	Additional Tailwind classes merged via cn(). Prefer the wrapper pattern for reusable overrides.

Source

src/components/primitives/AppSheet.tsx

"use client"

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "../ui/sheet"

function AppSheet(props: React.ComponentProps<typeof Sheet>) {
  return <Sheet {...props} />
}

function AppSheetTrigger(props: React.ComponentProps<typeof SheetTrigger>) {
  return <SheetTrigger {...props} />
}

function AppSheetContent(props: React.ComponentPropsWithoutRef<typeof SheetContent>) {
  return <SheetContent {...props} />
}

function AppSheetHeader(props: React.HTMLAttributes<HTMLDivElement>) {
  return <SheetHeader {...props} />
}

function AppSheetTitle(props: React.ComponentPropsWithoutRef<typeof SheetTitle>) {
  return <SheetTitle {...props} />
}

function AppSheetDescription(props: React.ComponentPropsWithoutRef<typeof SheetDescription>) {
  return <SheetDescription {...props} />
}

export { AppSheet, AppSheetTrigger, AppSheetContent, AppSheetHeader, AppSheetTitle, AppSheetDescription }