Skip to content
aq-ui
Back to ComponentsComponent

Sheet

Open-code aq-ui accessible component family for Sheet.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

Loading interactive preview…

Installation

pnpm dlx aq-ui@alpha add sheet

API reference

Client module

Import the parts you need, then jump to an export for its contract.

View full source

Quick start

"use client"

import { Sheet } from "@/components/ui/sheet"

<Sheet />

Sheet

functionSource L10

Open-code aq-ui accessible component family for Sheet.

function Sheet({ ...props }: SheetPrimitive.Root.Props)
Props type
SheetPrimitive.Root.Props
<Sheet />

SheetClose

constSource L24

Close export for composing Sheet.

const SheetClose = React.forwardRef<React.ComponentRef<typeof SheetPrimitive.Close>, SheetPrimitive.Close.Props>(…)
Props type
SheetPrimitive.Close.Props
<SheetClose />

SheetContent

constSource L54

Content export for composing Sheet.

const SheetContent = React.forwardRef<React.ComponentRef<typeof SheetPrimitive.Popup>, SheetPrimitive.Popup.Props & { side?: "top" | "right" | "bottom" | "left" showCloseButton?: boolean }>(…)
Props type
SheetPrimitive.Popup.Props & { side?: "top" | "right" | "bottom" | "left" showCloseButton?: boolean }

Props

NameTypeDefault
side?"top" | "right" | "bottom" | "left""right"
showCloseButton?booleantrue
<SheetContent />

SheetDescription

constSource L147

Description export for composing Sheet.

const SheetDescription = React.forwardRef<React.ComponentRef<typeof SheetPrimitive.Description>, SheetPrimitive.Description.Props>(…)
Props type
SheetPrimitive.Description.Props
<SheetDescription />

SheetHeader

constSource L99

Header export for composing Sheet.

const SheetHeader = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div">>(…)
Props type
React.ComponentProps<"div">
<SheetHeader />

SheetTitle

constSource L129

Title export for composing Sheet.

const SheetTitle = React.forwardRef<React.ComponentRef<typeof SheetPrimitive.Title>, SheetPrimitive.Title.Props>(…)
Props type
SheetPrimitive.Title.Props
<SheetTitle />

SheetTrigger

constSource L14

Trigger export for composing Sheet.

const SheetTrigger = React.forwardRef<HTMLButtonElement, SheetPrimitive.Trigger.Props>(…)
Props type
SheetPrimitive.Trigger.Props
<SheetTrigger />

Registry dependencies

button, utils

Package dependencies

@base-ui/react@^1.7.0, lucide-react@^1.31.0

Files

  • components/ui/sheet.tsx

Source