DashKit Icon
DashKit
Dashboard UI Kit
Getting Started
Structure
Components
Variables
Dark Mode
Installation
Template
Style Guide
Licensing
Changelog
Powered by Webflow
Template
Components
Component Documentation
Open
Edit profile
Make changes to your profile here. Click save when you're done.
Name
Username
Save changes
Open
Edit profile
Make changes to your profile here. Click save when you're done.
Name
Username
Save changes

Sheet

The Sheet component is a sliding panel that enters from the right side of the screen, overlaying the current page. It’s commonly used for quick-edit panels, side menus, or additional settings without leaving the current view.

It includes:

  • A label and optional description at the top
  • A slot for custom content (text, inputs, components, etc.)
  • Two default action buttons in the footer

Usage

  1. Drag the Sheet component onto the canvas.
  2. Edit the label and description using the Component Properties panel.
  3. Add your content inside the content slot.
  4. Customize the buttons if needed.
  5. Use Variant Mode to switch between:
    • Default – the sheet is hidden
    • Temporary Show Module – to preview the sheet during design

Be sure to return to the Default variant before publishing.

GSAP powered interaction

This sheet uses Webflow’s new GSAP-powered Interactions. When the .sheet_trigger is clicked, the .sheet_popup animates open. Clicking .sheet_close or .sheet_footer closes the dialog popup again.