v3

[benjamincanac]

The development is ongoing on the v3 branch of this repository: https://github.com/nuxt/ui/tree/v3.

---

A lot has changed since @nuxt/ui was made open-source (May 2023), so the plan here is to rewrite every component from scratch alongside their config.

I'll post regular updates on this issue and on https://twitter.com/benjamincanac.

Overview

• [x] Tailwind v4 https://tailwindcss.com/blog/tailwindcss-v4-alpha
• [x] #409 which should solve all v3.0 issues
• [x] Switch our internal useUI for https://www.tailwind-variants.org/
• [x] Generic components
• [x] Remove safelists by compiling the theme on build based on pre-defined colors
• [x] Tests
• [ ] #2129

Documentation

https://ui3.nuxt.dev

Breaking Changes

The biggest change is the switch to tailwind-variants, this will cause lots of breaking changes if you've used the ui prop or app.config.ts to override the config. I apologize in advance for this but I strongly believe this will be beneficial and will bring consistency across all components.

At the beginning the config was split in many keys for the same div to give more flexibility, but since then we introduced tailwind-merge which now allows us to group those keys together, this is a good opportunity to clean the whole thing.

The config will now have a slots amongst other keys that will specifically target dom nodes. The ui prop will only allow you to target those slots.

These changes alongside the refactor of all components will also improve the types, the app.config.ts and ui props are now perfectly typed, as well as all components props, slots, emits and expose.

Feel free to comment on this if you have any ideas for the next major.

### Components
- [x] Accordion
- [x] Alert
- [x] Avatar
- [x] AvatarGroup
- [x] Badge
- [x] Breadcrumb
- [x] Button
- [x] ButtonGroup
- [x] Card
- [ ] Carousel
- [x] Checkbox
- [x] Chip
- [x] Collapsible
- [x] CommandPalette
- [x] Container
- [x] ContextMenu
- [x] Drawer
- [x] DropdownMenu (Dropdown)
- [x] Form
- [x] FormField (FormGroup)
- [x] Icon
- [x] Input
- [x] InputMenu
- [x] Kbd
- [x] Link
- [x] Modal
- [x] NavigationMenu (HorizontalNavigation/VerticalNavigation)
- [x] Pagination
- [x] Popover
- [x] Progress
- [x] Provider
- [x] RadioGroup
- [x] Select
- [x] SelectMenu
- [x] Separator (Divider)
- [x] Skeleton
- [x] Slideover
- [x] Slider (Range)
- [ ] Table
- [x] Tabs
- [x] Textarea
- [x] Toast (Notification)
- [x] Switch (Toggle)
- [x] Tooltip

[benjamincanac]

@Celibioux I guess this would technically be possible but I'm wondering what would be the benefit here. If you'd have to rewrite the entire config, why not write the component yourself by using radix-vue directly for example?

[jits]

One thing I've been struggling with: consistent rendering of rich text content within components. Mainly pulling from YML content files. For example, I want a bolded word in the primary text colour within the title of a particular UI component.

It would great to have minimal markdown support without having to override slots and use the <MDC> component. Though perhaps that's not a good default, so maybe some sort of config option to trigger when this happens?

Even when overriding slots and using the <MDC> component explicitly there's one problem that occurs a fair bit: since the MDC component always wraps the content in a <p> tag it often happens that this ends up with invalid HTML from the server (e.g. this markdown generated <p> tag is now within a <p> tag because that component's slot is wrapped in a <p> tag already). This results in a hydration error on the client. So I've ended up sometimes having MDC components, and sometimes using v-html, in overridden slots, which is unfortunate (and messy).

(Apologies if this is the wrong place to put this — I'm happy to split this out into a separate issue / discussion).

[benjamincanac]

@jits I'm aware of this issue and the only solution we have right now would be to replace every <p> by <div> which would not be great for SEO. There is an open issue about this for the Alert component: #1551. We do have the same issue in all @nuxt/ui-pro components.

[jits]

Thanks @benjamincanac for the quick response. Great to know it's on your radar.

I agree that replacing <p> tags automatically with <div> is not the best solution. One way I've tackled this before (when consuming content from a CMS) is to allow the developer of the template to configure which element (if any) to use as the wrapper. I guess this is more a feature request for https://github.com/nuxt-modules/mdc — I'm thinking the <MDC> component already has the tag prop, so you could introduce a contentWrapperTag: string | false prop as well, to define what the markdown parser should do.

Just to say: I'm making extensive use of Nuxt UI (and UI Pro) and loving it! Keep up the amazing work.

[MuhammadM1998]

This commit https://github.com/nuxt/ui/commit/49b73aa024be14a9aa150a2804f4dcb18542fa49 made me think that NuxtUI could automatically use <NuxtImage> if installed and fallback to <img> otherwise

[maximepvrt]

I was hesitant about do a PR to add a UImg component which returns either an img or nuxtimg element depending on whether the nuxt image module is present.

[Celibioux]

@benjamincanac thanks for your quick answer and you're right but the idea came from seen many folks ask for unocss integration so unstyled could be possible to use unocss for styling ? And Yes there is Radix_vue and many out there but We Are NUXTERS 😂 We Love Nuxt and All its Ecosys

[robin-dongbin]

@benjamincanac thanks for your quick answer and you're right but the idea came from seen many folks ask for unocss integration so unstyled could be possible to use unocss for styling ? And Yes there is Radix_vue and many out there but We Are NUXTERS 😂 We Love Nuxt and All its Ecosys

The preset api I mentioned above solves this problem as well. It decouples nuxt-ui from tailwindcss, giving the user the freedom to use any css tool of their choice to provide the styles.

The ui library can even remove the tailwindcss dependency and only provide tailwindcss presets, allowing the user to install the taiwindcss dependency and compile the presets on the user side.

Official presets can provide classes compatible with tailwindcss and unocss. The user is free to choose either unocss or tailwindcss.Even if they prefer another css tool, they can completely redefine their styles using another css tool.

I've been pitching the preset api I came up with, but @benjamincanac don't seem to be interested 😂 .

[ChrisGV04]

I believe what @robin-dongbin is saying about the presets is very similar to what Shadcn UI does with the "default" and "New York" theme to change the appearance of every component. Maybe something like this could exist for Nuxt UI, but I'm not sure, since Shadcn does that by giving you the files for each component.

However, I agree with @benjamincanac saying that if you already intend to use Nuxt UI completely unstyled, try using Radix Vue to build the components yourself. You might find that very useful.

Radix Vue gives you full control over the styling of your components, while providing accessibility and the complex logic of the components for free. Use vanilla CSS, Tailwind, UnoCSS... whatever you consider best.

---

Nuxt UI is meant to give you good looking, opinionated and pre-styled UI components, but expose the API to customize them when needed. And in my opinion, it does it wonderfully.

I invite you to take a look at Radix Vue to build your own components if you apply to any of the following:

1. You end up changing the UI of almost every component to match your branding.
2. You don't agree with the choices for the stack (Tailwind, TanStack Virtual, etc.).
3. You need a component that is not currently offered by Nuxt UI.
4. You need to add custom logic/behavior to your components internally.

I won't lie... It can be significantly more work. But it is worth it if you really need it.

[Celibioux]

@ChrisGV04 Thank you for your time replying on this really great answer

[benjamincanac]

I forgot to mention that the repository we're working on is public if you want to check out the progress: https://github.com/benjamincanac/ui3.

The development is going very well, we're only missing 12 components and I can say that maintaining this version will be significantly easier. Also, contributing will be effortless with the internal CLI we created to initialize components: https://github.com/benjamincanac/ui3/blob/dev/cli/templates.mjs.

I can't wait to finally release this 😊

[MickL]

With v3 can we have table footers? ❤️ https://github.com/nuxt/ui/issues/1025

[alexcroox]

With v3 can we have table footers? ❤️ #1025

And sticky headers!

[alihardan]

I forgot to mention that the repository we're working on is public if you want to check out the progress: https://github.com/benjamincanac/ui3.

The development is going very well, we're only missing 12 components and I can say that maintaining this version will be significantly easier. Also, contributing will be effortless with the internal CLI we created to initialize components: https://github.com/benjamincanac/ui3/blob/dev/cli/templates.mjs.

I can't wait to finally release this 😊

Awesome work ❤️ What about Vue compatibility? Will we definitely see it in the next major release?

[maximepvrt]

I was hesitant about do a PR to add a UImg component which returns either an img or nuxtimg element depending on whether the nuxt image module is present.

@benjamincanac I added something similar on @nuxtjs/mdc https://github.com/nuxt-modules/mdc/pull/180/files

[maximepvrt]

Would it be possible to update UAvatar to be compatible with masks in v3? The Squirqle mask looks amazing! 🤩

I feel like this isn't currently possible with a chip #1627

[MuhammadM1998]

Nuxt Icon beta implements the offline usage from iconify and supports SSR. Will it be integerate in v3 and drop egoist/tailwndcss module? It already does

[feryardiant]

1. VerticalNavigation / HorizontalNavigation should be NavigationMenu with an orientation prop

I whish that component (especially on orientation="vertical" had some way to keep the NavigationMenuSub expanded when its submenu item is active. For context https://github.com/radix-vue/radix-vue/discussions/892

Even better if NuxtUI would have the vertical navigation similar to the one on Naive UI or Ant Design

[icarusion]

I saw that the plan is to remove the padded property of Button. I don’t know why, but this property is still very useful. For example, like the following example:

<UInput
  v-model="searchQuery"
  :ui="{ icon: { trailing: { pointer: '' } } }"
  :loading="searchLoading"
  icon="i-heroicons-magnifying-glass-20-solid"
  size="md"
>
  <template #trailing>
    <UButton
      v-show="searchQuery !== ''"
      color="gray"
      variant="link"
      icon="i-heroicons-x-mark-20-solid"
      :padded="false"
      @click="handleClear"
    />
  </template>
</UInput>

also in offical page:

In addition, SelectMenu and Button nesting have similar usages, so I hope you can consider it again. Thanks :)

@benjamincanac

[benjamincanac]

Why not go for class="p-0"? 🤔

[icarusion]

Why not go for class="p-0"? 🤔

for consistency, like Input、Textarea. But p-0 is ok 😄

[benjamincanac]

You can also do input-class="p-0" for example. This prop was before we ever used tailwind-merge, its kind of obsolete now with class merging. This is why we're removing it in v3 😊

[divine]

Hello,

Just a small feature request regarding Table component in v3.

I've tried to use the Table component and had some problems with the applying classes ("global class") to rows.

According to documentation to apply classes to rows I need to push class property for each item.

This might be solved with using computed property but when data comes from API and you've a lot of data it might affect performance.

https://github.com/nuxt/ui/blob/89d18f8f1dee4c49ba787cc9d4c17a43debbf170/src/runtime/components/data/Table.vue#L74

Instead of searching for class property in each row it'll be awesome to use data from column or provide some function which in return will give the class that it needs to apply.

Basically, I was looking for a "global" class property for the row like what we currently have in a column.

class - The class to apply to the column cells.

Maybe something like this:

rowClass - The class to apply to the row cells.

Thank you very much for your work and the effort with this UI.

This is great honestly. 👍

[Mat4m0]

Would it be possible to have this Comment Component Feature for Nuxt UI Components?

It would be really helpful to have at least a Link directly to the Docs.

Many thanks and keep up your awesome work

[jd-solanki]

As we'll have v3 which will possibly bring some breaking changes can you please reconsider this?

https://github.com/nuxt/ui/pull/886#issuecomment-1825182121

Also, If I want to start new project using Nuxt v4 compatibility & Nuxt UI 3 is it possible now (anything like Alpha)? If not, can you share any approx time so I can schedule my projects accordingly.

[T-Zahil]

Also, If I want to start new project using Nuxt v4 compatibility & Nuxt UI 3 is it possible now (anything like Alpha)? If not, can you share any approx time so I can schedule my projects accordingly.

https://github.com/nuxt/ui/issues/1841#issuecomment-2151728389 😊

[jd-solanki]

@T-Zahil Thanks for your response but it'll serve the NuxtUI.

However, I want to consume it in my own project (like third party package) and still I'm waiting for confirmation on if it's even advisable to use in my project?

[messenjer]

@T-Zahil Thanks for your response but it'll serve the NuxtUI.

However, I want to consume it in my own project (like third party package) and still I'm waiting for confirmation on if it's even advisable to use in my project?

Nuxt UI 3 will use tailwind v4, so it's also linked to the release of tailwind v4

• https://github.com/benjamincanac/ui3/blob/dev/package.json#L61
• https://tailwindcss.com/blog/tailwindcss-v4-alpha
• https://github.com/tailwindlabs/tailwindcss/blob/next/CHANGELOG.md

[MickL]

I am excited for Nuxt UI 3 and Tailwind 4 but I think we need to wait a bit more for Tailwind 4 to come :)

Btw isnt Nuxt UI then also linked to the release of @nuxtjs/tailwindcss?

https://github.com/nuxt-modules/tailwindcss/issues/820

[reslear]

I am excited for Nuxt UI 3 and Tailwind 4 but I think we need to wait a bit more for Tailwind 4 to come :)

Btw isnt Nuxt UI then also linked to the release of @nuxtjs/tailwindcss?

nuxt-modules/tailwindcss#820

And UnoCss

[HigherOrderLogic]

UnoCss isn't related.

[UlugbekNG]

Hello everyone. Is there any news about UI 3 or approximate release date. I'm looking forward this new release.

[sandros94]

Hello everyone. Is there any news about UI 3 or approximate release date. I'm looking forward this new release.

As a rule of thumb, after the official release of Tailwind v4

[uAtomicBoolean]

It looks like it won't be for anytime soon sadly as they hope to move from alpha to beta by the end of summer and release a stable version later in the year.
https://github.com/tailwindlabs/tailwindcss/discussions/13938#discussioncomment-9938418

[MickL]

Do we really need to wait for official release? Maybe we can start a v3 beta with the Tailwind beta?

[benjamincanac]

Of course, we'll release a beta package with Tailwind CSS v4 beta as soon as they implement what's missing 😊

[jd-solanki]

I'm planning to design the app and wait for v3 for development so I wanted to ask is there any changes in design & figma design file?

[therealokoro]

Please support for Unocss in v3 🙏🏾🙏🏾🙏🏾🙏🏾🙏🏾

[benjamincanac]

Hello,

I'm taking some vacation starting tomorrow so I wanted to give a little update on the development before leaving.

We've made some significant progress on the docs since everything had to be rewritten entirely. There are still 13 components left to document but it shouldn't take too much time as all the components to display the props, slots, code, examples, etc. as well as the new @nuxt/ui-pro module to actually make the app are done.

It took a lot of time to re-create the typography of @nuxt/ui-pro by hand with Tailwind CSS classes as the @tailwindcss/typography plugin doesn't work with v4. The good thing is now, Nuxt UI Pro users will be able to fully customize their prose through the app.config.ts with auto-complete which is a big step forward.

We're still waiting on Tailwind CSS v4 alpha development to publish an alpha / beta package. It's still missing dark mode (I've seen some progress on @adamwathan though) but the pain point is that we haven't been able to build a Nuxt app with the @tailwindcss/vite plugin yet, @danielroe might be able to give us a hand on this but if you guys have an idea meanwhile, feel free to open a PR on https://github.com/benjamincanac/ui3.

It's been years since I took a proper time off so please, don't open too many issues while I'm gone 😂 and starting September we'll do our best to finally release a first version of both @nuxt/ui v3 and @nuxt/ui-pro v2.

[ineshbose]

It's been years since I took a proper vacation so please, don't open too many issues while I'm gone 😂 and starting September we'll do our best to finally release a first version of both @nuxt/ui v3 and @nuxt/ui-pro v2.

Much relate! 😂 Enjoy your holidays, you deserve it!!

[yb]

It's been years since I took a proper time off so please, don't open too many issues while I'm gone 😂 and starting September we'll do our best to finally release a first version of both @nuxt/ui v3 and @nuxt/ui-pro v2.

I came to look for and was going to open an issue about Table component performance, and then saw this ... emmm, maybe the performance issue is not so serious now 😄 enjoy your vacation, and thank you very much

[jd-solanki]

I've another proposal for v3.

If we remove the U prefix from the component by default then it will be much more readable.

I'm suggesting doing this for mainly two reasons:

1. Greatly increases the readability.
2. Even if we remove prefix via config prefix: '' we've to manually remove it when we copy snippet from docs.

With U prefix

Without U prefix

I've removed U prefix in my project and it greatly increases the readability. Great libs like Shadcn-Vue already does this.

[P4sca1]

Removing the prefix can cause conflicts with native HTML elements or other libraries. See https://eslint.vuejs.org/rules/multi-word-component-names.

[jd-solanki]

I totally agree with you but vue styleguide also recommends using titlecases components like Button instead of button.

However, It looks like keeping U prefix will be fine for community.

[madsh93]

I'd prefer to know which components are from Nuxt UI and which i've created myself.

[HigherOrderLogic]

I'd prefer to know which components are from Nuxt UI and which i've created myself.

You can just distinguish it through the U prefix (or whatever prefix you use).

[moshetanzer]

@benjamincanac any thoughts on if we can fix this at least for V3 - https://github.com/nuxt/ui/issues/1992

[MuhammadM1998]

Is there's any changes planned to the colors config? While designing a new app based on Nuxt UI I found it cumbersome to figure out which shade the Button for example uses for its ring. I'd have to look into the config and check all the possible variants for ring-color-300 for example then set the value of 300 shade to the color I want. Is anyone having this or am I doing something wrong?

[itpropro]

Is there's any changes planned to the colors config? While designing a new app based on Nuxt UI I found it cumbersome to figure out which shade the Button for example uses for its ring. I'd have to look into the config and check all the possible variants for ring-color-300 for example then set the value of 300 shade to the color I want. Is anyone having this or am I doing something wrong?

This can also be quite challenging, when you don't have your colors as shades. Many projects use for example brand colors like brand-green-bright/light or a different shading system from 1-10. It would be great if we could adjust the colors in the config for all components (like with primary currently) instead of overwriting them for every component individually.

[maximepvrt]

It seems like the new repository for UI v3 is now at https://github.com/nuxt/ui/tree/v3. I noticed that there were some merge requests, such as this one, which were not merged before the previous repository was archived.

@benjamincanac Could you please confirm if this PR or its functionality will be included in the new UI v3 version?