πŸ“„ tailwindcss/plus/ui-blocks/application-ui/overlays/drawers

File: drawers.md | Updated: 11/15/2025

Source: https://tailwindcss.com/plus/ui-blocks/application-ui/overlays/drawers

5-day Mini-Course

Build UIs that don’t suck.

Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a week.

Get the free course

Drawers

Use these Tailwind CSS drawer components to add panels that slide in from the side for things like mobile menus, notifications, or forms. These components are designed and built by the Tailwind CSS team, and include a variety of different styles and layouts.

With close button on outside


PreviewCode

HTMLReactVue

With close button on outside


PreviewCode

HTMLReactVue

Empty


Preview

Get the code β†’

Empty


Preview

Get the code β†’

Wide empty


Preview

Get the code β†’

Wide empty


Preview

Get the code β†’

With background overlay


Preview

Get the code β†’

With background overlay


Preview

Get the code β†’

With branded header


Preview

Get the code β†’

With branded header


Preview

Get the code β†’

With sticky footer


Preview

Get the code β†’

With sticky footer


Preview

Get the code β†’

Create project form example


Preview

Get the code β†’

Create project form example


Preview

Get the code β†’

Wide create project form example


Preview

Get the code β†’

Wide create project form example


Preview

Get the code β†’

User profile example


Preview

Get the code β†’

User profile example


Preview

Get the code β†’

Wide horizontal user profile example


Preview

Get the code β†’

Wide horizontal user profile example


Preview

Get the code β†’

Contact list example


Preview

Get the code β†’

Contact list example


Preview

Get the code β†’

File details example


Preview

Get the code β†’

File details example


Preview

Get the code β†’