Primitiveoverlay

Sheet

Stable

Dialog ancorado a uma borda da viewport, com header e footer fixos e um corpo que rola. Composto sobre Base UI Dialog e sobre o Button do Up Web DS. A borda é o argumento para usá-lo: ele segura trabalho secundário — filtros, detalhes, navegação — sem fingir que a página embaixo sumiu. Quando o conteúdo é uma decisão em vez de um lugar, o Dialog centralizado diz isso melhor.

Instalação

npx up-web-ds add sheet

Gera close para a biblioteca de ícones do projeto (components.json → iconLibrary).

Preview

Basic

Default

Variants

Without Overlay

Sides

With Scrolling Body

Without Close Button

All states

Basic

Default

Variants

Without Overlay

Sides

With Scrolling Body

Without Close Button

Usage

Imports de Sheet

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/components/ui/sheet'
import { Button } from '@/components/ui/button'

Sheet

1
2
3
4
5
6
7
8
9
10
11
12
13
14<Sheet>
  <SheetTrigger render={<Button variant="outline" />}>
    Abrir filtros
  </SheetTrigger>

  <SheetContent>
    <SheetHeader>
      <SheetTitle>Filtros do catálogo</SheetTitle>
      <SheetDescription>
        Combinações inválidas de type e category são recusadas.
      </SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

Props

Sheet

Props de Sheet
Prop	Type	Default	Description
actionsRef	`React.RefObject<DialogRootActions \| null>`	sem valor padrão	A ref to imperative actions. - `unmount`: Manually unmounts the dialog. Call this after any externally controlled closing animation finishes. - `close`: Closes the dialog imperatively when called.
children	`React.ReactNode \| PayloadChildRenderFunction<unknown>`	sem valor padrão	The content of the dialog. This can be a regular React node or a render function that receives the `payload` of the active trigger.
defaultOpen	`boolean`	`false`	Whether the dialog is initially open. To render a controlled dialog, use the `open` prop instead.
defaultTriggerId	`string \| null`	sem valor padrão	ID of the trigger that the dialog is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open dialog.
disablePointerDismissal	`boolean`	`false`	Whether to prevent the dialog from closing on outside presses. For non-modal dialogs, this also prevents the dialog from closing when focus moves outside of it.
handle	`DialogHandle<unknown>`	sem valor padrão	A handle to associate the dialog with a trigger. If specified, allows external triggers to control the dialog's open state. Can be created with the Dialog.createHandle() method.
modal	`boolean \| "trap-focus"`	`true`	Determines if the dialog enters a modal state when open. - `true`: user interaction is limited to just the dialog: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled. - `false`: user interaction with the rest of the document is allowed. - `'trap-focus'`: focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled. When `modal` is `true` or `'trap-focus'`, render `<Dialog.Close>` inside `<Dialog.Popup>` so touch screen readers can escape the popup.
onOpenChange	`((open: boolean, eventDetails: DialogRoot.ChangeEventDetails) => void)`	sem valor padrão	Event handler called when the dialog is opened or closed.
onOpenChangeComplete	`((open: boolean) => void)`	sem valor padrão	Event handler called after any animations complete when the dialog is opened or closed.
open	`boolean`	sem valor padrão	Whether the dialog is currently open.
triggerId	`string \| null`	sem valor padrão	ID of the trigger that the dialog is associated with. This is useful in conjunction with the `open` prop to create a controlled dialog. There's no need to specify this prop when the dialog is uncontrolled (that is, when the `open` prop is not set).

Estende SheetPrimitive.Root.Props.

SheetTrigger

Props de SheetTrigger
Prop	Type	Default	Description
className	`string \| ((state: DialogTriggerState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
handle	`DialogHandle<unknown>`	sem valor padrão	A handle to associate the trigger with a dialog. Can be created with the Dialog.createHandle() method.
id	`string`	sem valor padrão	ID of the trigger. In addition to being forwarded to the rendered element, it is also used to specify the active trigger for the dialog in controlled mode (with the DialogRoot `triggerId` prop).
nativeButton	`boolean`	`true`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
payload	`unknown`	sem valor padrão	A payload to pass to the dialog when it is opened.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, DialogTriggerState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: DialogTriggerState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende SheetPrimitive.Trigger.Props. Aceita também os atributos padrão de um elemento React (284 não listados).

SheetClose

Props de SheetClose
Prop	Type	Default	Description
className	`string \| ((state: DialogCloseState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
nativeButton	`boolean`	`true`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, DialogCloseState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: DialogCloseState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende SheetPrimitive.Close.Props. Aceita também os atributos padrão de um elemento React (285 não listados).

SheetPortal

Props de SheetPortal
Prop	Type	Default	Description
className	`string \| ((state: DialogPortalState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
container	`HTMLElement \| ShadowRoot \| React.RefObject<HTMLElement \| ShadowRoot \| null> \| null`	sem valor padrão	A parent element to render the portal element into.
keepMounted	`boolean`	`false`	Whether to keep the portal mounted in the DOM while the popup is hidden.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, DialogPortalState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: DialogPortalState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende SheetPrimitive.Portal.Props. Aceita também os atributos padrão de um elemento React (275 não listados).

SheetContent

Props de SheetContent
Prop	Type	Default	Description
showCloseButton	`boolean`	`true`
showOverlay	`boolean`	`true`	Whether to render the visual scrim behind the modal sheet.
side	`"top" \| "bottom" \| "left" \| "right"`	`'right'`
variant	`"default" \| "inset"`	`'default'`	Whether the panel meets its edge or floats inside the viewport.
className	`string \| ((state: DialogPopupState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
finalFocus	`boolean \| React.RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => boolean \| HTMLElement \| null \| void)`	sem valor padrão	Determines the element to focus when the dialog is closed. - `false`: Do not move focus. - `true`: Move focus based on the default behavior (trigger or previously focused element). - `RefObject`: Move focus to the ref element. - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing.
initialFocus	`boolean \| React.RefObject<HTMLElement \| null> \| ((openType: InteractionType) => boolean \| HTMLElement \| null \| void)`	sem valor padrão	Determines the element to focus when the dialog is opened. By default, focus moves to the first tabbable element inside the popup, except when the dialog is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard. - `false`: Do not move focus. - `true`: Move focus based on the default behavior (first tabbable element or popup). - `RefObject`: Move focus to the ref element. - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, DialogPopupState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: DialogPopupState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende SheetPrimitive.Popup.Props. Aceita também os atributos padrão de um elemento React (275 não listados).

SheetHeader

Estende React.ComponentProps<'div'>. Aceita também os atributos padrão de um elemento React (280 não listados).

SheetBody

Estende React.ComponentProps<'div'>. Aceita também os atributos padrão de um elemento React (280 não listados).

SheetTitle

Props de SheetTitle
Prop	Type	Default	Description
className	`string \| ((state: DialogTitleState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, DialogTitleState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: DialogTitleState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende SheetPrimitive.Title.Props. Aceita também os atributos padrão de um elemento React (275 não listados).

SheetDescription

Props de SheetDescription
Prop	Type	Default	Description
className	`string \| ((state: DialogDescriptionState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, DialogDescriptionState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: DialogDescriptionState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende SheetPrimitive.Description.Props. Aceita também os atributos padrão de um elemento React (275 não listados).

Composition

A mesma composição do Dialog: o Sheet muda de onde o painel entra, não como ele é montado.

Composição de Sheet

Sheet

SheetTrigger
SheetContent
- SheetHeader
  - SheetTitle
  - SheetDescription
- SheetBody
- SheetFooter
  - SheetClose

Metadata

Notas de acessibilidade

Teclado verificado por teste: o foco entra no painel ao abrir, Tab dá a volta dentro dele em vez de escapar para a página coberta, Escape fecha devolvendo o foco ao gatilho, e a saída por Escape continua existindo mesmo com o botão de fechar do canto removido — um painel sem saída visível é uma escolha, um painel sem saída é uma armadilha. Leitor de tela verificado por teste: o painel é nomeado pelo SheetTitle e descrito pelo SheetDescription, e o botão do canto é nomeado por texto em vez de pelo glifo. Touch verificado em navegador com emulação de toque em viewport de 375px: o painel lateral ocupa três quartos da largura deixando visível a página atrás, os alvos medem acima do mínimo de 24x24 da WCAG 2.2 SC 2.5.8 e quem rola é o SheetBody, não o painel inteiro. Reduced motion verificado em navegador com prefers-reduced-motion: reduce — o deslocamento de entrada é aplicado em motion-safe:, então sob reduce o painel não viaja; a transição de opacidade continua incondicional, que é o que dispara o transitionend pelo qual o Base UI espera para desmontar. Verificado nos dois modos: abre, fecha, o foco entra e volta ao gatilho, e o painel não fica preso num transform intermediário.

Classificação

Layer: Primitive
Domínio: Domain-free (compartilhado)
Categoria: overlay
Status: Stable

Origem e distribuição

Fonte: shadcn registry / sheet
Licença: MIT
URL: https://ui.shadcn.com/r/styles/base-vega/sheet.json
Distribuição: Interna

Acessibilidade

Teclado: revisado
Leitor de tela: revisado
Touch: revisado
Reduced motion: revisado

Dependências

Pacotes: @base-ui/react
Ícones: close
Construído sobre: Button
Usado por: Sidebar

Instalação

Preview

Usage

Props

Sheet

SheetTrigger

SheetClose

SheetPortal

SheetContent

SheetHeader

SheetBody

SheetFooter

SheetTitle

SheetDescription

Composition

Metadata

Notas de acessibilidade

Classificação

Origem e distribuição

Acessibilidade

Dependências