Primitiveoverlay

Drawer

Stable

Superfície de borda que se pega: acompanha o dedo um para um, assenta proporcional à força do gesto, empilha quando outra abre por cima e para em snap points. Composto sobre Base UI Drawer. O Sheet e o Drawer ancoram na mesma borda, e escolher entre eles não é gosto — a camada de gesto só se paga quando o toque é a via principal; fora disso o Sheet é a resposta honesta.

Instalação

npx up-web-ds add drawer

Preview

Default

Variants

Without Overlay

With Snap Points

Directions Default

Directions Inset

All states

Default

Variants

Without Overlay

With Snap Points

Directions Default

Directions Inset

Non Modal

Usage

Imports de Drawer

import {
  Drawer,
  DrawerBody,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from '@/components/ui/drawer'
import { Button } from '@/components/ui/button'

Drawer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35<Drawer showSwipeHandle>
  <DrawerTrigger render={<Button variant="outline" />}>
    Abrir detalhes
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>primitives/drawer</DrawerTitle>
      <DrawerDescription>
        Superfície que segue o dedo. Arraste para baixo para dispensar, ou
        use o botão abaixo.
      </DrawerDescription>
    </DrawerHeader>
    <DrawerBody>
      <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 type-small">
        {[
          ['Type', 'primitive'],
          ['Category', 'overlay'],
          ['Domain', 'null'],
          ['Fonte', 'shadcn/ui'],
          ['Licença', 'MIT'],
        ].map(([term, value]) => (
          <div key={term} className="contents">
            <dt className="text-muted-foreground">{term}</dt>
            <dd className="font-mono type-caption">{value}</dd>
          </div>
        ))}
      </dl>
    </DrawerBody>
    <DrawerFooter>
      <DrawerClose render={<Button variant="outline" />}>
        Fechar
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Props

Drawer

Props de Drawer
Prop	Type	Default	Description
showSwipeHandle	`boolean`	`false`
actionsRef	`React.RefObject<DrawerRootActions \| null>`	sem valor padrão	A ref to imperative actions. - `unmount`: Manually unmounts the drawer. Call this after any externally controlled closing animation finishes. - `close`: Closes the drawer imperatively when called.
children	`React.ReactNode \| PayloadChildRenderFunction<unknown>`	sem valor padrão	The content of the drawer.
defaultOpen	`boolean`	`false`	Whether the drawer is initially open. To render a controlled drawer, use the `open` prop instead.
defaultSnapPoint	`DrawerSnapPoint \| null`	sem valor padrão	The initial snap point value when uncontrolled.
defaultTriggerId	`string \| null`	sem valor padrão	ID of the trigger that the drawer is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open drawer.
disablePointerDismissal	`boolean`	`false`	Whether to prevent the drawer from closing on outside presses. For non-modal drawers, this also prevents the drawer from closing when focus moves outside of it.
handle	`DrawerHandle<unknown>`	sem valor padrão	A handle to associate the drawer with a trigger. If specified, allows detached triggers to control the drawer's open state. Can be created with the Drawer.createHandle() method.
modal	`boolean \| "trap-focus"`	`true`	Determines if the drawer enters a modal state when open. - `true`: user interaction is limited to just the drawer: 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 drawer, but document page scroll is not locked and pointer interactions outside of it remain enabled.
onOpenChange	`((open: boolean, eventDetails: DrawerRoot.ChangeEventDetails) => void)`	sem valor padrão	Event handler called when the drawer is opened or closed.
onOpenChangeComplete	`((open: boolean) => void)`	sem valor padrão	Event handler called after any animations complete when the drawer is opened or closed.
onSnapPointChange	`((snapPoint: DrawerSnapPoint \| null, eventDetails: DrawerRoot.SnapPointChangeEventDetails) => void)`	sem valor padrão	Callback fired when the snap point changes.
open	`boolean`	sem valor padrão	Whether the drawer is currently open.
snapPoint	`DrawerSnapPoint \| null`	sem valor padrão	The currently active snap point. Use with `onSnapPointChange` to control the snap point.
snapPoints	`DrawerSnapPoint[]`	sem valor padrão	Snap points used to position the drawer. Use numbers between 0 and 1 to represent fractions of the viewport height, numbers greater than 1 as pixel values, or strings in `px`/`rem` units (for example, `'148px'` or `'30rem'`).
snapToSequentialPoints	`boolean`	`false`	Disables velocity-based snap skipping so drag distance determines the next snap point.
swipeDirection	`SwipeDirection`	`'down'`	The swipe direction used to dismiss the drawer.
triggerId	`string \| null`	sem valor padrão	ID of the trigger that the drawer is associated with. This is useful in conjunction with the `open` prop to create a controlled drawer. There's no need to specify this prop when the drawer is uncontrolled (that is, when the `open` prop is not set).

Estende DrawerPrimitive.Root.Props.

DrawerTrigger

Props de DrawerTrigger
Prop	Type	Default	Description
className	`string \| ((state: DrawerTriggerState) => 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	`DrawerHandle<unknown>`	sem valor padrão	A handle to associate the trigger with a drawer. Can be created with the Drawer.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 drawers in controlled mode (with the Drawer.Root `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 drawer when it is opened.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, DrawerTriggerState>`	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: DrawerTriggerState) => 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 DrawerPrimitive.Trigger.Props. Aceita também os atributos padrão de um elemento React (284 não listados).

DrawerPortal

Props de DrawerPortal
Prop	Type	Default	Description
className	`string \| ((state: DrawerPortalState) => 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, DrawerPortalState>`	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: DrawerPortalState) => 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 DrawerPrimitive.Portal.Props. Aceita também os atributos padrão de um elemento React (275 não listados).

DrawerClose

Props de DrawerClose
Prop	Type	Default	Description
className	`string \| ((state: DrawerCloseState) => 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, DrawerCloseState>`	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: DrawerCloseState) => 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 DrawerPrimitive.Close.Props. Aceita também os atributos padrão de um elemento React (285 não listados).

DrawerOverlay

Props de DrawerOverlay
Prop	Type	Default	Description
className	`string \| ((state: DrawerBackdropState) => 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.
forceRender	`boolean`	`false`	Whether the backdrop is forced to render even when nested.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, DrawerBackdropState>`	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: DrawerBackdropState) => 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 DrawerPrimitive.Backdrop.Props. Aceita também os atributos padrão de um elemento React (275 não listados).

DrawerSwipeHandle

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

DrawerContent

Props de DrawerContent
Prop	Type	Default	Description
showOverlay	`boolean`	`true`	Whether to render the visual scrim behind a modal drawer.
variant	`"default" \| "inset"`	`'default'`	Whether the panel meets its edge or floats inside the viewport.
className	`string \| ((state: DrawerPopupState) => 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 drawer 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, 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 drawer is opened. - `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, or `false`/`undefined` to do nothing.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, DrawerPopupState>`	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: DrawerPopupState) => 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 DrawerPrimitive.Popup.Props. Aceita também os atributos padrão de um elemento React (275 não listados).

DrawerBody

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

DrawerTitle

Props de DrawerTitle
Prop	Type	Default	Description
className	`string \| ((state: DrawerTitleState) => 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, DrawerTitleState>`	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: DrawerTitleState) => 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 DrawerPrimitive.Title.Props. Aceita também os atributos padrão de um elemento React (275 não listados).

DrawerDescription

Props de DrawerDescription
Prop	Type	Default	Description
className	`string \| ((state: DrawerDescriptionState) => 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, DrawerDescriptionState>`	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: DrawerDescriptionState) => 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 DrawerPrimitive.Description.Props. Aceita também os atributos padrão de um elemento React (275 não listados).

Composition

A mesma estrutura do Dialog, mais a alça de arrasto que o Drawer precisa por percorrer o viewport.

Composição de Drawer

Drawer

DrawerTrigger
DrawerContent
- DrawerSwipeHandle
- DrawerHeader
  - DrawerTitle
  - DrawerDescription
- DrawerBody
- DrawerFooter
  - DrawerClose

Metadata

Notas de acessibilidade

Teclado verificado por teste: o foco entra na superfície ao abrir, Tab dá a volta dentro dela enquanto o drawer é modal, Escape fecha devolvendo o foco ao gatilho, e o controle nomeado do rodapé faz por teclado e ponteiro o que o gesto faz por toque — uma superfície cuja única saída é arrastar é uma superfície que algumas pessoas não conseguem fechar. Leitor de tela verificado por teste: o drawer é nomeado pelo DrawerTitle e descrito pelo DrawerDescription, a alça de arraste é aria-hidden por ser afordância de um gesto que o leitor de tela não executa, e o modo não modal não desenha scrim porque a página atrás continua utilizável. Touch verificado em navegador com emulação de toque em viewport de 375px: o arraste dispensa a superfície, o corpo rola com overscroll-contain para que chegar ao fim da lista não vire dispensa acidental, e os alvos medem acima do mínimo de 24x24 da WCAG 2.2 SC 2.5.8. Reduced motion verificado com prefers-reduced-motion: reduce — o painel percorre um viewport inteiro e o transform dele é o que o Base UI observa, então a transição é encurtada (motion-reduce:duration-fast) em vez de removida: tirar a transição tiraria junto o transitionend que desmonta o drawer e quebraria o arraste. O deslocamento fica curto, e abrir, fechar e responder ao gesto continuam intactos.

Classificação

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

Origem e distribuição

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

Acessibilidade

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

Dependências

Pacotes: @base-ui/react
Ícones: Nenhum
Construído sobre: Nenhum
Usado por: Nenhum ainda