OverlaysLiquid Glass
Sheet
Edge slide-in glass panel with spring animation. Preview live, copy the source, or install with the CLI into your Next.js project.
Install
npx @intellihelper/cli@latest add sheetEdge panels
About this component
Sheet is part of Overlays. Edge slide-in glass panel with spring animation.
Install with npx @intellihelper/cli@latest add sheet. Files land in your project so you can customize styles, variants, and behavior without a locked package.
Prefer AI-assisted install? Use the agent plugin or the MCP server.
When to use Sheet
Use when
- Use Sheet when edge slide-in glass panel with spring animation.
- Temporary focus tasks: dialogs, sheets, popovers, tooltips, hover cards.
- Confirmations and dense secondary UI that should not navigate away.
Avoid when
- Primary page content — overlays hide context and hurt deep linking.
- Critical legal copy that must remain permanently visible.
Accessibility notes
- Focus moves into the overlay on open and returns on close.
- Escape dismisses where appropriate; dialogs should label the title.
- Tooltips must not be the only way to access essential information.
Interactive primitives build on accessible patterns (including Radix where applicable). Always verify focus order and contrast on your mesh or product background.
Composition tips
- Prefer sheet for mobile-heavy flows; dialog for focused confirmations.
- Keep overlay body short; link out to full pages for long content.
FAQ
Related components
View all overlays →Dialog
Highly transparent modal with frosted overlay and rise-in content.
Open →Alert Dialog
Confirmation modal for destructive and irreversible actions.
Open →Popover
Click-triggered frosted panel for contextual actions.
Open →Dropdown Menu
Glass action menus with checkboxes, radios, and nested submenus.
Open →