---
type: doc
title: Drawer
description: Native Liquid drawer with readable CSS and shared data-slot parts.
---

> Native Liquid and CSS. Install from `https://ui.full.dev/r/liquid/{name}.json`; see [layout setup](/liquid/docs/installation.md). No Tailwind or consuming build.

```liquid title="liquid/examples/drawer.liquid"
<div data-slot='drawer'>
  <button type='button' data-slot='drawer-trigger' data-button data-variant='outline'>Drawer</button>
  <div data-slot='drawer-portal'>
    <div data-slot='drawer-backdrop' hidden></div>
    <div data-slot='drawer-popup' hidden>
      <div data-slot='drawer-handle'></div>
      <div data-slot='drawer-content'>
        <div data-slot='drawer-header'>
          <h3 data-slot='drawer-title'>Drawer</h3>
          <p data-slot='drawer-description'>Swipe down or press Escape to close.</p>
        </div>
        <div data-slot='drawer-footer'>
          <button type='button' data-slot='drawer-close' data-button data-variant='outline'>Close</button>
        </div>
      </div>
    </div>
  </div>
</div>
```

## Installation

```bash
npx shadcn@latest add https://ui.full.dev/r/liquid/drawer.json
```

Follow the [one-time layout setup](/liquid/docs/installation/). A full `components` install already includes this item.

## Usage

After this install, render these once in the layout head before theme overrides and other modules. The full `ui` hook already includes them. The command also installs the parts used in this example.

```liquid
{% render 'ui-init' %}
{% render 'ui-triggers' %}
{% render 'ui-button' %}
{% render 'ui-runtime' %}
{% render 'ui-drawer' %}
```

The preview and its Usage tab render the same native Liquid source. Use `data-slot` for parts, `data-variant` for variants and `data-size` for sizes. Keep your store's labels, translations and Shopify data in your theme.

## Parts

`drawer-backdrop`, `drawer-content`, `drawer-description`, `drawer-footer`, `drawer-handle`, `drawer-header`, `drawer-popup`, `drawer-title`.

[Component source](https://github.com/fulldotdev/ui/tree/main/liquid/components/drawer.liquid) · [Theming](/liquid/docs/theming/)

## Install what this page shows

```bash
npx shadcn@latest add https://ui.full.dev/r/liquid/drawer.json
```