Modal
OverlayEveryday goods
6 items · up to ¥500
Select an item to try the result area
Covers results to focus on a choice. Close it to interact with products.
Explore this component →Concept comparisons
Try the same task with different patterns, then compare their details. Open the component you choose to take its implementation plan into your project.
TRY BEFORE YOU CHOOSE
One task. Different ways to do it.
Try filtering Home items below ¥200. Close, reopen, then select a result. Notice what gets covered and which choices persist. Previews are independent; closing preserves filters, while resetting or leaving this group clears them.
Side drawer
Non-modalEveryday goods
6 items · up to ¥500
Select an item to try the result area
This non-modal drawer keeps results interactive on the left. Narrow containers leave less room for results.
Explore this component →Bottom sheet
OverlayEveryday goods
6 items · up to ¥500
Select an item to try the result area
Opens from below, retaining context above. Extra content scrolls inside the panel.
Explore this component →These bounded previews compare behavior. Drawers can also be modal. Test real device viewports, long content, and assistive technology in your project.
Compare dimensions
- Login PagePages
- Signup PagePages
2 concepts · 3 dimensions →
- ButtonComponents
- Press FeedbackMotion
2 concepts · 3 dimensions →
- AlertComponents
- ToastComponents
- Form ValidationPatterns
3 concepts · 3 dimensions →
- Hover GlowMotion
- Hover LiftMotion
2 concepts · 3 dimensions →
- Progress BarComponents
- Skeleton LoadingPatterns
- Loading SpinnerMotion
3 concepts · 4 dimensions →
- Command PaletteComponents
- DropdownComponents
2 concepts · 3 dimensions →
- Bottom SheetComponents
- DrawerComponents
- ModalComponents
- PopoverComponents
4 concepts · 3 dimensions →
- CardComponents
- TableComponents
2 concepts · 3 dimensions →
- MenuComponents
- NavbarComponents
- SidebarComponents
3 concepts · 3 dimensions →
- PaginationComponents
- Infinite ScrollPatterns
- Pull to RefreshPatterns
3 concepts · 3 dimensions →
- Line HeightFoundation
- MeasureFoundation
- Type ScaleFoundation
3 concepts · 3 dimensions →