Presets
One code carries the five things a project actually varies, and the CLI knows how to read it.
newt/create is the builder. This page is what it hands you.
What a preset is
A preset is not a theme file. It is a short list of overrides for tokens that already exist, which is why a project without one looks exactly like a project whose preset is the defaults. Five axes, plus the framework you chose them for:
| Key | Axis | Values |
|---|---|---|
t |
Target framework | any of the ten on Installation |
b |
Brand hue | #rrggbb — it becomes --newt-brand and its hover and active steps |
r |
Radius scale | sm, md, lg |
f |
Font stack | inter, system, mono-first |
m |
Surfaces | dark, light |
d |
Direction | ltr, rtl |
The code is nt1. followed by that payload as base64url. The version is in the
prefix and in the payload, so a link shared today cannot quietly decode into
something else after a new axis is added.
Use it when you create the project
pnpm dlx newtui@latest init --template next --preset nt1.…npx newtui@latest init --template next --preset nt1.…yarn dlx newtui@latest init --template next --preset nt1.…bunx newtui@latest init --template next --preset nt1.…--template creates the project first, by running the creator that framework
maintains, and then init continues inside the result. It accepts next,
vite-react, vite-vue and nuxt. Every other target is created with its own
tool — laravel new, create-react-router, npm create astro — and init
runs afterwards:
pnpm dlx newtui@latest init --preset nt1.…npx newtui@latest init --preset nt1.…yarn dlx newtui@latest init --preset nt1.…bunx newtui@latest init --preset nt1.…The preset that names one of those frameworks still records the choice. It just does not imply a template, and the CLI says so rather than inventing one.
Or afterwards
pnpm dlx newtui@latest apply --preset nt1.…npx newtui@latest apply --preset nt1.…yarn dlx newtui@latest apply --preset nt1.…bunx newtui@latest apply --preset nt1.…apply is the second half of init --preset on its own: it writes the block
into the stylesheet components.json points at, and nothing else. A stylesheet
that already carries a preset has that one replaced, not a second one appended
— two blocks would both apply and the winner would be whichever came last
rather than whichever was chosen.
--dry-run prints the block and writes nothing.
What it writes
After the token block, fenced by two comments so it can be found again and deleted in one selection:
/* newt/ui preset nt1.… — newt/create */
:root {
--newt-brand: #eb459e;
--newt-brand-hover: #c83a86;
--newt-brand-active: #a5306e;
--newt-radius-sm: 4px;
--newt-radius-md: 8px;
--newt-radius-lg: 12px;
--newt-font-sans: "Inter", "gg sans", -apple-system, sans-serif;
--newt-font-display: "Inter", sans-serif;
}
/* end newt/ui preset */Light surfaces and right-to-left add a line each — color-scheme and
--newt-dir — because the rest of those two features is an attribute on
<html>, which is yours to set. See Dark mode and
RTL.
Reading a code
npx newtui@latest preset decode nt1.…framework next
template next
brand #5865f2
radius md
font inter
mode dark
direction ltrpreset encode '{"t":"nuxt"}' goes the other way, starting from the defaults,
and preset css <code> prints the block without touching a project.
Sharing one
The builder keeps its state in the URL and nowhere else: /create?p=nt1.…
restores every control. A preset worth keeping is a preset worth sending to
someone, and browser storage cannot be sent.