Drawer
A side sheet you can throw. Its position is one spring and the scrim follows it.
$149 once · every Pro piece
Customize
right
left
bottom
Drag the inner edge (or the handle of the bottom sheet) and it follows 1:1, rubber-bands past open, and carries your release speed into the spring.
Install
npx shadcn@latest add @obsyde/drawerNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { Drawer } from '@/components/obsyde/ember/drawer/Drawer';
export function Example() {
return (
<Drawer side="right" />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/drawer/Drawer.tsxcomponentember/drawer/drawer-demo.cssstylesember/drawer/drawer.cssstylesember/drawer/DrawerDemo.tsxdemoember/overlays-kit/demo.csssharedember/overlays-kit/kit.tssharedember/shared/spring.tssharedember/shared/accent.tssharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
sideSide | 'right' | 'left' | 'bottom' | 'right' |
titleTitle | string | 'Details' |