export default function Example() {
  return (
    <Drawer.Root id="scrim-color">
      <Box css={{ display: "flex", flexDirection: "column", gap: "$100" }}>
        <Drawer.Trigger>See example</Drawer.Trigger>
        <p>Click button to see option</p>
      </Box>
      <Drawer.Content height="200px">
        <Drawer.Close />
        This uses red500 as the scrim background
      </Drawer.Content>
      <Drawer.Scrim css={{ backgroundColor: "$red500" }} />
    </Drawer.Root>
  );
}

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