\n```",[3154],{"name":3155,"color":3156},"question","d876e3",4849,"Can `UNavigationMenu` support active styles via the ui prop?","2025-08-30T10:29:01Z","https://github.com/nuxt/ui/issues/4849",0.7768908,{"description":3163,"labels":3164,"number":3166,"owner":3144,"repository":3145,"state":3146,"title":3167,"updated_at":3168,"url":3169,"score":3170},"### 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?",[3165],{"name":3155,"color":3156},4286,"Can UColorModeButton be wrapped in a UTooltip?","2025-06-04T11:52:41Z","https://github.com/nuxt/ui/issues/4286",0.78345615,{"description":3172,"labels":3173,"number":3183,"owner":3144,"repository":3145,"state":3184,"title":3185,"updated_at":3186,"url":3187,"score":3188},"I currently have the problem that we have to integrate our SPA into a larger application. And with that, we also inherit the CSS of the outer application. And that's where it gets really ugly: they have partially written classes in their own CSS files that use the TW naming scheme (m, p, gap, shadow, etc.), and then add `!important` to these declarations. \n\nOne of the big problems with Nuxt UI is that there is no prefixing of Tailwind classes. So we started writing TW utilities with a prefix for the affected classes. This is then transferred to app.config. The second problem was the merge process that app.config uses. Usually the names have to match. If I want to have a `p-4` from the config (because px values with !important were entered in the outer CSS), I created the class `p-00`, which replaces the `p-4` class and thus clears the way for the prefixed TW class `o-p-4`.\n\nSo far so good, but I can't use it with popovers like SelectMenu. No matter what I do, the class `shadow-lg` remains. The other devs of the main application have entered a rather ugly shadow with important there. \n\nIs there another prop like 'content' that I can use to replace `shadow-lg`? I'm not a fan of `!important`, but at this point I can only work this way.\n\nFurthermore, it would be really nice if you could really overwrite the sections in app.config instead of just merging them (apart from prefixing the TW classes). There are certain stylings that you won't use, but then they are in the element",[3174,3175,3178,3181],{"name":3155,"color":3156},{"name":3176,"color":3177},"v3","49DCB8",{"name":3179,"color":3180},"closed-by-bot","ededed",{"name":3182,"color":3180},"stale",3874,"closed","Changing Shadow Classes on Popover and SelectMenu","2025-08-12T02:12:50Z","https://github.com/nuxt/ui/issues/3874",0.75224185,{"description":3190,"labels":3191,"number":3192,"owner":3144,"repository":3193,"state":3184,"title":3194,"updated_at":3195,"url":3196,"score":3197},"` \u003CIcon name=\"lucide:arrow-up-wide-narrow\"\n class=\"ml-auto self-center transition-all duration-300 text-xl font-bold\" :stroke-width=\"3\"\nstroke=\"currentColor\" /> `\n\nUnable to use stroke-width does not take effect",[],364,"icon","Unable to use stroke-width does not take effect","2025-05-13T15:27:50Z","https://github.com/nuxt/icon/issues/364",0.7560783,{"description":3199,"labels":3200,"number":3204,"owner":3144,"repository":3145,"state":3184,"title":3205,"updated_at":3206,"url":3207,"score":3208},"### Description\r\n\r\nThe code for specifying column width when there is no data is as follows and it is expected\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CUTable :empty-state=\"{ icon: 'i-heroicons-circle-stack-20-solid', label: 'No items.' }\" :rows=\"people\"\r\n :columns=\"columns\">\r\n \u003Ctemplate #from-data=\"{ row }\">\r\n {{ row.from.value }}\r\n \u003C/template>\r\n \u003C/UTable>\r\n \u003CUNotifications>\r\n \u003Ctemplate #title=\"{ title }\">\r\n \u003Cspan v-html=\"title\" />\r\n \u003C/template>\r\n\r\n \u003Ctemplate #description=\"{ description }\">\r\n \u003Cspan v-html=\"description\" />\r\n \u003C/template>\r\n \u003C/UNotifications>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nconst toast = useToast()\r\nconst app = useNuxtApp()\r\n\r\nconst columns = [{\r\n key: \"id\",\r\n label: \"编号\",\r\n class: 'w-16'\r\n}, {\r\n key: \"from\",\r\n label: \"发方\",\r\n class: 'w-[180px]'\r\n}, {\r\n key: \"to\",\r\n label: \"接方\",\r\n class: 'w-[180px]'\r\n\r\n}, {\r\n key: \"type\",\r\n label: \"类型\",\r\n class: 'w-[120px]'\r\n\r\n}, {\r\n key: \"value\",\r\n label: \"金额\",\r\n class: 'w-[120px]'\r\n\r\n}, {\r\n key: \"hash\",\r\n label: \"哈希\",\r\n}\r\n]\r\n\r\nconst people = ref([\r\n /*{\r\n \"id\": 1,\r\n \"from\": { value: '0x11111111fce9647bdf1e7877bf73ce8b0bad1111', class: 'w-[80px]' },\r\n \"to\": '0x22222222fce9647bdf1e7877bf73ce8b0bad2222',\r\n \"type\": 'ETH',\r\n \"value\": '123',\r\n \"hash\": '0x88baba17ca0060d644a72a9460260104eea81e7959445d3500d015ed71875d38',\r\n }*/\r\n])\r\n\r\n\r\n\u003C/script>\r\n\r\n\r\n\u003Cstyle>\r\na {\r\n color: #65a30d;\r\n font-weight: 700;\r\n font-size: 20px;\r\n}\r\n\r\n\r\n\u003C/style>\r\n```\r\n\r\n\r\n\r\nHowever, once there is data, it will be stretched open. How can I fix the header so that the content is partially hidden and drag the header to decide whether to hide or display it? This is too common in daily development and provides a good user experience\r\n\r\n\r\n```vue\r\nconst people = ref([\r\n {\r\n \"id\": 1,\r\n \"from\": { value: '0x11111111fce9647bdf1e7877bf73ce8b0bad1111', class: 'w-[80px]' },\r\n \"to\": '0x22222222fce9647bdf1e7877bf73ce8b0bad2222',\r\n \"type\": 'ETH',\r\n \"value\": '123',\r\n \"hash\": '0x88baba17ca0060d644a72a9460260104eea81e7959445d3500d015ed71875d38',\r\n }\r\n])\r\n```\r\n\r\n",[3201,3202,3203],{"name":3155,"color":3156},{"name":3179,"color":3180},{"name":3182,"color":3180},2092,"UTable column width","2025-06-18T09:06:18Z","https://github.com/nuxt/ui/issues/2092",0.7638488,{"description":3210,"labels":3211,"number":3218,"owner":3144,"repository":3145,"state":3184,"title":3219,"updated_at":3220,"url":3221,"score":3222},"### Environment\r\n\r\nN/A\r\n\r\n### Version\r\n\r\nv2.18.3\r\n\r\n### Reproduction\r\n\r\nN/A\r\n\r\n### Description\r\n\r\nIf you look closely to the slider in the docs page: https://ui.nuxt.com/components/range\r\n\r\nThe slider looks okay when a lower value is set:\r\n\r\n\r\nIf the value is set around the maximum (>=95 ish?), the design breaks:\r\n\r\n\r\nWhich is even more visible when the value is 100:\r\n\r\n\r\nAnd it's prominent when the size is set to `2xl`:\r\n\r\n\r\n**Also notice that the foreground isn't respecting the border radius of the \"container\"**\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3212,3215,3216,3217],{"name":3213,"color":3214},"bug","d73a4a",{"name":3141,"color":3142},{"name":3179,"color":3180},{"name":3182,"color":3180},2016,"URange's UI breaks after a certain value","2025-06-18T09:06:39Z","https://github.com/nuxt/ui/issues/2016",0.7673336,{"description":3224,"labels":3225,"number":3235,"owner":3144,"repository":3145,"state":3184,"title":3236,"updated_at":3237,"url":3238,"score":3239},"### Description\n\nI am implementing a dashboard with 2 sidebars, one on the left and one on the right with some content in-between them. I want the sidebars to be resizable, and have implemented this on the left sidebar using the resize-handle slot (https://ui.nuxt.com/components/dashboard-resize-handle#within-resize-handle-slot). I tried implementing the same thing on the right sidebar, but I cannot get the resize handle to appear on the left of the component. Can you provide me an example of what props / classes I need to use to accomplish this?\n\nI also want to have a \"Sidebar\" at the bottom of the center content. I know that the components only define a right / left side as a prop. Is there any way to do vertical collapse / resizing on these or should I implement that as a custom component using UCollapsible?",[3226,3227,3230,3231,3234],{"name":3155,"color":3156},{"name":3228,"color":3229},"needs reproduction","CB47CF",{"name":3176,"color":3177},{"name":3232,"color":3233},"nuxt/ui-pro","00dc82",{"name":3179,"color":3180},4027,"DashboardSidebar / DashboardResizeHandle","2025-05-31T02:08:59Z","https://github.com/nuxt/ui/issues/4027",0.77190584,{"description":3241,"labels":3242,"number":3245,"owner":3144,"repository":3145,"state":3184,"title":3246,"updated_at":3247,"url":3248,"score":3249},"### Description\n\nCan the width of the modal be customized? Currently, I set it globally through the `app\\assets\\css\\main.css` file. However, if I only want to modify the width of a single component, I can't find the place to do it. I tried adding `w-[1000px]` to `UModal`, but it didn't work.\n\n\n\n\n",[3243,3244],{"name":3155,"color":3156},{"name":3176,"color":3177},3041,"Can the width of the modal be customized?","2025-01-08T09:31:14Z","https://github.com/nuxt/ui/issues/3041",0.7720992,{"description":3251,"labels":3252,"number":3255,"owner":3144,"repository":3145,"state":3184,"title":3256,"updated_at":3257,"url":3258,"score":3259},"### Description\n\nHi,\n\nI'm just trying migrate to the v3 table component but I'm kind of stuck while trying to apply the correct column widths to the columns which before (in v2) was possible via simple tailwind classes per column.\nFor example a table has an action button in the last column, so the column should only have the width of the icon of the button so that other columns have more space but the column width is automatically about four times the button's size by default instead.\n\nThe [TanStack Table Docs](https://tanstack.com/table/v8/docs/guide/column-sizing) state that individual column sizes must be applied manually which also seems right looking at the [table component code](https://github.com/nuxt/ui/blob/v3/src/runtime/components/Table.vue) if I didn't miss anything in that regard.\n\nFrom my understanding the custom width styling must be applied to the `th`/`td` elements since every styling attempt inside the slots to make a column smaller (e.g. only 32px) did not work and only affected the content inside the header/cell slots.\n\nIs there any way at the moment to set a custom width for specific columns with the current implementation of the table component?",[3253,3254],{"name":3155,"color":3156},{"name":3176,"color":3177},3935,"Table custom column size adjustments","2025-05-03T12:03:11Z","https://github.com/nuxt/ui/issues/3935",0.77581465,["Reactive",3261],{},["Set"],["ShallowReactive",3264],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fc-MNaQxuL_V2Twfff3UaqWchJ2p7NTK2B7xBTmKBjgM":-1},"/nuxt/ui/4751"]