",[3139,3142,3145],{"name":3140,"color":3141},"bug","d73a4a",{"name":3143,"color":3144},"v3","49DCB8",{"name":3146,"color":3147},"reka-ui","56d799",3947,"nuxt","ui","open","Unexpected drawer behavior when dragging content area (jumpy collapse & horizontal scroll flickering)","2025-06-05T10:38:05Z","https://github.com/nuxt/ui/issues/3947",0.7541332,{"description":3157,"labels":3158,"number":3166,"owner":3149,"repository":3150,"state":3151,"title":3167,"updated_at":3168,"url":3169,"score":3170},"### Description\n\nWhilst working with snap points, (direction bottom) and the drawer **IS NOT** dismissible, If i'd dragged the drawer all the way up, then went to drag the drawer down again, it would stop at the 2nd to last stop (the first stop going back down) and would just jump to the next stop instead of dragging. It was only after scrolling through the vaul repo that I found [this was the issue](https://github.com/emilkowalski/vaul/blob/54b099cfeed77905f3b06d553c728b3102b15b40/src/use-snap-points.ts#L176) `const isOverlaySnapPoint = activeSnapPointIndex === fadeFromIndex - 1` \n`fadeFromIndex` should be a prop (and made clear), as it prevents the dragging functionality, I had to manually amend this value and if i'd have known it was a prop, it would have saved me a lot of time.\n\n### Additional context\n\n_No response_",[3159,3162,3163],{"name":3160,"color":3161},"enhancement","a2eeef",{"name":3143,"color":3144},{"name":3164,"color":3165},"triage","ffffff",4546,"Drawer prop amendment - snap point support","2025-07-18T13:40:39Z","https://github.com/nuxt/ui/issues/4546",0.76038873,{"description":3172,"labels":3173,"number":3177,"owner":3149,"repository":3150,"state":3151,"title":3178,"updated_at":3179,"url":3180,"score":3181},"### Description\n\nHey everyone, I was trying to add a `UTooltip` to a `UColorModeButton`.\n\n```vue\n\u003CUTooltip :delay-duration=\"0\" text=\"Toggle mode\">\n \u003CUColorModeButton :ui=\"{ base: 'text-dimmed hover:text-highlighted' }\" />\n\u003C/UTooltip>\n```\n\nUnfortunately, the tooltip gets pushed to the top-left corner of the viewport. Am I missing something or doing anything incorrectly here?",[3174],{"name":3175,"color":3176},"question","d876e3",4286,"Can UColorModeButton be wrapped in a UTooltip?","2025-06-04T11:52:41Z","https://github.com/nuxt/ui/issues/4286",0.7637108,{"description":3183,"labels":3184,"number":3188,"owner":3149,"repository":3150,"state":3189,"title":3190,"updated_at":3191,"url":3192,"score":3193},"### Description\n\nhttps://ui.nuxt.com/components/carousel#with-thumbnails\n\nThere are a couple of issues with the current implementation:\n\n1. Swiping via gestures isn't tracked — when switching slides this way, the active thumb doesn't update.\n2. The thumbs list can have more items, so scrolling needs to be handled properly.\n\nHere's my take on fixing both:\n```vue\n\u003Cscript setup lang=\"ts\">\nconst items = [\n 'https://picsum.photos/640/640?random=1',\n 'https://picsum.photos/640/640?random=2',\n 'https://picsum.photos/640/640?random=3',\n 'https://picsum.photos/640/640?random=4',\n 'https://picsum.photos/640/640?random=5',\n 'https://picsum.photos/640/640?random=6',\n 'https://picsum.photos/640/640?random=7',\n 'https://picsum.photos/640/640?random=8',\n 'https://picsum.photos/640/640?random=9',\n 'https://picsum.photos/640/640?random=10',\n]\n\nconst carousel = useTemplateRef('carousel')\nconst thumbCarousel = useTemplateRef('thumbCarousel')\nconst activeIndex = ref(0)\n\nfunction onClickPrev() {\n activeIndex.value--\n}\nfunction onClickNext() {\n activeIndex.value++\n}\n\nfunction onSelect(index: number) {\n activeIndex.value = index\n\n thumbCarousel.value?.emblaApi?.scrollTo(index)\n}\n\nfunction onThumbClick(index: number) {\n carousel.value?.emblaApi?.scrollTo(index)\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"flex-1 w-full\">\n \u003CUCarousel\n ref=\"carousel\"\n v-slot=\"{ item }\"\n arrows\n :items=\"items\"\n :prev=\"{ onClick: onClickPrev }\"\n :next=\"{ onClick: onClickNext }\"\n class=\"w-full max-w-xs mx-auto\"\n >\n \u003Cimg :src=\"item\" width=\"320\" height=\"320\" class=\"rounded-lg\">\n \u003C/UCarousel>\n\n \u003Cdiv class=\"pt-4 max-w-xs mx-auto\">\n \u003CUCarousel\n ref=\"thumbCarousel\"\n v-slot=\"{ item, index }\"\n :items=\"items\"\n class=\"w-full\"\n contain-scroll=\"keepSnaps\"\n drag-free\n :ui=\"{ item: 'basis-auto' }\"\n >\n \u003Cimg\n :src=\"item\"\n width=\"44\"\n height=\"44\"\n class=\"size-11 opacity-25 hover:opacity-100 transition-opacity rounded-lg\"\n :class=\"{ 'opacity-100': activeIndex === index }\"\n alt=\"\"\n @click=\"onThumbClick(index)\"\n >\n \u003C/UCarousel>\n \u003C/div>\n \u003C/div>\n\u003C/template>\n```\n\n### Additional context\n\n_No response_",[3185,3186,3187],{"name":3160,"color":3161},{"name":3143,"color":3144},{"name":3164,"color":3165},4032,"closed","[Carousel] improve thumb example","2025-05-02T09:58:58Z","https://github.com/nuxt/ui/issues/4032",0.72881156,{"description":3195,"labels":3196,"number":3202,"owner":3149,"repository":3150,"state":3189,"title":3203,"updated_at":3204,"url":3205,"score":3206},"### Description\n\nI am using the carousel component. Trying to color the dots differently but can't find any documentation on how to achieve this. Is there any doc on the ui property? ",[3197,3198,3199],{"name":3175,"color":3176},{"name":3143,"color":3144},{"name":3200,"color":3201},"upstream","78bddb",4372,"Carousel Config Options","2025-06-18T13:56:20Z","https://github.com/nuxt/ui/issues/4372",0.7368726,{"description":3208,"labels":3209,"number":3213,"owner":3149,"repository":3150,"state":3189,"title":3214,"updated_at":3215,"url":3216,"score":3217},"### Description\n\n\nUCarousel auto-scroll lacks the direction and speed attributes, and the speed and direction cannot be controlled. Embla Carousel official website has these attributes\nhttps://www.embla-carousel.com/plugins/auto-scroll/\n\n### Additional context\n\n_No response_",[3210,3211,3212],{"name":3160,"color":3161},{"name":3143,"color":3144},{"name":3164,"color":3165},4474,"UCarousel lacks properties","2025-07-07T11:15:01Z","https://github.com/nuxt/ui/issues/4474",0.73715085,{"description":3219,"labels":3220,"number":3224,"owner":3149,"repository":3150,"state":3189,"title":3225,"updated_at":3226,"url":3227,"score":3228},"### Description\n\nThis is a re-opening of #1484 but for v3. It seems in the transition from v2 to v3, giving the indicators (now \"dots\") ARIA \"tab\" roles was lost. While I did mention it in my original issue, I don't believe my original PR accounted for when multiple items would be displayed at the same time. Perhaps the changes for v3 can take that into account.\n\n### Additional context\n\n_No response_",[3221,3222,3223],{"name":3160,"color":3161},{"name":3143,"color":3144},{"name":3164,"color":3165},4494,"Carousel component could be made more accessible (v3).","2025-07-10T12:18:41Z","https://github.com/nuxt/ui/issues/4494",0.74892807,{"description":3230,"labels":3231,"number":3234,"owner":3149,"repository":3150,"state":3189,"title":3235,"updated_at":3236,"url":3237,"score":3238},"### For what version of Nuxt UI are you suggesting this?\n\nv3-alpha\n\n### Description\n\nI was browsing through the v3 carousel docs at https://ui.nuxt.com/components/carousel#props, to see whether the v3 version will have callback events for onPrev and onNext, but didn't find it.\n\nIs this something that would be considered to implement?\n\nAlternatively, the ability to bind to the active item in the carousel, could also work.\n\nWe would use it to display an info text next to the image, and change it depending on which image is active in the carousel.\n\nIf this is something that is already possible, then please let me know how :)",[3232,3233],{"name":3160,"color":3161},{"name":3143,"color":3144},2475,"[v3] `Carousel` feature request: callback methods onPrev & onNext","2024-11-07T14:11:43Z","https://github.com/nuxt/ui/issues/2475",0.75143254,{"description":3240,"labels":3241,"number":3245,"owner":3149,"repository":3150,"state":3189,"title":3246,"updated_at":3247,"url":3248,"score":3249},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.13.0\n- Nuxt Version: 3.17.5\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@10.10.0\n- Builder: -\n- User Config: modules, devtools, supabase, runtimeConfig, security, css, uiPro, routeRules, future, compatibilityDate, nitro, content, eslint\n- Runtime Modules: @nuxt/eslint@1.4.1, @nuxt/image@1.10.0, @nuxt/ui-pro@3.1.3, @nuxt/content@3.6.0, @vueuse/nuxt@13.4.0, nuxt-og-image@5.1.7, @nuxtjs/supabase@1.5.2, nuxt-security@2.2.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\n## Steps to Reproduce:\n1. Load the StackBlitz demo: https://stackblitz.com/edit/nuxtui-carousel-fade-bug\n2. Click the tabs on the carousel - notice the smooth fade transitions ✅\n3. Navigate to \"Page 2\" using the button\n4. Try clicking tabs on either page - fade transitions no longer work ❌\n5. The carousel now uses slide animations instead of fade\n\n### Description\n\nI noticed that when using page transitions, the `fade` property of the `\u003CUCarousel>` component stops working after navigating between pages. The carousel reverts to slide animations instead of fade transitions. Removing the page transitions restores correct functionality.\n\nI looked into it with the help of Claude and found the bug was caused by VueUse's computedAsync failing during page transitions in Nuxt. I will open a PR to fix this issue!\n\n### Additional context\n\n## Expected Behavior:\nCarousel fade transitions should continue working after page navigation with transitions.\n\n## Actual Behavior:\nCarousel fade transitions stop working and revert to slide animations after navigating between pages that have `pageTransition` configured.\n\n## Workaround:\nRemoving `pageTransition` from `definePageMeta()` restores fade functionality even after navigation.\n\n\n### Logs\n\n```shell-script\n\n```",[3242,3243,3244],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3164,"color":3165},4379,"UCarousel fade transitions break after page navigation with pageTransition","2025-06-30T12:55:09Z","https://github.com/nuxt/ui/issues/4379",0.75266516,{"description":3251,"labels":3252,"number":3258,"owner":3149,"repository":3150,"state":3189,"title":3259,"updated_at":3260,"url":3261,"score":3262},"### Description\n\nSidebar has an inline style of `width: 15%`. I want to override that and control it's width from tailwindcss classes. I have tried providing a style attribute but it does not seem to work.",[3253,3254,3255],{"name":3175,"color":3176},{"name":3143,"color":3144},{"name":3256,"color":3257},"pro","5BD3CB",3476,"Control the width of sidebar","2025-03-19T18:00:11Z","https://github.com/nuxt/ui/issues/3476",0.75805867,["Reactive",3264],{},["Set"],["ShallowReactive",3267],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fJ02Q73Rk_-Y_10BptivT1gmMSJH8JrF6XT5If7UE3Fs":-1},"/nuxt/ui/3287"]