Vite (Vue)

Install newt/ui in a Vue 3 project built with Vite, from the template or into an app you already have.

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 vite-vue

npx newtui@latest init --preset <code> --template vite-vue

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

bunx newtui@latest init --preset <code> --template vite-vue

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 vite-vue

npx newtui@latest init --template vite-vue

yarn dlx newtui@latest init --template vite-vue

bunx newtui@latest init --template vite-vue

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 vite@latest my-app -- --template vue-ts

Add Tailwind

npm install tailwindcss @tailwindcss/vite

@import "tailwindcss";

Declare the alias twice

Once for the type checker, once for the bundler — init reads the first and your build needs the second:

{
  "compilerOptions": {
    "paths": { "@/*": ["./src/*"] }
  }
}

import { fileURLToPath } from "node:url"

import tailwindcss from "@tailwindcss/vite"
import vue from "@vitejs/plugin-vue"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [vue(), tailwindcss()],
  resolve: {
    alias: { "@": fileURLToPath(new URL("./src", import.meta.url)) },
  },
})

Run init

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

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

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

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

Both flags are guesses it usually makes on its own: the framework comes from your dependencies, the bundler from the presence of a vite.config. Pass them when it guesses wrong.

Load the stylesheet, then add a component

import "./assets/index.css"

.newt-root goes on the element that wraps the application — the <body> in index.html is the usual place.

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>

What init writes

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

A folder per component: the single-file components, and an index.ts barrel that re-exports them with their class-variance-authority variants.

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