N
Nuxt•2w ago
mk4hmed

How can I achieve tweakcn styling and full component customizability in nuxt ui?

I am going to start a brand new Nuxt 4 project, and I am not sure of which component library to go with. Nuxt UI especially after getting rid of pro tier and having everything free is so tempting, but when I started playing around with it I found out that the components live in the node modules and you cannot directly manipulate them, and I didn't find a way to change the component's structure, add extra elements to it that were not considered originally by the creating team, change the layout of its elements. Meanwhile, in shadcn vue I have direct access to every component's code and I can manipulate them however I wish, and there is also the ability to use things like tweakcn which I didn't find an equivalent of for NuxtUI.
2 Replies
kapa.ai
kapa.ai•2w ago
Hi @mk4hmed. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, Nuxt UI (the official component library for Nuxt) is designed for rapid development and theming, but it does not offer the same level of direct component code access and structural customizability as libraries like shadcn/vue. Customizability in Nuxt UI - Theming & Styling:
Nuxt UI components are highly themeable via configuration (e.g., using the n attribute for color, size, and style variants) and can be globally themed using UnoCSS or Tailwind/Windi CSS utilities. You can override default styles and apply local themes to groups of components, but this is primarily for styling, not for altering component structure or markup.
Example: 
  <NButton n="red xl" />
  <NCard n="green-500">
    <NCheckbox>i accept the terms & conditions</NCheckbox>
    <NButton>Submit</NButton>
  </NCard>
  
  <NButton n="red xl" />
  <NCard n="green-500">
    <NCheckbox>i accept the terms & conditions</NCheckbox>
    <NButton>Submit</NButton>
  </NCard>
You can also override theme shortcuts in your nuxt.config.js: 
  export default defineNuxtConfig({
    modules: [
      '@nuxt/devtools-ui-kit'
    ],
    unocss: {
      shortcuts: {
        'n-button-base': 'border n-border-base rounded shadow-sm op80 !outline-none',
        // ...other overrides
      }
    }
  })
  
  export default defineNuxtConfig({
    modules: [
      '@nuxt/devtools-ui-kit'
    ],
    unocss: {
      shortcuts: {
        'n-button-base': 'border n-border-base rounded shadow-sm op80 !outline-none',
        // ...other overrides
      }
    }
  })
Nuxt DevTools UI Kit documentation - Component Structure:
The components are distributed as part of the node_modules and are not scaffolded into your project for direct editing. This means you cannot directly change the internal structure, add new elements, or fundamentally alter the layout of Nuxt UI components unless you fork the library or create your own components. Comparison to shadcn/vue and tweakcn - shadcn/vue:
This library is designed to let you copy component source files directly into your project, giving you full control over their structure, logic, and styling. This is ideal for deep customizations, such as adding new elements, changing markup, or integrating utilities like tweakcn for granular class manipulation. - tweakcn Equivalent:
There is no mention in the knowledge sources of a Nuxt UI equivalent to tweakcn (a utility for manipulating Tailwind class names at runtime). Nuxt UI relies on the n attribute and UnoCSS/Tailwind utilities for styling, but not for runtime class composition or manipulation in the same way tweakcn does. Summary - Nuxt UI is excellent for rapid development, consistent theming, and ease of use, especially now that all features are free. However, it is not designed for deep structural customization or direct code editing of components. - shadcn/vue is better suited if you require full control over component code, structure, and want to use utilities like tweakcn. - If your project requires the ability to deeply customize component structure and logic, shadcn/vue may be a better fit. If you prioritize rapid development, theming, and official Nuxt integration, Nuxt UI is a strong choice, but with the limitations described above. The knowledge sources do not mention any official or documented way to scaffold Nuxt UI components into your project for direct editing, nor do they mention a tweakcn-like utility for Nuxt UI. If this level of customizability is critical, you may want to consider shadcn/vue or a similar approach instead.
Nuxt DevTools UI Kit documentation ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@1364671189045350470> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?