Skip to content

Manual installation

Everything the CLI does, done by hand — for a project the CLI cannot read, or one you would rather it did not touch.

The CLI is a convenience. Nothing it writes is magic, and a project it cannot read — an unusual monorepo layout, a bundler with its own alias scheme — can do the same four things by hand.

newt/create writes a preset into a project the CLI set up. This flavour has no config file for it to write to — the tokens are yours to edit directly.

There is nothing to initialise here: the files are copied by hand. The tab beside this one is the whole procedure.

Install the dependencies

pnpm dlx --yes class-variance-authority tailwindcss-animate
npx --yes class-variance-authority tailwindcss-animate
yarn dlx --yes class-variance-authority tailwindcss-animate
bunx --yes class-variance-authority tailwindcss-animate

Plus the class merger that matches your Tailwind major: cn on v4, or clsx with tailwind-merge on v3.

Add the cn helper

Every component imports it. On Tailwind v4:

export { cn } from "cn"

On v3, where the merge tables still understand v3 class names:

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Add the tokens

Copy the --newt-* block from tokens.css into your global stylesheet, then map them onto Tailwind — an @theme block on v4, a preset on v3. Both projections are in Theming.

Copy the component

Take the source from the component’s page — every one of them lists its files under Installation → Manual — and fix the two imports at the top: the cn helper, and any sibling component it builds on.