Drawer

A drawer component that can be used as a Dialog replacement on tablet and mobile devices.

Source code

Click here to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

npx ui-thing@latest add drawer

Usage

Basic Form

We can bring the different components together to make a simple drawer.

With Image

We can add an image inside as well.

Responsive Dialog

You can combine the Dialog and Drawer components to create a responsive dialog. This renders a Dialog component on desktop and a Drawer on mobile.

Divider

A horizontal line to separate content. Similiar to the Seperator component, but with items in the middle.

Dropdown Menu

Displays a menu to the user—such as a set of actions or functions—triggered by a button.