# @askrjs/themes/sheet

> Published API exports for @askrjs/themes/sheet.

Source: [https://askrjs.com/docs/reference/api/themes/sheet](https://askrjs.com/docs/reference/api/themes/sheet)

Status: stable. Packages: @askrjs/themes/sheet.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 10 exports from the declarations shipped by @askrjs/themes.

### `Sheet`

```ts
Dialog: (props: DialogProps) => JSX.Element
```

Coordinates the Dialog trigger, portal, overlay, and content.

````tsx
```tsx
<Dialog>
  <DialogTrigger>Open dialog</DialogTrigger>
  <DialogPortal>
    <DialogOverlay />
    <DialogContent>Confirm action</DialogContent>
  </DialogPortal>
</Dialog>
```
````

### `SheetClose`

```ts
DialogClose: { (props: DialogCloseProps): JSX.Element; (props: DialogCloseAsChildProps): JSX.Element; }
```

Renders the `dialog-close` part of `dialog`.

Supports polymorphic rendering via `asChild`.

### `SheetContent`

```ts
SheetContent: (props: CatalogComponentProps & { side?: "top" | "right" | "bottom" | "left"; }) => JSX.Element
```

Sheet variant of the dialog content part; defaults to sliding in from the right.

### `SheetDescription`

```ts
SheetDescription: (props: CatalogComponentProps) => JSX.Element
```

Sheet variant of the dialog description part.

### `SheetFooter`

```ts
SheetFooter: (props: CatalogComponentProps) => JSX.Element
```

Renders the `sheet-footer` part of the shadcn-compatible catalog primitives.

### `SheetHeader`

```ts
SheetHeader: (props: CatalogComponentProps) => JSX.Element
```

Renders the `sheet-header` part of the shadcn-compatible catalog primitives.

### `SheetOverlay`

```ts
DialogOverlay: { (props: DialogOverlayProps): JSX.Element | null; (props: DialogOverlayAsChildProps): JSX.Element | null; }
```

Renders the `dialog-overlay` part of `dialog`.

With `@askrjs/themes/default`, the overlay is fully styled out of the box
with the shared backdrop token, blur, stacking, and fade animation. Standard
Dialog and AlertDialog usage requires no additional overlay CSS; customize
the theme tokens instead of applying a competing background class.

Supports polymorphic rendering via `asChild`.

### `SheetPortal`

```ts
DialogPortal: (props: DialogPortalProps) => JSX.Element | null
```

Renders a part of `dialog`.

### `SheetTitle`

```ts
SheetTitle: (props: CatalogComponentProps) => JSX.Element
```

Sheet variant of the dialog title part.

### `SheetTrigger`

```ts
DialogTrigger: { (props: DialogTriggerProps): JSX.Element; (props: DialogTriggerAsChildProps): JSX.Element; }
```

Renders the `dialog-trigger` part of `dialog`.

Supports polymorphic rendering via `asChild`.

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/themes/separator/index.md) | [Next](https://askrjs.com/docs/reference/api/themes/sidebar/index.md)