feat!: migrate to reka-ui drawer - #1907
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (19)
💤 Files with no reviewable changes (10)
🚧 Files skipped from review as they are similar to previous changes (7)
📝 WalkthroughWalkthroughThe drawer implementation migrates from ChangesDrawer migration
Estimated code review effort: 4 (Complex) | ~45 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
df9b8a4 to
3d273b8
Compare
4a6f47b to
f0b6f27
Compare
|
@CodeRabbit review --dir apps/v4/registry/bases/reka/ui/drawer |
|
|
|
Thanks for taking this on @sadeghbarati — dropping an unmaintained primitive is very welcome, and the bulk of the migration is thorough. I verified the changes against A few things to address before merge. Blocking1.
|
a6b2146 to
f114084
Compare
style-rhea.css was never touched by cd1072e, so it kept neither the vaul selectors nor the new ones: .cn-drawer-content had no positioning at all and rhea drawers rendered `fixed z-50` with no inset, side or max-height. Its positioning lived in .cn-drawer-popup, a utility no component references. .cn-drawer-header also lacked swipe-direction centering. - port the data-[swipe-direction=*] block to rhea, modeled on luma (same before:-inset design) - drop unused vaul-vue from apps/v4 and the workspace catalog - drop the ComputedRef cast on useForwardPropsEmits, which already returns one; matches the Tooltip root pattern - fix sink demo still passing vaul prop names (direction, top, bottom) Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Point the drawer docs at reka-ui's Drawer page instead of Dialog, now that reka-ui ships a first-class Drawer primitive. Clarify that `swipe-direction` is the direction the drawer dismisses toward, not the side it sits on, and label the sides demos by edge (top/right/bottom/left) so they match DrawerWithSides.vue rather than teaching the opposite vocabulary on the same site. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
f114084 to
8c207bd
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (2)
apps/v4/content/docs/components/drawer.md (1)
104-104: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueUse the configured heading style.
Lines 104 and 114 introduce ATX headings.
markdownlint-cli2reports MD003 because this document requires setext headings. Rewrite these headings, or change the rule deliberately.Also applies to: 114-114
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/v4/content/docs/components/drawer.md` at line 104, Update the headings introduced near “Scrollable Content” and the corresponding heading near line 114 to use the document’s configured setext style instead of ATX syntax, preserving their existing heading levels and text.Source: Linters/SAST tools
apps/v4/styles/reka-sera/ui/drawer/DrawerContent.vue (1)
33-44: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winAdd smoke coverage for all four
swipe-directionvalues.These selectors control drawer placement, animation, and handle visibility. Add one smoke case for
up,down,left, andrightand verify the matching direction attributes and classes. This protects the physical-edge mapping from future regressions.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/v4/styles/reka-sera/ui/drawer/DrawerContent.vue` around lines 33 - 44, Add smoke coverage for DrawerContent covering swipe-direction values up, down, left, and right. For each case, verify the corresponding direction attribute and its placement, animation, and handle-visibility classes, including the physical-edge mapping defined in the DrawerContent class list.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/v4/public/r/styles/new-york-v4/tree.json`:
- Around line 3-5: Remove the empty tree registry entry identified by the
"name": "tree" item, then regenerate the apps/v4/public/r registry output so the
published registry no longer exposes a fileless registry:ui item.
In `@apps/v4/public/r/styles/reka-luma/drawer.json`:
- Line 41: The DrawerOverlay styling uses unsupported data-open/data-closed
variants. Update the class list in DrawerOverlay.vue and its generated
drawer.json artifact to use data-[state=open]: and data-[state=closed]: for the
open/closed animation and opacity classes.
In `@apps/v4/styles/reka-lyra/ui/drawer/DrawerOverlay.vue`:
- Around line 2-8: Update the overlay class definitions in DrawerOverlay.vue for
apps/v4/styles/reka-lyra/ui/drawer/DrawerOverlay.vue (lines 2-8) and
apps/v4/styles/reka-vega/ui/drawer/DrawerOverlay.vue (lines 2-8) to use Reka
UI’s data-state selectors: replace data-open/data-closed variants with
data-[state=open] and data-[state=closed] equivalents on Line 17.
In `@apps/v4/styles/reka-maia/ui/drawer/Drawer.vue`:
- Around line 2-9: Update the drawer documentation in drawer.md to explain that
the removed shouldScaleBackground: true default is no longer applied, and
document how to preserve the background scaling effect in Reka UI using the
appropriate drawer indentation components.
In `@apps/v4/styles/reka-mira/ui/drawer/DrawerOverlay.vue`:
- Around line 2-8: Update the overlay animation classes in the DrawerOverlay
component to use Reka UI’s data-state variants: replace data-open and
data-closed selectors with data-[state=open] and data-[state=closed], preserving
the existing animation behavior.
In `@apps/v4/styles/reka-nova/ui/drawer/Drawer.vue`:
- Around line 2-9: Update the Drawer documentation and relevant migration
guidance to explicitly state that the previous background-scaling behavior is no
longer provided because DrawerRootProps lacks shouldScaleBackground. If Reka UI
primitives support recreating it, document that migration path using the
applicable drawer primitives.
In `@apps/v4/styles/reka-sera/ui/drawer/Drawer.vue`:
- Around line 2-9: Document the Reka UI drawer background-scaling migration in
the relevant drawer documentation or migration notes: explain that
DrawerRootProps.shouldScaleBackground is no longer supported and direct
consumers to use the DrawerIndent and DrawerIndentBackground primitives instead.
---
Nitpick comments:
In `@apps/v4/content/docs/components/drawer.md`:
- Line 104: Update the headings introduced near “Scrollable Content” and the
corresponding heading near line 114 to use the document’s configured setext
style instead of ATX syntax, preserving their existing heading levels and text.
In `@apps/v4/styles/reka-sera/ui/drawer/DrawerContent.vue`:
- Around line 33-44: Add smoke coverage for DrawerContent covering
swipe-direction values up, down, left, and right. For each case, verify the
corresponding direction attribute and its placement, animation, and
handle-visibility classes, including the physical-edge mapping defined in the
DrawerContent class list.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: a2cfc317-f06e-4c7d-b903-69febd2738e7
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (120)
apps/v4/components/_internal/sink/DrawerDemo.vueapps/v4/components/demo/DrawerScrollableContent.vueapps/v4/components/demo/DrawerSides.vueapps/v4/content/docs/.contribution.mdapps/v4/content/docs/components/drawer.mdapps/v4/package.jsonapps/v4/public/r/index.jsonapps/v4/public/r/styles/new-york-v4/drawer.jsonapps/v4/public/r/styles/new-york-v4/registry.jsonapps/v4/public/r/styles/new-york-v4/tree.jsonapps/v4/public/r/styles/reka-luma/drawer.jsonapps/v4/public/r/styles/reka-luma/registry.jsonapps/v4/public/r/styles/reka-lyra/drawer.jsonapps/v4/public/r/styles/reka-lyra/registry.jsonapps/v4/public/r/styles/reka-maia/drawer.jsonapps/v4/public/r/styles/reka-maia/registry.jsonapps/v4/public/r/styles/reka-mira/drawer.jsonapps/v4/public/r/styles/reka-mira/registry.jsonapps/v4/public/r/styles/reka-nova/drawer.jsonapps/v4/public/r/styles/reka-nova/registry.jsonapps/v4/public/r/styles/reka-rhea/drawer.jsonapps/v4/public/r/styles/reka-rhea/registry.jsonapps/v4/public/r/styles/reka-sera/drawer.jsonapps/v4/public/r/styles/reka-sera/registry.jsonapps/v4/public/r/styles/reka-vega/drawer.jsonapps/v4/public/r/styles/reka-vega/registry.jsonapps/v4/registry.jsonapps/v4/registry/bases/reka/blocks/github.vueapps/v4/registry/bases/reka/examples/drawer/DrawerScrollableContent.vueapps/v4/registry/bases/reka/examples/drawer/DrawerWithSides.vueapps/v4/registry/bases/reka/ui/_registry.tsapps/v4/registry/bases/reka/ui/drawer/Drawer.vueapps/v4/registry/bases/reka/ui/drawer/DrawerClose.vueapps/v4/registry/bases/reka/ui/drawer/DrawerContent.vueapps/v4/registry/bases/reka/ui/drawer/DrawerDescription.vueapps/v4/registry/bases/reka/ui/drawer/DrawerOverlay.vueapps/v4/registry/bases/reka/ui/drawer/DrawerTitle.vueapps/v4/registry/bases/reka/ui/drawer/DrawerTrigger.vueapps/v4/registry/new-york-v4/ui/_registry.tsapps/v4/registry/new-york-v4/ui/drawer/Drawer.vueapps/v4/registry/new-york-v4/ui/drawer/DrawerClose.vueapps/v4/registry/new-york-v4/ui/drawer/DrawerContent.vueapps/v4/registry/new-york-v4/ui/drawer/DrawerDescription.vueapps/v4/registry/new-york-v4/ui/drawer/DrawerOverlay.vueapps/v4/registry/new-york-v4/ui/drawer/DrawerTitle.vueapps/v4/registry/new-york-v4/ui/drawer/DrawerTrigger.vueapps/v4/registry/styles/style-luma.cssapps/v4/registry/styles/style-lyra.cssapps/v4/registry/styles/style-maia.cssapps/v4/registry/styles/style-mira.cssapps/v4/registry/styles/style-nova.cssapps/v4/registry/styles/style-rhea.cssapps/v4/registry/styles/style-sera.cssapps/v4/registry/styles/style-vega.cssapps/v4/scripts/crawl-content.tsapps/v4/styles/reka-luma/ui/drawer/Drawer.vueapps/v4/styles/reka-luma/ui/drawer/DrawerClose.vueapps/v4/styles/reka-luma/ui/drawer/DrawerContent.vueapps/v4/styles/reka-luma/ui/drawer/DrawerDescription.vueapps/v4/styles/reka-luma/ui/drawer/DrawerHeader.vueapps/v4/styles/reka-luma/ui/drawer/DrawerOverlay.vueapps/v4/styles/reka-luma/ui/drawer/DrawerTitle.vueapps/v4/styles/reka-luma/ui/drawer/DrawerTrigger.vueapps/v4/styles/reka-lyra/ui/drawer/Drawer.vueapps/v4/styles/reka-lyra/ui/drawer/DrawerClose.vueapps/v4/styles/reka-lyra/ui/drawer/DrawerContent.vueapps/v4/styles/reka-lyra/ui/drawer/DrawerDescription.vueapps/v4/styles/reka-lyra/ui/drawer/DrawerHeader.vueapps/v4/styles/reka-lyra/ui/drawer/DrawerOverlay.vueapps/v4/styles/reka-lyra/ui/drawer/DrawerTitle.vueapps/v4/styles/reka-lyra/ui/drawer/DrawerTrigger.vueapps/v4/styles/reka-maia/ui/drawer/Drawer.vueapps/v4/styles/reka-maia/ui/drawer/DrawerClose.vueapps/v4/styles/reka-maia/ui/drawer/DrawerContent.vueapps/v4/styles/reka-maia/ui/drawer/DrawerDescription.vueapps/v4/styles/reka-maia/ui/drawer/DrawerHeader.vueapps/v4/styles/reka-maia/ui/drawer/DrawerOverlay.vueapps/v4/styles/reka-maia/ui/drawer/DrawerTitle.vueapps/v4/styles/reka-maia/ui/drawer/DrawerTrigger.vueapps/v4/styles/reka-mira/ui/drawer/Drawer.vueapps/v4/styles/reka-mira/ui/drawer/DrawerClose.vueapps/v4/styles/reka-mira/ui/drawer/DrawerContent.vueapps/v4/styles/reka-mira/ui/drawer/DrawerDescription.vueapps/v4/styles/reka-mira/ui/drawer/DrawerHeader.vueapps/v4/styles/reka-mira/ui/drawer/DrawerOverlay.vueapps/v4/styles/reka-mira/ui/drawer/DrawerTitle.vueapps/v4/styles/reka-mira/ui/drawer/DrawerTrigger.vueapps/v4/styles/reka-nova/ui/drawer/Drawer.vueapps/v4/styles/reka-nova/ui/drawer/DrawerClose.vueapps/v4/styles/reka-nova/ui/drawer/DrawerContent.vueapps/v4/styles/reka-nova/ui/drawer/DrawerDescription.vueapps/v4/styles/reka-nova/ui/drawer/DrawerHeader.vueapps/v4/styles/reka-nova/ui/drawer/DrawerOverlay.vueapps/v4/styles/reka-nova/ui/drawer/DrawerTitle.vueapps/v4/styles/reka-nova/ui/drawer/DrawerTrigger.vueapps/v4/styles/reka-rhea/ui/drawer/Drawer.vueapps/v4/styles/reka-rhea/ui/drawer/DrawerClose.vueapps/v4/styles/reka-rhea/ui/drawer/DrawerContent.vueapps/v4/styles/reka-rhea/ui/drawer/DrawerDescription.vueapps/v4/styles/reka-rhea/ui/drawer/DrawerHeader.vueapps/v4/styles/reka-rhea/ui/drawer/DrawerOverlay.vueapps/v4/styles/reka-rhea/ui/drawer/DrawerTitle.vueapps/v4/styles/reka-rhea/ui/drawer/DrawerTrigger.vueapps/v4/styles/reka-sera/ui/drawer/Drawer.vueapps/v4/styles/reka-sera/ui/drawer/DrawerClose.vueapps/v4/styles/reka-sera/ui/drawer/DrawerContent.vueapps/v4/styles/reka-sera/ui/drawer/DrawerDescription.vueapps/v4/styles/reka-sera/ui/drawer/DrawerHeader.vueapps/v4/styles/reka-sera/ui/drawer/DrawerOverlay.vueapps/v4/styles/reka-sera/ui/drawer/DrawerTitle.vueapps/v4/styles/reka-sera/ui/drawer/DrawerTrigger.vueapps/v4/styles/reka-vega/ui/drawer/Drawer.vueapps/v4/styles/reka-vega/ui/drawer/DrawerClose.vueapps/v4/styles/reka-vega/ui/drawer/DrawerContent.vueapps/v4/styles/reka-vega/ui/drawer/DrawerDescription.vueapps/v4/styles/reka-vega/ui/drawer/DrawerHeader.vueapps/v4/styles/reka-vega/ui/drawer/DrawerOverlay.vueapps/v4/styles/reka-vega/ui/drawer/DrawerTitle.vueapps/v4/styles/reka-vega/ui/drawer/DrawerTrigger.vuepnpm-workspace.yaml
💤 Files with no reviewable changes (15)
- apps/v4/package.json
- apps/v4/public/r/styles/reka-maia/registry.json
- apps/v4/registry/bases/reka/ui/_registry.ts
- apps/v4/public/r/styles/reka-rhea/registry.json
- apps/v4/public/r/styles/reka-lyra/registry.json
- apps/v4/public/r/styles/new-york-v4/registry.json
- apps/v4/public/r/styles/reka-luma/registry.json
- apps/v4/public/r/styles/reka-vega/registry.json
- apps/v4/public/r/styles/reka-nova/registry.json
- apps/v4/public/r/styles/reka-mira/registry.json
- apps/v4/public/r/styles/reka-sera/registry.json
- pnpm-workspace.yaml
- apps/v4/public/r/index.json
- apps/v4/scripts/crawl-content.ts
- apps/v4/registry/new-york-v4/ui/_registry.ts
| "name": "tree", | ||
| "files": [], | ||
| "type": "registry:ui" |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟡 Minor | ⚡ Quick win
Remove the empty public registry item.
tree is published as a registry:ui item with no files. A registry client can discover and request it but receives no component. Remove the source entry and regenerate apps/v4/public/r.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/v4/public/r/styles/new-york-v4/tree.json` around lines 3 - 5, Remove the
empty tree registry entry identified by the "name": "tree" item, then regenerate
the apps/v4/public/r registry output so the published registry no longer exposes
a fileless registry:ui item.
| { | ||
| "path": "styles/reka-luma/ui/drawer/DrawerOverlay.vue", | ||
| "content": "<script lang=\"ts\" setup>\nimport type { DialogOverlayProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { DrawerOverlay } from 'vaul-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n\n<template>\n <DrawerOverlay\n data-slot=\"drawer-overlay\"\n v-bind=\"delegatedProps\"\n :class=\"cn('data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/30 supports-backdrop-filter:backdrop-blur-sm fixed inset-0 z-50', props.class)\"\n />\n</template>\n", | ||
| "content": "<script lang=\"ts\" setup>\nimport type { DrawerOverlayProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { DrawerOverlay } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DrawerOverlayProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n\n<template>\n <DrawerOverlay\n data-slot=\"drawer-overlay\"\n v-bind=\"delegatedProps\"\n :class=\"cn('data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/30 supports-backdrop-filter:backdrop-blur-sm fixed inset-0 z-50', props.class)\"\n />\n</template>\n", |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Confirm the declared Reka UI version and locate all affected variants.
rg -n -C 2 '"reka-ui"' apps/v4/package.json pnpm-lock.yaml
rg -n -C 2 'data-(open|closed):' \
apps/v4/styles/reka-luma/ui/drawer/DrawerOverlay.vue \
apps/v4/public/r/styles/reka-luma/drawer.jsonRepository: unovue/shadcn-vue
Length of output: 2055
🌐 Web query:
reka-ui drawer drawer-overlay data-state open closed documentation
💡 Result:
In Reka UI, the Drawer component and its sub-components, including DrawerOverlay and DrawerContent, utilize the [data-state] attribute to reflect their current visibility state [1]. The [data-state] attribute on these elements is set to either "open" or "closed" [1]. These attributes are primarily used for styling, allowing you to apply CSS transitions or animations based on the drawer's state [1]. For example, you can target these states in your CSS or Tailwind utility classes to handle entry and exit animations [1]:.DrawerContent[data-state='open'] { /* Styles for open state / }.DrawerContent[data-state='closed'] { / Styles for closed state */ } For the DrawerOverlay specifically, the [data-state] attribute is also exposed, as it reflects the drawer's visibility when the drawer is in modal mode [1]. Additionally, components like DrawerContent and DrawerOverlay may expose other data attributes, such as [data-swipe-direction] and [data-swiping], which provide information about user interactions like dragging or swiping [1]. The official Reka UI documentation provides a comprehensive guide on the Drawer anatomy and API reference, including full tables of these data attributes for each sub-component [1].
Citations:
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Check which Reka UI releases define these artifacts and whether they used data-open/data-closed.
for url in \
"https://unpkg.com/shadcn-vue@2.2.0/dist/registry/styles/reka-luma/drawer.json" \
"https://unpkg.com/shadcn-vue@latest/dist/registry/styles/reka-luma/drawer.json"
do
echo "===== $url ====="
python3 - <<'PY' "$url"
import json, sys, re, urllib.request
url = sys.argv[1]
try:
with urllib.request.urlopen(url, timeout=20) as r:
data = r.read().decode()
registry = json.loads(data)
except Exception as e:
print(f"FAILED: {e}")
sys.exit(0)
items = registry.get("items", [])
print("items:", len(items))
for item in registry.get("items", []):
if item.get("name") == "drawer":
for r in item.get("registryDependencies", []):
if "drawer" in r:
print("registryDependency:", r)
print("DrawerOverlay content excerpt:")
for c in item.get("components", []):
if c.get("source") == "styles/reka-luma/ui/drawer/DrawerOverlay.vue":
ctx = c.get("content", "")
print(ctx[:800])
print("has data-open/data-closed variants:", bool(re.search(r"data-(open|closed):", ctx)))
print("has data-[state=open]/data-[state=closed] variants:", bool(re.search(r"data-\[state=(open|closed)\]:", ctx)))
break
PY
doneRepository: unovue/shadcn-vue
Length of output: 622
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Check available package metadata without network artifacts.
if [ -f apps/v4/package.json ]; then
echo "===== apps/v4 package json catalog fields ====="
python3 - <<'PY'
import json
with open('apps/v4/package.json', 'r') as f:
p=json.load(f)
for part in ['dependencies','devDependencies','pnpm.catalog','pnpm.catalogs']:
if part in p:
print(part, p[part])
PY
fi
echo "===== package manager lock files ====="
git ls-files | rg '(^|/)(package.json|pnpm-lock.yaml|pnpm-workspace.yaml|pnpm-lock.yaml$)' || true
echo "===== local references to data-open/data-closed in reka/drawer ====="
rg -n -C 2 'data-(open|closed):|data-\[state=(open|closed)\]:' apps/v4 || true
echo "===== candidate registry files ====="
git ls-files | rg 'apps/v4/public|r/styles|styles/reka-luma/ui/drawer|registry' || trueRepository: unovue/shadcn-vue
Length of output: 50374
Use data-state variants for the drawer overlay.
DrawerOverlay mirrors Reka UI’s [data-state="open"] / [data-state="closed"] attributes, so data-open: and data-closed: do not match. Update both apps/v4/styles/reka-luma/ui/drawer/DrawerOverlay.vue and the generated artifact apps/v4/public/r/styles/reka-luma/drawer.json to use data-[state=open]: / data-[state=closed]:.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/v4/public/r/styles/reka-luma/drawer.json` at line 41, The DrawerOverlay
styling uses unsupported data-open/data-closed variants. Update the class list
in DrawerOverlay.vue and its generated drawer.json artifact to use
data-[state=open]: and data-[state=closed]: for the open/closed animation and
opacity classes.
| import type { DrawerOverlayProps } from 'reka-ui' | ||
| import type { HTMLAttributes } from 'vue' | ||
| import { reactiveOmit } from '@vueuse/core' | ||
| import { DrawerOverlay } from 'vaul-vue' | ||
| import { DrawerOverlay } from 'reka-ui' | ||
| import { cn } from '@/lib/utils' | ||
|
|
||
| const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>() | ||
| const props = defineProps<DrawerOverlayProps & { class?: HTMLAttributes['class'] }>() |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
files=(
apps/v4/styles/reka-lyra/ui/drawer/DrawerOverlay.vue
apps/v4/styles/reka-vega/ui/drawer/DrawerOverlay.vue
)
for file in "${files[@]}"; do
if rg -n 'data-(open|closed):' "$file"; then
echo "Old overlay state selectors remain in $file" >&2
exit 1
fi
rg -n 'data-\[state=(open|closed)\]:' "$file"
doneRepository: unovue/shadcn-vue
Length of output: 442
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Files with drawer overlay state selectors:"
rg -n 'data-(open|closed):|data-\[state=(open|closed)\]:' apps/v4/styles/reka-lyra/ui apps/v4/styles/reka-vega/ui || true
echo
echo "Dependency versions mentioning reka-ui:"
rg -n '"reka-ui"|reka-ui' package.json apps/v4/package.json pnpm-lock.yaml yarn.lock package-lock.json 2>/dev/null | head -80 || trueRepository: unovue/shadcn-vue
Length of output: 33372
🌐 Web query:
Reka UI DrawerOverlay data-state open closed documentation
💡 Result:
In Reka UI, the DrawerOverlay component exposes a data-state attribute that reflects the current state of the drawer [1]. This attribute is used to style the overlay when the drawer is open or closed [1][2]. The data-state attribute on the DrawerOverlay component holds one of two values: - "open": Present when the drawer is open [1]. - "closed": Present when the drawer is closed [1]. You can target this attribute in your CSS or styling solution to apply styles based on the drawer's visibility. For example, using CSS:.DrawerOverlay[data-state="open"] { /* Styles for open state / }.DrawerOverlay[data-state="closed"] { / Styles for closed state */ } Or using Tailwind CSS variants: The DrawerOverlay is a primitive part of the Drawer component and is only rendered when the drawer is set to modal mode [1]. It acts as a backdrop that covers the inert portion of the view while the drawer is active [1]. Additionally, other data attributes may be present on the overlay depending on user interaction, such as data-swiping, data-swipe-direction, or data-nested-drawer-open [1].
Citations:
Use Reka UI state selectors for both migrated drawer overlays.
DrawerOverlay exposes data-state="open|_closed", so data-open: and data-closed: do not match the rendered attrs. Update both files’ Line 17 classes to data-[state=open]:... and data-[state=closed]:....
apps/v4/styles/reka-lyra/ui/drawer/DrawerOverlay.vueapps/v4/styles/reka-vega/ui/drawer/DrawerOverlay.vue
📍 Affects 2 files
apps/v4/styles/reka-lyra/ui/drawer/DrawerOverlay.vue#L2-L8(this comment)apps/v4/styles/reka-vega/ui/drawer/DrawerOverlay.vue#L2-L8
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/v4/styles/reka-lyra/ui/drawer/DrawerOverlay.vue` around lines 2 - 8,
Update the overlay class definitions in DrawerOverlay.vue for
apps/v4/styles/reka-lyra/ui/drawer/DrawerOverlay.vue (lines 2-8) and
apps/v4/styles/reka-vega/ui/drawer/DrawerOverlay.vue (lines 2-8) to use Reka
UI’s data-state selectors: replace data-open/data-closed variants with
data-[state=open] and data-[state=closed] equivalents on Line 17.
Source: MCP tools
| import type { DrawerRootEmits, DrawerRootProps } from 'reka-ui' | ||
| import { DrawerRoot, useForwardPropsEmits } from 'reka-ui' | ||
|
|
||
| const props = withDefaults(defineProps<DrawerRootProps>(), { | ||
| shouldScaleBackground: true, | ||
| }) | ||
| const props = defineProps<DrawerRootProps>() | ||
|
|
||
| const emits = defineEmits<DrawerRootEmits>() | ||
|
|
||
| const forwarded = useForwardPropsEmits(props, emits) as ComputedRef<Record<string, unknown>> | ||
| const forwarded = useForwardPropsEmits(props, emits) |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
rg -n -i 'shouldScaleBackground|background scaling|breaking' \
apps/v4/content/docs/components/drawer.mdRepository: unovue/shadcn-vue
Length of output: 155
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Relevant docs files:"
git ls-files | rg '(^apps/v4/content/docs/components/|apps/v4/content/docs/.*)draw(er|)' || true
echo
echo "Drawer docs around heading/props/docs:"
if [ -f apps/v4/content/docs/components/drawer.md ]; then
nl -ba apps/v4/content/docs/components/drawer.md | sed -n '1,260p'
else
echo "apps/v4/content/docs/components/drawer.md not found"
fi
echo
echo "Drawer component:"
if [ -f apps/v4/styles/reka-maia/ui/drawer/Drawer.vue ]; then
nl -ba apps/v4/styles/reka-maia/ui/drawer/Drawer.vue | sed -n '1,120p'
fi
echo
echo "Search for shouldScaleBackground across repo:"
rg -n -i 'shouldScaleBackground|scale.*background|background.*scale' . || trueRepository: unovue/shadcn-vue
Length of output: 299
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Drawer docs:"
cat -n apps/v4/content/docs/components/drawer.md | sed -n '1,280p'
echo
echo "Drawer component:"
cat -n apps/v4/styles/reka-maia/ui/drawer/Drawer.vue | sed -n '1,120p'
echo
echo "Search for shouldScaleBackground across repo:"
rg -n -i 'shouldScaleBackground|scale.*background|background.*scale' . || trueRepository: unovue/shadcn-vue
Length of output: 50374
🏁 Script executed:
#!/bin/bash
set -euo pipefail
DOC="apps/v4/content/docs/components/drawer.md"
WRAPPER="apps/v4/styles/reka-maia/ui/drawer/Drawer.vue"
echo "Drawer docs: matches"
rg -n -i 'shouldScaleBackground|scale|background|breaking|migrate|migration|should-scale|scale-background' "$DOC" || true
echo
echo "Drawer docs: size"
wc -l "$DOC"
echo "Drawer docs: first 320 lines"
sed -n '1,320p' "$DOC"
echo
echo "Drawer wrapper"
sed -n '1,120p' "$WRAPPER"
echo
echo "Scoped matches for shouldScaleBackground"
rg -n -i 'shouldScaleBackground|should-scale-background|shouldScale' . || trueRepository: unovue/shadcn-vue
Length of output: 12209
🌐 Web query:
Reka UI Drawer shouldScaleBackground background scaling breaking migration
💡 Result:
In Reka UI, the Drawer primitive does not use the specific prop shouldScaleBackground found in the original vaul library [1][2]. Therefore, there is no direct migration path or breaking change related to this specific prop name when moving to Reka UI's native Drawer component [3][4]. The Reka UI Drawer handles background scaling behavior differently through dedicated components rather than a single boolean prop [2]: 1. Architectural Shift: Reka UI implements the "card stack" effect (where page content scales or shifts behind the drawer) by using explicit DrawerIndent and DrawerIndentBackground components [2]. 2. Functionality: Instead of disabling a prop to resolve mobile UI glitches or styling preferences, you control the background effect by choosing whether or not to include these components in your layout [2]. 3. Migration Context: When migrating from projects that previously used vaul-vue (which relied on shouldScaleBackground), you should remove that prop and restructure your implementation to use the Reka UI Drawer anatomy, specifically by adding DrawerIndent to wrap your page content if that visual effect is desired [5][2]. If you were previously using shouldScaleBackground={false} to prevent mobile-specific layout glitches (such as viewport resizing or flicker), you can achieve a similar effect in Reka UI by simply omitting the DrawerIndent and DrawerIndentBackground components from your application wrapper [1][2].
Citations:
- 1: Shadcn drawer gliching when closing action on mobile view shadcn-ui/ui#6285
- 2: https://reka-ui.com/docs/components/drawer
- 3: https://reka-ui.com/docs/overview/releases
- 4: https://reka-ui.com/docs/guides/migration
- 5: feat!: migrate from
vaul-vuetoreka-uiDrawer #1887
Add documentation for the removed shouldScaleBackground migration behavior.
Drawer.vue forwards DrawerRootProps without the previous shouldScaleBackground: true default. Update apps/v4/content/docs/components/drawer.md to state how to preserve the scaling effect in Reka UI, such as using the Reka UI drawer indentation components.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/v4/styles/reka-maia/ui/drawer/Drawer.vue` around lines 2 - 9, Update the
drawer documentation in drawer.md to explain that the removed
shouldScaleBackground: true default is no longer applied, and document how to
preserve the background scaling effect in Reka UI using the appropriate drawer
indentation components.
| import type { DrawerOverlayProps } from 'reka-ui' | ||
| import type { HTMLAttributes } from 'vue' | ||
| import { reactiveOmit } from '@vueuse/core' | ||
| import { DrawerOverlay } from 'vaul-vue' | ||
| import { DrawerOverlay } from 'reka-ui' | ||
| import { cn } from '@/lib/utils' | ||
|
|
||
| const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>() | ||
| const props = defineProps<DrawerOverlayProps & { class?: HTMLAttributes['class'] }>() |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
rg -n 'reka-ui|data-open:|data-closed:|data-\[state=(open|closed)\]' \
apps/v4/package.json \
apps/v4/styles/reka-mira/ui/drawer/DrawerOverlay.vue \
apps/v4/styles/reka-lyra/ui/drawer/DrawerContent.vueRepository: unovue/shadcn-vue
Length of output: 1775
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== DrawerOverlay.vue =="
cat -n apps/v4/styles/reka-mira/ui/drawer/DrawerOverlay.vue
echo
echo "== Nearby drawer style files =="
fd -a 'Drawer\w+\.vue$' apps/v4/styles | sed 's#^\./##' | sort
echo
echo "== package catalog references =="
fd -a '(^package.json$|pnpm-lock.yaml$|pnpm-workspace.yaml$)' . -d 3 | sortRepository: unovue/shadcn-vue
Length of output: 6130
🌐 Web query:
Reka UI DrawerOverlay data-state open closed documentation
💡 Result:
In Reka UI, the DrawerOverlay component uses the data-state attribute to represent its current visibility status, which is essential for applying CSS animations and transitions [1][2]. The data-state attribute for DrawerOverlay can have the following values [2]: - open: Applied when the drawer is in an open state [2][3]. - closed: Applied when the drawer is in a closed state [2][3]. These attributes allow you to target the component in CSS to define enter and exit animations [1][2]. For example:.DrawerOverlay[data-state='open'] { animation: fadeIn 300ms ease-out; }.DrawerOverlay[data-state='closed'] { animation: fadeOut 300ms ease-in; } Additionally, the DrawerOverlay component may expose other data attributes depending on the drawer's state, such as [2][3]: - [data-swipe-direction]: Indicates the direction of a swipe ("up", "down", "left", "right"). - [data-swiping]: Present while the drawer is being dragged. These data attributes are managed internally by the Drawer's root context and are applied to the component to facilitate styling and interaction feedback [2][3][4]. For further implementation details, you can refer to the official Reka UI documentation at reka-ui.com/docs/components/drawer [2].
Citations:
- 1: https://readmex.com/en-US/unovue/reka-ui/page-65d24051f-120b-452b-802b-8ca434d35923
- 2: https://reka-ui.com/docs/components/drawer
- 3: https://app.unpkg.com/reka-ui@2.10.0/files/dist/Drawer/DrawerOverlayImpl.cjs
- 4: https://deepwiki.com/unovue/reka-ui/2-component-library
Use Reka UI state variants for the overlay animation.
DrawerOverlay uses data-state, so data-open: and data-closed: at line 17 will not select the overlay open/closed state. Update these to data-[state=open]:* and data-[state=closed]:* to match the installed Reka UI contract.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/v4/styles/reka-mira/ui/drawer/DrawerOverlay.vue` around lines 2 - 8,
Update the overlay animation classes in the DrawerOverlay component to use Reka
UI’s data-state variants: replace data-open and data-closed selectors with
data-[state=open] and data-[state=closed], preserving the existing animation
behavior.
Source: MCP tools
| import type { DrawerRootEmits, DrawerRootProps } from 'reka-ui' | ||
| import { DrawerRoot, useForwardPropsEmits } from 'reka-ui' | ||
|
|
||
| const props = withDefaults(defineProps<DrawerRootProps>(), { | ||
| shouldScaleBackground: true, | ||
| }) | ||
| const props = defineProps<DrawerRootProps>() | ||
|
|
||
| const emits = defineEmits<DrawerRootEmits>() | ||
|
|
||
| const forwarded = useForwardPropsEmits(props, emits) as ComputedRef<Record<string, unknown>> | ||
| const forwarded = useForwardPropsEmits(props, emits) |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
rg -n 'shouldScaleBackground|scale.*background|background.*scale|breaking' \
apps/v4/content/docs/components/drawer.mdRepository: unovue/shadcn-vue
Length of output: 155
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== candidate files =="
git ls-files | rg '(^apps/v4/.*/Drawer\.vue$|apps/v4/content/docs/migrations|apps/v4/content/docs/components/drawer\.md|reka-nova|Drawer)' | head -100
echo "== Drawer component relevant part =="
if [ -f apps/v4/styles/reka-nova/ui/drawer/Drawer.vue ]; then
cat -n apps/v4/styles/reka-nova/ui/drawer/Drawer.vue
fi
echo "== references to Drawer component =="
rg -n "DrawerRoot|Drawer\.vue|shouldScaleBackground|Reka UI|reka-ui" apps/v4 -g '!node_modules' | head -200Repository: unovue/shadcn-vue
Length of output: 5155
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== all files with shouldScaleBackground =="
rg -n 'shouldScaleBackground|scaleBackground|scale .*background|background .*scale' apps/v4 -g '!node_modules' -g '!*.lock' -g '!*.json' || true
echo "== apps/v4/styles/reka-luma/ui/drawer/Drawer.vue =="
if [ -f apps/v4/styles/reka-luma/ui/drawer/Drawer.vue ]; then
cat -n apps/v4/styles/reka-luma/ui/drawer/Drawer.vue
fi
echo "== apps/v4/registry/bases/reka/ui/drawer/Drawer.vue =="
if [ -f apps/v4/registry/bases/reka/ui/drawer/Drawer.vue ]; then
cat -n apps/v4/registry/bases/reka/ui/drawer/Drawer.vue
fi
echo "== apps/v4/registry/new-york-v4/ui/drawer/Drawer.vue =="
if [ -f apps/v4/registry/new-york-v4/ui/drawer/Drawer.vue ]; then
cat -n apps/v4/registry/new-york-v4/ui/drawer/Drawer.vue
fi
echo "== drawer docs outline/sections =="
wc -l apps/v4/content/docs/components/drawer.md
sed -n '1,240p' apps/v4/content/docs/components/drawer.md
echo "== migration docs =="
git ls-files apps/v4/content/docs/migrations apps/v4/content/docs | rg -i 'migrat|breaking|upgrad' || trueRepository: unovue/shadcn-vue
Length of output: 14380
🌐 Web query:
reka-ui drawer shouldScaleBackground prop
💡 Result:
The Reka UI Drawer primitive does not utilize a specific shouldScaleBackground prop [1][2]. Reka UI's approach to background scaling and visual depth effects differs from the legacy Vaul component, which did use that specific prop [3]. Instead, Reka UI handles this behavior through dedicated components designed to provide the visual "card stack" or scaling effect [1]: - DrawerIndent: This component wraps the page content that should visually shift, scale, or indent as the drawer is swiped [1]. - DrawerIndentBackground: This component serves as the backdrop layer revealed behind the indented page [1]. These components work by reading the visual state from a parent DrawerProvider and syncing CSS variables (such as --drawer-swipe-progress and --drawer-height) onto their elements to mimic the native iOS-style card stack effect [1]. If you are migrating from a library that previously used Vaul (like older versions of shadcn-vue), note that Vaul-specific props like shouldScaleBackground are no longer directly supported in the Reka UI Drawer API [3]. You should replace those implementations by incorporating the DrawerIndent and DrawerIndentBackground primitives provided by Reka UI [1].
Citations:
- 1: https://reka-ui.com/docs/components/drawer
- 2: unovue/reka-ui@1639d85
- 3: https://ui.shadcn.com/docs/components/base/drawer
Document the removed background-scaling behavior.
DrawerRootProps no longer includes shouldScaleBackground, and the Reka UI drawer API does not expose a background scale prop. Update apps/v4/content/docs/components/drawer.md and migration docs to state that the component no longer provides the previous background-scaling behavior, or document the Reka migration path if users can recreate it with the indicated drawer primitives.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/v4/styles/reka-nova/ui/drawer/Drawer.vue` around lines 2 - 9, Update the
Drawer documentation and relevant migration guidance to explicitly state that
the previous background-scaling behavior is no longer provided because
DrawerRootProps lacks shouldScaleBackground. If Reka UI primitives support
recreating it, document that migration path using the applicable drawer
primitives.
| import type { DrawerRootEmits, DrawerRootProps } from 'reka-ui' | ||
| import { DrawerRoot, useForwardPropsEmits } from 'reka-ui' | ||
|
|
||
| const props = withDefaults(defineProps<DrawerRootProps>(), { | ||
| shouldScaleBackground: true, | ||
| }) | ||
| const props = defineProps<DrawerRootProps>() | ||
|
|
||
| const emits = defineEmits<DrawerRootEmits>() | ||
|
|
||
| const forwarded = useForwardPropsEmits(props, emits) as ComputedRef<Record<string, unknown>> | ||
| const forwarded = useForwardPropsEmits(props, emits) |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift
🧩 Analysis chain
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
rg -n -C 3 'shouldScaleBackground|swipe-direction|direction' \
apps/v4/content/docs/components/drawer.md \
apps/v4/components \
apps/v4/styles \
apps/v4/registryRepository: unovue/shadcn-vue
Length of output: 50374
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Package references and current Drawer:"
sed -n '1,80p' apps/v4/styles/reka-sera/ui/drawer/Drawer.vue
echo
echo "Search for shouldScaleBackground only:"
rg -n --hidden --glob '!node_modules' --glob '!dist' --glob '!build' 'shouldScaleBackground|Reka|reka-ui|vaul' .
echo
echo "Reka Drawer usages in styles:"
rg -n --hidden --glob '!node_modules' --glob '!dist' --glob '!build' 'DrawerRoot|useForwardPropsEmits|DrawerProps|DrawerEmits' apps/v4/styles apps/v4/components apps/v4/registry | head -200Repository: unovue/shadcn-vue
Length of output: 50374
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Current Drawer.vue:"
sed -n '1,80p' apps/v4/styles/reka-sera/ui/drawer/Drawer.vue
echo
echo "Previous Drawer.vue (branch/history if available):"
git show HEAD~:apps/v4/styles/reka-sera/ui/drawer/Drawer.vue 2>/dev/null | sed -n '1,120p' || true
echo
echo "Focused shouldScaleBackground occurrences (small files):"
rg -n --hidden -g '!node_modules' -g '!dist' -g '!build' 'shouldScaleBackground' apps/v4/content apps/v4/components apps/v4/styles apps/v4/registry apps/v4 2>/dev/null || true
echo
echo "Reka package lock/version:"
rg -n -C 2 '"reka-ui"|reka-ui@|vaul' package.json apps/v4/package.json pnpm-lock.yaml package-lock.json yarn.lock 2>/dev/null | head -200 || true
echo
echo "Git diff stat/name/status for this PR (if available):"
git diff --stat HEAD~ 2>/dev/null || true
git diff -- apps/v4/styles/reka-sera/ui/drawer/Drawer.vue | sed -n '1,160p' || trueRepository: unovue/shadcn-vue
Length of output: 7153
🌐 Web query:
reka-ui DrawerRoot props shouldScaleBackground vaul-vue shouldScaleBackground documentation
💡 Result:
In the transition from the unmaintained vaul-vue library to the built-in Drawer primitive in reka-ui, the shouldScaleBackground property has been superseded by a new implementation approach [1][2]. In vaul-vue, shouldScaleBackground was a direct prop on DrawerRoot [3]. In reka-ui, this functionality is achieved through dedicated components designed to provide more granular control over the scaling effect [4][5]: 1. DrawerIndent: This component should wrap the page content that you want to scale or shift when the drawer is swiped [4]. It automatically reads the visual state from the DrawerProvider and updates the --drawer-swipe-progress and --drawer-height CSS variables [4]. 2. DrawerIndentBackground: This component acts as a companion to DrawerIndent, representing the backdrop layer that peeks out as the page scales down [4]. Therefore, you no longer use a shouldScaleBackground prop on DrawerRoot. Instead, you wrap your application's main content with the DrawerIndent component to enable the "card stack" or scale-background effect [4].
Citations:
- 1: [Feature]: Drawer reka-ui#2515
- 2: feat!: migrate from
vaul-vuetoreka-uiDrawer #1887 - 3: https://github.com/radix-vue/vaul-vue/blob/main/packages/vaul-vue/src/controls.ts
- 4: https://reka-ui.com/docs/components/drawer
- 5: unovue/reka-ui@e0ec86c6
Document the Reka UI background scaling migration.
Reka UI drawer components no longer use DrawerRootProps.shouldScaleBackground; consumers must use the DrawerIndent / DrawerIndentBackground primitives instead. The Reka UI drawer docs do not mention this conversion, so add a breaking-change note or guidance in the drawer docs or migration notes.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/v4/styles/reka-sera/ui/drawer/Drawer.vue` around lines 2 - 9, Document
the Reka UI drawer background-scaling migration in the relevant drawer
documentation or migration notes: explain that
DrawerRootProps.shouldScaleBackground is no longer supported and direct
consumers to use the DrawerIndent and DrawerIndentBackground primitives instead.
DrawerRoot renders `renderSlot(...)` with no host element, so the attribute lands in $attrs, never reaches the DOM, and Vue dev-warns about extraneous non-props attributes on a fragment root. Nothing selects [data-slot=drawer], so removing it is lossless. The other data-slot attributes in the drawer sit on real elements and are unaffected. Dialog and Sheet have the same issue via DialogRoot and are left for a separate change. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2 participants
🔗 Linked issue
Close #687
Close #775
Close #953
❓ Type of change
📚 Description
Since main
vaulis unmaintained, andreka-uihas built-in Drawer, let's migrate to itℹ️ There is breaking change
direction===>swipe-direction📸 Screenshots (if appropriate)
📝 Checklist
Summary by CodeRabbit
New Features
Bug Fixes
Documentation