Skip to main content

CLI

Every yummaui command, flag and config field.

yummaui copies component files into your project. It is never a dependency, so there is nothing to install and nothing to keep up to date.

pnpm dlx yummaui <command>

Every example below uses pnpm dlx. The runner is npx, yarn dlx or bunx on the other three, and init and add print whichever one matches the project they find.

Set Up a Project

Writes yummaui.json. It detects your framework, package manager and import alias first, then asks where components should live: src/components/ui when the project has a src folder, components/ui otherwise.

pnpm dlx yummaui init

When Yumma CSS is not set up, init offers to do it: it installs yummacss and @yummacss/vite or @yummacss/postcss, registers the plugin in vite.config or postcss.config, writes yumma.config.mjs with the states and keyframes the components animate with, and adds @yummacss; to the stylesheet your app loads. Where a file cannot be changed safely, it prints the line to add.

Option
--forceReplace an existing yummaui.json
-y, --yesSkip prompts and take the defaults

Add Components

Copies one or more components in. With no names, it opens a list to search and pick from.

pnpm dlx yummaui add button
pnpm dlx yummaui add dialog tooltip
pnpm dlx yummaui add
pnpm dlx yummaui add --all
pnpm dlx yummaui add button --style compact --radius small
Option
-a, --allAdd every component
--style <name>soft, compact or squircle
--radius <step>none, small, medium, large or extra
--overwriteReplace files that already exist
-y, --yesSkip prompts and take the defaults

Anything a component needs from npm is installed with the package manager the project already uses, after asking. add offers the same Yumma CSS setup as init when it is missing.

List Components

pnpm dlx yummaui list

Prints every component.

Remove Unused Components

Finds component files nothing in your project reaches.

pnpm dlx yummaui prune
pnpm dlx yummaui prune --write
Option
--writeDelete, instead of only listing
-y, --yesSkip the confirmation

Only files add wrote are ever candidates. Your own components in the same folder are never touched.

A component can import another, so "is anything importing this file" would keep a whole unused chain alive. prune asks whether a file is reachable from outside your components directory instead, and reports every file in an unused chain.

Listing is the default. Deleting takes --write and a confirmation.

Configuration File

yummaui.json
{
  "componentsDir": "src/components/ui",
  "alias": "@/components/ui",
  "registry": "https://yummacss.com/ui/r"
}
FieldMeaning
componentsDirWhere components are written, relative to the project root
aliasThe import prefix for that directory, or null to use relative imports
registryWhere components are fetched from
styleThe style add uses when --style is not given
radiusThe radius add uses when --radius is not given

There is no record of what you installed, and none is needed: componentsDir is the answer.

Registry

The registry is static JSON published by this site.

https://yummacss.com/ui/r/index.json                     every component, and the theme they animate with
https://yummacss.com/ui/r/<id>.json                      one component's source and dependencies
https://yummacss.com/ui/r/styles.json                    the styles and the radius steps each takes
https://yummacss.com/ui/r/<style>-<radius>/<id>.json     the same, rewritten for a style

Point registry at your own copy to serve components from somewhere else.