A panel that slides in from the edge. It holds filters, order details or a cart, with a fixed footer for the main buttons.

What is included

• A drawer with filters content
• A drawer with details content
• A drawer with cart content
• A page layout with a dark scrim
• Usage tips

Where to use it

Use it for filters, details or a quick cart.

Design notes

This side drawer and slide-over panel follows a simple rule: Real components save time because you change a property and the whole set updates. Rename the variants to match your design system and connect the colors to your own styles. It includes a drawer with filters content, a drawer with details content, a drawer with cart content, so you can start from a finished layout and change only what you need.

Built for editing

Spacing follows a 4 point scale and layers have clear names, so developers can find what they need. Fonts are free on Google Fonts, and every color can be changed from the fill panel. You also get a page layout with a dark scrim and usage tips.

How to use it

Copy the component with the copy button and paste it into Figma with Ctrl+V or Cmd+V. The layers keep their auto layout, so you can edit text, colors and spacing. The text uses Plus Jakarta Sans and a few free Google Fonts. Install them first so the text looks the same.

Light version

This listing is the light version. The dark version is listed separately.