Skip to content

feat(components): replace vaul drawer with base-ui drawer#10292

Closed
lunaxislu wants to merge 3 commits intoshadcn-ui:mainfrom
lunaxislu:feat/base-ui-drawer
Closed

feat(components): replace vaul drawer with base-ui drawer#10292
lunaxislu wants to merge 3 commits intoshadcn-ui:mainfrom
lunaxislu:feat/base-ui-drawer

Conversation

@lunaxislu
Copy link
Copy Markdown

@lunaxislu lunaxislu commented Apr 4, 2026

Summary

  • Replaced the base registry drawer from a Vaul-based implementation to @base-ui/react.
  • Aligned drawer behavior with the existing Base UI components (Dialog, AlertDialog) so dismiss handling follows the same model in mixed stacks.
  • Updated @base-ui/react from 1.1.0 to 1.3.0.

Changes

  • registry/bases/base/ui/drawer.tsx - Rewritten using the @base-ui/react/drawer API.
  • registry/bases/base/ui/_registry.ts - Changed dependencies: ["vaul"] to ["@base-ui/react"].
  • registry/bases/radix/ui/drawer.tsx - Kept the Radix drawer shell/classes under the cn-radix-drawer-* prefix.
  • Theme CSS (6 styles) - Split drawer tokens into cn-radix-drawer-*, cn-base-ui-drawer-*, and cn-drawer-*.
  • Examples (6 files) - Migrated the API from DrawerContent -> DrawerPopup, direction -> swipeDirection, and asChild -> render.
  • Docs - Updated content/docs/components/base/drawer.mdx.
  • Build output - Regenerated registry outputs via registry:build (styles/base-*/ui/drawer.tsx, public/r/).

Why

vaul and Base UI use different dismiss contracts, so mixed stacks can produce race conditions around Escape and outside-click behavior. The base registry already uses Base UI for Dialog and AlertDialog, so Drawer is being aligned to the same model.

API Migration

Vaul (before) Base UI (after)
direction="bottom" swipeDirection="down"
DrawerContent (includes portal + overlay) DrawerPopup
asChild render prop
data-vaul-drawer-direction data-swipe-direction

Test Plan

  • pnpm registry:build - passed
  • pnpm typecheck - passed
  • pnpm lint - passed
  • pnpm dev - manually verified the drawer examples (demo, dialog, rtl, scrollable-content, sides)
  • Verified that the Radix drawer still works through the Vaul-based registry path

Preview

  • I also deployed a separate preview project to visually compare the Base UI drawer against the existing Vaul drawer:
    https://ui-forge-web.vercel.app/base-ui/drawer
  • This page includes the demo, dialog, rtl, scrollable-content, and sides examples.
  • I also added extra UI examples for other Base UI drawer capabilities.

Context

If this is not the direction the shadcn team wants, or if there are any additional details I should verify for this component, please leave a comment. I'm happy to adjust the scope or close the PR if needed.

@vercel
Copy link
Copy Markdown
Contributor

vercel Bot commented Apr 4, 2026

@lunaxislu is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

@lunaxislu
Copy link
Copy Markdown
Author

Superseded by #10430. The new PR starts fresh from the latest main with only drawer-related changes, restructured commits, and a clearer ownership model.

@lunaxislu lunaxislu closed this Apr 18, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[feat]: cmdk and vaul still use radix with the new base ui implementation

1 participant