The Drawer component is a fully customizable and accessible drawer modal component built with React and TypeScript. It provides an intuitive and smooth user experience, supporting drag interactions and seamless state management.
This is a simple Drawer example.
import { Drawer, Button } from "mogora-ui";
export default function DrawerDemo() {
return (
<Drawer>
<Drawer.Trigger>
<Button variant="clicki">Open Drawer</Button>
</Drawer.Trigger>
<Drawer.Content>
<div className="h-full flex flex-col items-center pt-5 md:w-md w-full">
<h2 className="text-lg font-bold">Drawer Title</h2>
<p className="mt-2">This is a simple Drawer example.</p>
</div>
</Drawer.Content>
</Drawer>
)
}
The main component that manages the state of the drawer.
| Prop | Type | Description |
|---|---|---|
| open | boolean | Controls whether the drawer is open or not. |
| onOpenChange | (open: boolean) => void | Callback fired when the drawer state changes. |
| className | string | Additional classes for the drawer container. |
| children | ReactNode | Components inside the drawer provider. |
A component that toggles the drawer open or closed.
| Prop | Type | Description |
|---|---|---|
| onClick | (e: React.MouseEvent) => void | Function to handle click events. |
| className | string | Additional classes for the trigger. |
| children | ReactNode | Elements inside the trigger. |
The content container inside the drawer.
| Prop | Type | Description |
|---|---|---|
| render | () => ReactNode | Optional function to render a custom header. |
| className | string | Additional classes for the content. |
| children | ReactNode | Elements inside the drawer content. |