Create a style preset.
A Wensity preset is a shareable wsty1… code that encodes icon library, radius, fonts, and control-solid colors for UI primitives. Generate one in the visual studio, copy the CLI command, and every later wensity add reuses those settings.
Presets do not retheme premium /components or blocks. They only write style into wensity.json and a delimited --primitive-* CSS block.
What a preset is
Tabler or Lucide for primitives. The CLI rewrites named imports at install time.
None, Small, Medium, or Large, maps to --primitive-radius and derived roles.
Built-in body, heading, and mono IDs, or advanced custom stacks that pass the shared grammar.
Light and dark solid / hover / active / foreground roles for primary controls.
Export a code
Open the Create preset studio, adjust settings, then use Get code. You receive:
- A
wsty1…preset code - Ready-to-run commands for a new project (
init --preset) or an existing project (apply --preset)
Share the studio URL with query params when you want someone else to reopen the same style. Nothing is stored on a Wensity server.
New project
Scaffold (optional) and initialise with a preset in one step:
$pnpm dlx wensity@latest init --preset wsty1.YOUR_CODE --template next
--template accepts next, vite, astro, or react-router. Omit it when the app already exists and you only need Wensity config + primitive CSS.
- Writes
wensity.jsonwithversionandstyle. - Upserts the
--primitive-*CSS block into your configured Tailwind CSS file. - Installs helper peers (
clsx,tailwind-merge) unless you pass--no-install. - Does not download every primitive. Run
wensity add <slug>for each control you need.
Existing project
When wensity.json already exists, prefer apply for style-only updates:
$pnpm dlx wensity@latest apply --preset wsty1.YOUR_CODE
apply --preset merges style and upserts primitive CSS without scaffolding helper files. Installed component source is never rewritten. Use wensity update <slug> after an icon-library change if you need local files refreshed.
init --preset can also merge style into an existing config without --force. Plain init still refuses an existing wensity.json unless you pass --force.
Inspect a code
Decode a code before you apply it:
$pnpm dlx wensity@latest preset inspect wsty1.YOUR_CODE
Add --json for machine-readable output (fonts, packages, resolved tokens).
Install primitives
After init or apply:
$pnpm dlx wensity@latest add button
Browse the catalog at /primitives. Canonical routes are /primitives/<slug>, do not deep-link primitives through /components/<slug>.
Scope and limits
Presets customize UI primitives under /primitives. Premium /components and blocks ignore style.iconLibrary and stay Tabler-canonical. Public shadcn mirrors (@wensity/*) also stay Tabler-only. Use the Wensity CLI when you need Lucide.
- Installed files are editable open-code with no
@wensity/uiruntime import. - Custom font stacks must not include
;,{, orurl(. Prefer built-in font IDs. - If
package.jsonalready lists the opposite icon library, the CLI warns and does not uninstall it. - Phosphor/Hugeicons and automatic migration of already-installed icon imports are not supported yet.
Troubleshooting
| Problem | Fix |
|---|---|
Invalid preset: … | Regenerate in the studio. Do not hand-edit encoded payloads. |
| Font / color rejected on the site | The encoder matches CLI validators, fix the field until the command appears. |
| Style changed but icons look wrong | Run wensity update <primitive-slug> so local source picks up the new icon library. |
| Need CSS only, no scaffold | Use apply --preset, not plain init. |