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 | |
|---|---|
--force | Replace an existing yummaui.json |
-y, --yes | Skip 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, --all | Add every component |
--style <name> | soft, compact or squircle |
--radius <step> | none, small, medium, large or extra |
--overwrite | Replace files that already exist |
-y, --yes | Skip 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 | |
|---|---|
--write | Delete, instead of only listing |
-y, --yes | Skip 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
{
"componentsDir": "src/components/ui",
"alias": "@/components/ui",
"registry": "https://yummacss.com/ui/r"
}
| Field | Meaning |
|---|---|
componentsDir | Where components are written, relative to the project root |
alias | The import prefix for that directory, or null to use relative imports |
registry | Where components are fetched from |
style | The style add uses when --style is not given |
radius | The 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.