export default function Example() {
return (
<Box css={{ display: "flex", flexDirection: "column", gap: "$100" }}>
<Drawer.Root id="set-height">
<Drawer.Trigger>See bottom example</Drawer.Trigger>
<Drawer.Content height="200px">
This drawer is set to 200px height.
</Drawer.Content>
<Drawer.Scrim />
</Drawer.Root>
<Drawer.Root id="set-width">
<Drawer.Trigger>See left example</Drawer.Trigger>
<Drawer.Content width="200px" position="left">
This drawer is set to 200px width.
</Drawer.Content>
<Drawer.Scrim />
</Drawer.Root>
</Box>
);
}
To enter the code editing mode, press Enter. To exit the edit mode, press Escape
You are editing the code. To exit the edit mode, press Escape