Drawer animations are not working correctly

[sglza]

I've been going over this for a bit and can't seem to figure out exactly what is causing it, the Drawer works perfectly on the docs page (both BaseUI's and CossUI's). I believe the issue is in the classes passed to DrawerPrimitive.Popup.

To replicate, I created a new NextJS app and set up CossUI

pnpm create next-app@latest my-app --yes
cd my-app
npx shadcn@latest init @coss/style

Implement a basic Drawer on page.tsx

<Drawer>
  <DrawerTrigger render={<Button variant="outline" />}>
    Open drawer
  </DrawerTrigger>
  <DrawerPopup showBar>
    <DrawerHeader className="text-center">
      <DrawerTitle>Notifications</DrawerTitle>
      <DrawerDescription>
        This is the description of the drawer.
      </DrawerDescription>
    </DrawerHeader>
    <DrawerFooter
      className="justify-center sm:justify-center"
      variant="bare"
    >
      <DrawerClose render={<Button variant="outline" />}>
        Close
      </DrawerClose>
    </DrawerFooter>
  </DrawerPopup>
</Drawer>

Screen.Recording.2026-06-22.at.1.11.36.a.m.mov

[joepetrillo]

I am seeing this as well.

[boldurean]

Hey @pasqualevitiello! I think I found a bug. When I open it, it doesn't slide in from the side/bottom like in the docs, the panel just appears and only the dark backdrop fades. Same thing for every position (bottom, top, left, right).

I dug into it for a while and here's what's going on.

The DrawerViewport sets the inset with [--inset:--spacing(0)]. The problem is that Tailwind v4 turns --spacing(0) into a plain 0 with no unit (I checked the compiled CSS — it really is --inset: 0).

Then the popup uses that value in its open animation, like this (bottom):

data-starting-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))]

So at runtime it becomes translateY(calc(100% + 0px + 0)). And that's the issue CSS calc() doesn't let you add a plain number (0) to a length (100%, 0px). The whole thing is invalid, so the browser just drops the transform. The popup ends up with transform: none, meaning it never starts off-screen, so there's nothing to animate into place.

I confirmed it in the browser. When the drawer opens, the data-starting-style attribute is there and the CSS rule matches, but the transform is none instead of translateY(100%):

on mount: { startingAttr: true, transform: "none", transitionDuration: "0.45s" }

Interesting detail: the base-ui docs example works fine because its start transform is translateY(calc(100% - 3rem + 2px)) – no var(--inset) in there, so no broken calc.

My setup:

• @base-ui/react 1.6.0
• tailwindcss 4.2.2 + @tailwindcss/vite 4.3.1
• React 19 + Vite

Possible fix – just give it a unit so the calc stays valid. In DrawerViewport:

- "fixed inset-0 z-50 [--bleed:--spacing(12)] [--inset:--spacing(0)]",
+ "fixed inset-0 z-50 [--bleed:--spacing(12)] [--inset:0px]",

Workaround for anyone hitting this now:

[data-slot='drawer-popup'] {
  --inset: 0px;
}

Hope this helps, thanks for the great library!

[sglza]

great find! thanks for taking the time to debug it @boldurean