Meta tags:
description=A high-quality, unstyled React drawer component with swipe-to-dismiss gestures.;
keywords=React Drawer,Drawer Component,Side Panel,Bottom Sheet,Swipe Dismiss Drawer,Offcanvas,Sliding Panel,Modal Drawer,Controlled Drawer State,Accessible Drawer,Headless React Components,Base UI;

Headings (most frequently used words):

drawer, propshide, statehide, root, indent, close, provider, indentbackground, trigger, swipearea, virtualkeyboardprovider, portal, backdrop, viewport, popup, content, title, description, action, usage, guidelines, anatomy, examples, api, reference, createhandle, state, position, nested, drawers, snap, points, virtual, keyboard, aware, effect, non, modal, mobile, navigation, swipe, to, open, confirmation, sheet, with, separate, destructive, detached, triggers, stacking, and, animations, handle, actionshide, changeeventreasonhide, changeeventdetailshide, snappointhide, snappointchangeeventdetailshide, snappointchangeeventreasonhide, return, value, constructor, parameters, properties, methods,

Text of the page (most frequently used words):
drawer (684), the (386), classname (208), styles (200), react (126), #description (120), state (119), type (115), open (105), undefined (98), function (93), element (86), div (84), when (79), close (76), name (76), swipe (76), component (73), trigger (72), style (72), data (72), root (71), css (69), popup (66), label (64), content (62), props (61), title (60), viewport (60), that (58), with (55), button (53), string (50), boolean (50), reactelement (48), portal (48), from (47), present (46), render (45), nested (45), href (45), default (44), and (43), event (41), components (41), returns (40), index (38), hide (37), cssproperties (37), backdrop (35), whether (33), false (32), snap (32), import (32), based (31), handle (28), height (28), use (27), payload (26), class (26), export (26), applied (26), dialog (25), prop (25), focus (25), null (24), you (23), drawers (22), module (22), stackblitz (22), modules (22), for (21), base (21), actions (21), const (21), this (20), direction (20), keyboard (20), indent (20), var (20), closed (19), provider (19), void (18), table (18), return (18), action (18), reason (18), point (17), allows (16), another (15), swiping (15), can (15), currently (14), disabled (14), html (14), different (14), renders (14), swipedirection (14), right (14), movement (14), field (14), stack (13), virtualkeyboardprovider (13), swipearea (13), outside (13), modal (13), code (13), alertdialog (13), menu (13), htmlprops (12), accepts (12), replace (12), tag (12), compose (12), object (12), true (12), down (12), animating (12), out (12), ending (12), scroll (12), sheet (12), press (12), indentbackground (12), drawerpopup (12), show (12), used (11), number (11), offset (11), frontmost (11), attribute (11), bottom (11), area (11), tsx (11), input (11), scrollarea (11), not (10), any (10), being (10), swiped (10), variable (10), key (10), snappoints (10), item (10), indicates (9), dismiss (9), transition (9), progress (9), form (9), onopenchange (9), its (9), your (9), confirmation (9), textarea (9), opens (8), detached (8), within (8), are (8), inset (8), edge (8), keyboardevent (8), pointerevent (8), snappoint (8), points (8), usestate (8), client (8), span (8), navigation (8), createhandle (7), example (7), container (7), active (7), scale (7), starting (7), refobject (7), opened (7), while (7), reactnode (7), children (7), aware (7), controlled (7), calc (7), transform (7), demodrawer (7), aria (7), set (6), called (6), triggers (6), expanded (6), transitionstatus (6), htmlelement (6), move (6), gesture (6), cancel (6), mouseevent (6), touchevent (6), non (6), opacity (6), setopen (6), text (6), tweet (6), placeholder (6), checkbox (6), group (6), toggle (6), associate (5), triggerid (5), control (5), value (5), left (5), has (5), full (5), mouse (5), ref (5), keep (5), imperative (5), none (5), need (5), drag (5), interactions (5), user (5), closing (5), eventdetails (5), position (5), stacking (5), using (5), map (5), exampledrawer (5), settextareavalue (5), mobile (5), top (5), footer (5), parameters (4), will (4), method (4), only (4), nativebutton (4), release (4), duration (4), strength (4), axis (4), touch (4), pen (4), interaction (4), behavior (4), determines (4), software (4), hidden (4), handling (4), fields (4), escape (4), watcher (4), propagate (4), uncontrolled (4), after (4), animations (4), trap (4), disablepointerdismissal (4), onsnappointchange (4), numbers (4), rem (4), all (4), parts (4), own (4), context (4), translatey (4), profile (4), add (4), list (4), setdraweropen (4), setconfirmationopen (4), alert (4), clicks (4), portalcontainer (4), setportalcontainer (4), overview (4), card (4), contains (4), closes (3), without (3), should (3), handler (3), effect (3), new (3), via (3), rendered (3), contents (3), parent (3), status (3), focused (3), union (3), body (3), gestures (3), also (3), specify (3), created (3), allowed (3), create (3), there (3), velocity (3), snaptosequentialpoints (3), inside (3), document (3), pointer (3), defaultopen (3), drawersnappoint (3), between (3), values (3), 148px (3), doesn (3), nearest (3), app (3), background (3), drawerbackdrop (3), dismissal (3), variables (3), drawercontent (3), bleed (3), heights (3), settings (3), which (3), place (3), visuallyhidden (3), onclick (3), demo (3), separate (3), destructive (3), confirmationopen (3), textareavalue (3), titleid (3), svg (3), releases (3), accordion (3), autocomplete (3), avatar (3), collapsible (3), combobox (3), fieldset (3), menubar (3), meter (3), otp (3), popover (3), preview (3), radio (3), select (3), separator (3), slider (3), switch (3), tabs (3), toast (3), toolbar (3), tooltip (3), panel (3), header (3), scrollbar (3), screen (3), delivery (3), fieldlabel (3), virtual (3), top_margin_rem (3), view (3), support (3), security (3), device (3), notes (3), anatomy (3), slides (3), opening (2), sets (2), does (2), openwithpayload (2), during (2), methods (2), readonly (2), modifiers (2), isopen (2), properties (2), dialogstore (2), store (2), imperatively (2), native (2), replacing (2), about (2), scalar (2), translating (2), current (2), dismissed (2), nothing (2), finalfocus (2), first (2), initialfocus (2), measured (2), layout (2), wrapped (2), positioning (2), scrollable (2), forcerender (2), dom (2), keepmounted (2), shadowroot (2), into (2), moves (2), provides (2), defaults (2), drawerswipedirection (2), drawerhandle (2), triggered (2), applicable (2), ispropagationallowed (2), iscanceled (2), been (2), canceled (2), allowpropagation (2), cases (2), where (2), stop (2), propagation (2), cancels (2), focusevent (2), snappointchangeeventdetails (2), changeeventdetails (2), unmount (2), associated (2), useful (2), conjunction (2), skipping (2), distance (2), next (2), onopenchangecomplete (2), trapped (2), page (2), locked (2), enabled (2), prevent (2), presses (2), initially (2), defaulttriggerid (2), animation (2), actionsref (2), callback (2), defaultsnappoint (2), represent (2), fractions (2), greater (2), than (2), pixel (2), units (2), 30rem (2), instead (2), before (2), styled (2), effects (2), api (2), reference (2), translatex (2), 100 (2), animate (2), behind (2), visible (2), varying (2), aligned (2), one (2), step (2), depth (2), starts (2), off (2), block (2), draweropen (2), target (2), discard (2), back (2), shown (2), way (2), dismisses (2), htmldivelement (2), here (2), center (2), instructions (2), want (2), items (2), utils (2), long_list (2), nav (2), xicon (2), flick (2), link (2), opt (2), notifications (2), caught (2), good (2), job (2), headerbutton (2), driver (2), note (2), positioned (2), fixed (2), adds (2), keyboards (2), skip (2), visible_snap_points_rem (2), toviewportsnappoint (2), heightrem (2), peek (2), setsnappoint (2), actionsleft (2), advanced (2), htmlfor (2), defaultvalue (2), examples (2), usage (2), guidelines (2), association, rendering, associates, given, provided, must, matching, passed, property, parameter, constructor, creates, connect, drawerclosestate, drawercloseprops, drawerdescriptionstate, drawerdescriptionprops, paragraph, additional, information, drawertitlestate, drawertitleprops, heading, labels, drawercontentstate, drawercontentprops, nesteddrawerswiping, nesteddraweropen, drawerpopupstate, drawerpopupprops, closetype, previously, opentype, tabbable, nesteddialogopen, drawerviewportstate, drawerviewportprops, made, drawerbackdropstate, drawerbackdropprops, forced, even, overlay, displayed, beneath, drawerportalstate, drawerportalprops, mounted, part, appended, drawervirtualkeyboardproviderstate, drawervirtualkeyboardproviderprops, drawerswipeareastate, drawerswipeareaprops, opposite, invisible, listens, was, drawertriggerstate, drawertriggerprops, addition, forwarded, mode, pass, drawerrootsnappointchangeeventreason, snappointchangeeventreason, drawerrootsnappointchangeeventdetails, drawerrootsnappoint, preventunmountonclose, drawerrootchangeeventdetails, drawerrootchangeeventreason, changeeventreason, drawerrootactions, drawerrootstate, drawerrootprops, arg, unknown, payloadchildrenderfunction, disables, complete, but, remain, rest, limited, just, elements, enters, specified, prevents, manually, unmounts, call, externally, finishes, fired, changes, initial, strings, groups, drawerindentstate, drawerindentprops, wrapper, intended, contain, main, applies, drawerindentbackgroundstate, drawerindentbackgroundprops, placed, layer, drawerproviderstate, drawerproviderprops, shared, coordinating, global, such, 400ms, 0ms, timing, fade, durations, directional, smooth, offsets, 300ms, visibility, marks, dim, keeping, 3rem, max, 0px, auto, overflow, stacked, have, collapsed, determine, transitions, depending, achieved, passing, child, pattern, however, defining, practical, involves, placing, linking, them, located, either, simple, exampledraweruncontained, surface, choose, actionbutton, dangersurface, dangerbutton, unfollow, mute, favourites, friends, restrict, builds, grouped, plus, useid, reset, popupdimmed, trim, textareacontainer, onsubmit, preventdefault, submitting, labelledby, required, what, mind, onchange, submit, alertpopup, intro, lost, prompt, implement, both, may, receives, request, automatically, esc, shows, entered, going, discarded, swipelabel, hint, library, whenever, jump, playlists, exampledrawerswipearea, along, enable, display, path, 11m, utilities, exampledrawermobilenav, scrollarearoot, scrollareaviewport, scrollcontent, headerspacer, closebutton, long, longlist, links, thumb, scrollbarthumb, componentprops, width, viewbox, fill, stroke, currentcolor, strokelinecap, square, strokelinejoin, round, build, including, ignores, trapping, wrapping, tree, notifies, mounts, activates, they, receive, attributes, phone, 555, 123, 4567, street, address, computing, apartment, unit, city, san, francisco, postal, 94107, window, backup, contact, grace, hopper, exampledrawervirtualkeyboardaware, headeractions, details, save, gate, drop, spot, anything, else, know, footerslot, stickyfooter, composer, composerinput, ada, lovelace, bare, invalid, alignment, cleanup, always, include, fallback, reserve, slot, below, switches, against, since, descendants, padding, lift, pinned, plain, frame, stable, wrap, make, controls, scrolls, quickly, disable, determined, still, past, multiple, exampledrawersnappoints, margin, dragarea, compact, near, cards, array, length, apply, vertical, preset, treated, account, each, remains, independently, managed, review, sign, activity, update, preferences, passkeys, 2fa, authenticator, signed, devices, options, taller, demonstrate, personal, laptop, rotate, recovery, codes, revoke, older, sessions, rows, done, exampledrawernested, stacks, constant, stays, anchored, ones, scaled, lifted, uses, selector, directions, handled, sheets, other, positions, access, manages, manage, unaffected, supports, selection, interference, descendant, types, ignore, assemble, don, these, extends, side, source, markdown, npm, github, userender, mergeprops, csp, llms, txt, typescript, forms, customization, composition, styling, handbook, community, accessibility, quick, start, search,

Text of the page (random words):
rt alertdialog from base ui react alert dialog import drawer from base ui react drawer import styles from index module css export default function exampledrawer const draweropen setdraweropen react usestate false const confirmationopen setconfirmationopen react usestate false const textareavalue settextareavalue react usestate const titleid react useid return drawer root swipedirection right open draweropen onopenchange open eventdetails show the close confirmation if there s text in the textarea if open textareavalue eventdetails cancel setconfirmationopen true return if open reset the textarea value settextareavalue setdraweropen open drawer trigger classname styles button tweet drawer trigger drawer portal drawer backdrop classname styles backdrop drawer viewport classname styles viewport drawer popup classname styles popup confirmationopen styles popupdimmed trim drawer content classname styles content drawer title id titleid classname styles title new tweet drawer title form classname styles textareacontainer onsubmit event event preventdefault close the drawer when submitting settextareavalue setdraweropen false textarea aria labelledby titleid required classname styles textarea placeholder what s on your mind value textareavalue onchange event settextareavalue event target value div classname styles actions drawer close classname styles button cancel drawer close button type submit classname styles button tweet button div form drawer content drawer popup drawer viewport drawer portal confirmation dialog alertdialog root open confirmationopen onopenchange setconfirmationopen alertdialog portal alertdialog popup classname styles alertpopup div classname styles intro alertdialog title classname styles title discard tweet alertdialog title alertdialog description classname styles description your tweet will be lost alertdialog description div div classname styles actions alertdialog close classname styles button go back alertdialog close button type button classname styles button onclick setconfirmationopen false settextareavalue setdraweropen false discard button div alertdialog popup alertdialog portal alertdialog root drawer root show code action sheet with separate destructive action this demo builds an action sheet with a grouped list of actions plus a separate destructive action button open action sheet index tsx index module css css modules stackblitz css modules stackblitz use client import as react from react import drawer from base ui react drawer import styles from index module css const actions unfollow mute add to favourites add to close friends restrict export default function exampledraweruncontained const open setopen react usestate false return drawer root open open onopenchange setopen drawer trigger classname styles button open action sheet drawer trigger drawer portal drawer backdrop classname styles backdrop drawer viewport classname styles viewport drawer popup classname styles popup drawer content classname styles surface drawer title classname styles visuallyhidden profile actions drawer title drawer description classname styles visuallyhidden choose an action for this user drawer description ul classname styles actions aria label profile actions actions map action index li key action classname styles action index 0 drawer close classname styles visuallyhidden close action sheet drawer close button type button classname styles actionbutton onclick setopen false action button li ul drawer content div classname styles dangersurface button type button classname styles dangerbutton onclick setopen false block user button div drawer popup drawer viewport drawer portal drawer root show code detached triggers a drawer can be controlled by a trigger located either inside or outside the drawer root component for simple one off interactions place the drawer trigger inside drawer root however if defining the drawer s content next to its trigger is not practical you can use a detached trigger this involves placing the drawer trigger outside of drawer root and linking them with a handle created by the drawer createhandle function detached triggers const demodrawer drawer createhandle drawer trigger handle demodrawer open drawer trigger drawer root handle demodrawer drawer root the drawer can render different content depending on which trigger opened it this is achieved by passing a payload to the drawer trigger and using the function as a child pattern in drawer root detached triggers with payload const demodrawer drawer createhandle title string drawer trigger handle demodrawer payload title profile profile drawer trigger drawer trigger handle demodrawer payload title settings settings drawer trigger drawer root handle demodrawer payload drawer portal drawer popup drawer content drawer title payload title drawer title drawer content drawer popup drawer portal drawer root stacking and animations use css transitions or animations to animate drawer opening closing swipe interactions and nested stacking the data starting style attribute is applied when a drawer starts to open and data ending style is applied when it starts to close the nested drawers css variable can be used to determine stack depth the frontmost drawer has index 0 stack depth drawerpopup stack step 0 05 stack scale calc 1 var nested drawers var stack step transform translatey var drawer swipe movement y scale var stack scale when stacked drawers have varying heights use the drawer height and drawer frontmost height variables to keep collapsed drawers aligned with the frontmost one variable height stacking drawerpopup bleed 3rem stack height max 0px calc var drawer frontmost height var drawer height var bleed height var drawer height auto drawerpopup data nested drawer open height calc var stack height var bleed overflow hidden the data nested drawer open attribute marks drawers behind the frontmost drawer use it with data nested drawer swiping to dim or hide parent drawer content while keeping it visible during nested swipe interactions nested content visibility drawercontent transition opacity 300ms drawerpopup data nested drawer open drawercontent opacity 0 drawerpopup data nested drawer open data nested drawer swiping drawercontent opacity 1 the drawer swipe movement x drawer swipe movement y and drawer snap point offset css variables can be used to create smooth drag and snap offsets swipe and snap offset drawerpopup data swipe direction right transform translatex var drawer swipe movement x drawerpopup data swipe direction down transform translatey calc var drawer snap point offset var drawer swipe movement y the data swipe direction attribute can be used with data ending style to animate directional dismissal swipe dismissal direction drawerpopup data ending style data swipe direction right transform translatex 100 drawerpopup data ending style data swipe direction down transform translatey 100 use drawer swipe progress to fade the backdrop as the drawer is swiped and drawer swipe strength to scale release transition durations based on swipe velocity backdrop and release timing drawerbackdrop backdrop opacity 0 2 opacity calc var backdrop opacity 1 var drawer swipe progress drawerpopup data ending style drawerbackdrop data ending style transition duration calc var drawer swipe strength 400ms drawerpopup data swiping drawerbackdrop data swiping transition duration 0ms api reference provider provides a shared context for coordinating global drawer ui such as indent background effects based on whether any drawer is open doesn t render its own html element component props table prop type default children react reactnode name children type react reactnode undefined drawer provider props hide re export of provider props as drawerproviderprops drawer provider state hide type drawerproviderstate indentbackground an element placed before drawer indent to render a background layer that can be styled based on whether any drawer is open renders a div element component props table prop type default classname string function name classname description css class applied to the element or a function that returns a class based on the component s state type string state drawer indentbackground state string undefined undefined style react cssproperties function name style description style applied to the element or a function that returns a style object based on the component s state type react cssproperties state drawer indentbackground state react cssproperties undefined undefined render reactelement function name render description 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 type reactelement props htmlprops state drawer indentbackground state reactelement undefined drawer indentbackground props hide re export of indentbackground props as drawerindentbackgroundprops drawer indentbackground state hide type drawerindentbackgroundstate whether any drawer within the nearest drawer provider is open active boolean indent a wrapper element intended to contain your app s main ui applies data active when any drawer within the nearest drawer provider is open renders a div element component props table prop type default classname string function name classname description css class applied to the element or a function that returns a class based on the component s state type string state drawer indent state string undefined undefined style react cssproperties function name style description style applied to the element or a function that returns a style object based on the component s state type react cssproperties state drawer indent state react cssproperties undefined undefined render reactelement function name render description 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 type reactelement props htmlprops state drawer indent state reactelement undefined drawer indent props hide re export of indent props as drawerindentprops drawer indent state hide type drawerindentstate whether any drawer within the nearest drawer provider is open active boolean root groups all parts of the drawer doesn t render its own html element component props table prop type default defaultopen boolean false name defaultopen description whether the drawer is initially open to render a controlled drawer use the open prop instead type boolean undefined default false open boolean name open description whether the drawer is currently open type boolean undefined onopenchange function name onopenchange description event handler called when the drawer is opened or closed type open boolean eventdetails drawer root changeeventdetails void undefined snappoints drawersnappoint name snappoints description 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 type number string undefined defaultsnappoint drawersnappoint null name defaultsnappoint description the initial snap point value when uncontrolled type number string null undefined snappoint drawersnappoint null name snappoint description the currently active snap point use with onsnappointchange to control the snap point type number string null undefined onsnappointchange function name onsnappointchange description callback fired when the snap point changes type snappoint number string null eventdetails drawer root snappointchangeeventdetails void undefined actionsref react refobject drawer root actions null name actionsref description 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 type react refobject drawer root actions null undefined defaulttriggerid string null name defaulttriggerid description 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 type string null undefined disablepointerdismissal boolean false name disablepointerdismissal description 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 type boolean undefined default false handle drawer handle payload name handle description 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 type drawer handle payload undefined modal boolean trap focus true name modal description 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 type boolean trap focus undefined default true onopenchangecomplete function name onopenchangecomplete description event handler called after any animations complete when the drawer is opened or closed type open boolean void undefined snaptosequentialpoints boolean false name snaptosequentialpoints description disables velocity based snap skipping so drag distance determines the next snap point type boolean undefined default false swipedirection drawerswipedirection down name swipedirection description the swipe direction used to dismiss the drawer type up down left right undefined default down triggerid string null name triggerid description 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 type string null undefined children react reactnode payloadchildrenderfunction payload name children description the content of the drawer type react reactnode arg payload unknown undefined reactnode payload undefined drawer root props hide re export of root props as drawerrootprops drawer root state hide type drawerrootstate drawer root actions hide type drawerrootactions unmount void close void drawer root changeeventreason hide type drawerrootchangeeventreason trigger press outside press escape key close watcher close press focus out imperative action swipe none drawer root changeeventdetails hide type drawerrootchangeeventdetails reason trigger press event keyboardevent mouseevent touchevent pointerevent reason outside press event mouseevent touchevent pointerevent reason escape key event keyboardevent reason close press event keyboardevent mouseevent point...