Drawer

Bottom sheet style overlay with trigger and close helpers.

Drawer Content

50 animals

Usage

import {Drawer, DrawerClose, DrawerContent, DrawerTrigger} from 'kinu';

<Drawer>
  <DrawerTrigger><Button>Open</Button></DrawerTrigger>
  <DrawerContent>Content</DrawerContent>
  <DrawerClose><Button>Close</Button></DrawerClose>
</Drawer>

Exports

Name Description Rendered HTML
Drawer Slide-out panel —
DrawerTrigger Drawer trigger —
DrawerContent Drawer content —
DrawerClose Close button —

Props

DrawerProps

Prop Type Default Description
id string — Optional ID for the drawer dialog. If not provided, one will be auto-generated.

DrawerContentProps

Prop Type Default Description
id string — Override the auto-generated dialog ID.

Static Shortcuts

  • Drawer.Trigger = DrawerTrigger
  • Drawer.Content = DrawerContent
  • Drawer.Close = DrawerClose

Notes

  • Positions content with CSS variables so you can change direction.
  • Attach Drawer.Close to any element that should dismiss.
  • On touch devices the drawer is swipeable — swipe down to dismiss. The gesture uses native CSS scroll-snapping with no wrapper elements.
  • Set --k-drawer-height on DrawerContent to open to a detent instead of full height: the sheet opens at that height, expands to fit its content when flicked up, and stops there again on the way down. Scrollable subregions inside stay put while the sheet still has room to grow, so a drag grows the sheet before it scrolls a list — the same hand-off native sheets do. Leave it unset for a single fully-open height.

_Source: src/components/drawer/index.tsx