Component

Drawer

Other names: Tray, Flyout, Sheet

A panel which slides out from the edge of the screen.

34 examples

Drawer
Ant Design
Ant Financial
- React
- Code examples
- Accessibility issues
- Open source
Drawer
Atlassian Design System
- React
- Code examples
- Usage guidelines
- Tone of voice
- Accessibility
Drawer
Auro
Alaska Airlines
- Web Components
- Sass
- Code examples
- Usage guidelines
- Open source
Drawer
Backpack
Skyscanner
- Mobile
- React
- Code examples
- Usage guidelines
- Open source
- Tone of voice
Drawer
Base Web
Uber
- React
- CSS-in-JS
- Code examples
- Usage guidelines
- Open source
BottomSheet
Cauldron
Deque
- React
- CSS
- Code examples
- Usage guidelines
- Accessibility
- Open source
Drawer
Cauldron
Deque
- React
- CSS
- Code examples
- Usage guidelines
- Accessibility
- Open source
Drawer
Chakra UI
- React
- CSS-in-JS
- Code examples
- Open source
Drawer
Coral
Talend
- React
- Code examples
- Tone of voice
- Open source
Drawer
Dell Design System
- Vanilla JS
- Code examples
- Usage guidelines
Bottom sheet
eBay Playbook
- HTML
- React
- Code examples
Panel
eBay Playbook
- HTML
- React
- Code examples
Drawer
Flowbite
- Tailwind CSS
- Open source
- Code examples
Drawer
Geist Design System
Vercel
- React
- Code examples
Flyout
Helios
Hashicorp
- Ember
- Sass
- Code examples
- Usage guidelines
- Accessibility
- Open source
Drawer
Instructure-UI
Instructure
- React
- CSS-in-JS
- Code examples
- Accessibility
- Open source
Side sheet
Material Design
Google
- Mobile
- Web Components
- Sass
- Usage guidelines
- Open source
- Accessibility
Drawer
Momentum Design
Cisco
- React
- Sass
- Code examples
- Usage guidelines
- Open source
Side Drawer
Nessie
Nederlandse Spoorwegen
- Web Components
- Tailwind CSS
- Usage guidelines
- Code examples
Drawer
Nord Design System
Nordhealth
- Web Components
- Code examples
- Usage guidelines
Drawer
Orbit
Kiwi.com
- React
- CSS-in-JS
- Usage guidelines
- Open source
- Code examples
- Tone of voice
Drawer
Pajamas
GitLab
- Vue
- Usage guidelines
- Code examples
- Open source
Drawer
PatternFly
Red Hat
- React
- Sass
- Tone of voice
- Open source
- Usage guidelines
Notification drawer
PatternFly
Red Hat
- React
- Sass
- Tone of voice
- Open source
- Usage guidelines
Flyout
Porsche Design System
- Web Components
- Angular
- React
- Vue
- Code examples
- Open source
Drawer
Seeds
Sprout Social
- React
- Code examples
- Usage guidelines
- Tone of voice
Drawer
shadcn/ui
- React
- Tailwind CSS
- Code examples
- Open source
Sheet
shadcn/ui
- React
- Tailwind CSS
- Code examples
- Open source
Drawer
Shoelace
- Web Components
- Code examples
- Open source
Tray
Spectrum
Adobe
- CSS
- Web Components
- React
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Drawer
Wanda
Wonderflow
- React
- CSS Modules
- Code examples
- Open source
Side panel
Workday Canvas Design System
- React
- Usage guidelines
- Accessibility
- Tone of voice
- Open source