Nuxt

Install newt/ui in a Nuxt 4 project, with the module that auto-imports the components and injects the tokens.

Choose the brand hue, the radius and the font in newt/create, and it prints a preset code. Pass that code to init and the project comes out already wearing it.

pnpm dlx newtui@latest init --preset <code> --template nuxt

npx newtui@latest init --preset <code> --template nuxt

yarn dlx newtui@latest init --preset <code> --template nuxt

bunx newtui@latest init --preset <code> --template nuxt

pnpm dlx newtui@latest add button

npx newtui@latest add button

yarn dlx newtui@latest add button

bunx newtui@latest add button

One command creates the project and wires the tokens into it. --template exists for Next.js, both Vite flavours and Nuxt; everywhere else init runs inside a project you already made.

pnpm dlx newtui@latest init --template nuxt

npx newtui@latest init --template nuxt

yarn dlx newtui@latest init --template nuxt

bunx newtui@latest init --template nuxt

pnpm dlx newtui@latest add button

npx newtui@latest add button

yarn dlx newtui@latest add button

bunx newtui@latest add button

Create the app

npm create nuxt@latest my-app

Add Tailwind

npm install tailwindcss @tailwindcss/vite

import tailwindcss from "@tailwindcss/vite"

export default defineNuxtConfig({
  css: ["~/assets/css/tailwind.css"],
  vite: { plugins: [tailwindcss()] },
})

@import "tailwindcss";

Run init

pnpm dlx newtui@latest init --framework vue --bundler nuxt

npx newtui@latest init --framework vue --bundler nuxt

yarn dlx newtui@latest init --framework vue --bundler nuxt

bunx newtui@latest init --framework vue --bundler nuxt

init guesses the bundler from a nuxt.config, so the flags are only needed when it guesses wrong.

Add a component

pnpm dlx newtui@latest add button

npx newtui@latest add button

yarn dlx newtui@latest add button

bunx newtui@latest add button

<script setup lang="ts">
import { Button } from "@/components/ui/button"
</script>

<template>
  <Button variant="primary">Send</Button>
</template>

Put .newt-root on the wrapper in app.vue.

The module

@newtui/nuxt saves you the imports. It registers your components/ui directory with Nuxt, so Button.vue is available as <Button /> anywhere without the directory name in front of it, and it prepends the token stylesheet to your CSS so the variables exist before your own styles run. It needs Nuxt 4.

pnpm dlx --yes @newtui/nuxt

npx --yes @newtui/nuxt

yarn dlx --yes @newtui/nuxt

bunx --yes @newtui/nuxt

export default defineNuxtConfig({
  modules: ["@newtui/nuxt"],
  newt: {
    prefix: "", // "Newt" gives you <NewtButton />
    componentDir: "components",
    css: true, // false if you already ship the tokens
  },
})

All three options are optional. prefix namespaces the auto-imported names if a bare <Button /> would collide with something you already have, componentDir points at your components directory relative to the Nuxt source directory, and css: false turns the injected tokens off when your own CSS entry already carries them.

What init writes

components.json                          the config, shared with shadcn
app/assets/css/tailwind.css              the --newt-* token block
app/lib/utils.ts                         cn()
app/components/ui/button/Button.vue      add button
app/components/ui/button/index.ts

See Dark mode for the theme toggle, and RTL if the app has to run right to left.