Drawer

Drawers are a type of modal that slides in from the side of the screen (also known as slide-overs). They are used to display additional information or actions that are not part of the main content.

These are similar to Modals, but are less disruptive to the user experience, as they don’t cover the entire screen. On desktop, they slide in from the right side of the screen, and on mobile, they slide in from the bottom.

This component is built on top of Radix UI.

Example

Usage

import { Button, Drawer } from '@nearst/ui';
 
const [open, setOpen] = useState(false);
 
<Button onClick={() => setOpen(true)}>Open drawer</Button>
 
<Drawer open={open} onOpenChange={setOpen}>
	<Drawer.Header>
		<Drawer.Title>Drawer title</Drawer.Title>
		<Drawer.Close />
	</Drawer.Header>
 
	<p>Hello, world!</p>
</Drawer>

Components

`Drawer`

The main component that renders the drawer.

Props:

open: Whether the drawer is open.
onOpenChange: A function that is called when the drawer is opened or closed. Takes a boolean argument.
className: An optional CSS class name to apply to the drawer.

`Drawer.Header`

The header of the drawer, which contains the title and close button.

className: An optional CSS class name to apply to the header.
children: The content of the header.

`Drawer.Title`

The title of the drawer.

className: An optional CSS class name to apply to the title.
children: The content of the title.

`Drawer.Close`

A button that closes the drawer.

Details Filter