Components
Drawer
A slide-in panel from any edge of the viewport. Supports titles, actions, backdrop blur, and focus trapping.
import{ Drawer }from"oks-ui"
4 positionsFocus trapBackdrop blurCustom sizesDismissible
Basic
Controlled via isOpen and onClose. Can render from left, right, top, or bottom.
Interactive Playground
Controls
Preview
Generated Code
const [isOpen, setIsOpen] = useState(false);
<Button onPress={() => setIsOpen(true)}>Open Drawer</Button>
<Drawer isOpen={isOpen} onClose={() => setIsOpen(false)} title="Drawer Title">
Drawer content goes here.
</Drawer>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| isOpen | boolean | — | Controls visibility (required). |
| onClose | () => void | — | Called when drawer is dismissed (required). |
| position | "left" | "right" | "top" | "bottom" | "right" | Slide-in direction. |
| title | ReactNode | — | Drawer header title. |
| closeOnOutsideClick | boolean | true | Close on backdrop click. |
| closeOnEscape | boolean | true | Close on Escape key. |
| dismissible | boolean | true | Show close button. |
| size | "sm" | "md" | "lg" | number | string | "md" | Width (left/right) or height (top/bottom). |
| blur | boolean | 'sm' | 'md' | 'lg' | number | false | Backdrop blur. |
| portal | boolean | true | Render in portal. |
isOpen—
boolean
Controls visibility (required).
onClose—
() => void
Called when drawer is dismissed (required).
position"right"
"left" | "right" | "top" | "bottom"
Slide-in direction.
title—
ReactNode
Drawer header title.
closeOnOutsideClicktrue
boolean
Close on backdrop click.
closeOnEscapetrue
boolean
Close on Escape key.
dismissibletrue
boolean
Show close button.
size"md"
"sm" | "md" | "lg" | number | string
Width (left/right) or height (top/bottom).
blurfalse
boolean | 'sm' | 'md' | 'lg' | number
Backdrop blur.
portaltrue
boolean
Render in portal.