Set Up a Project
Detects your framework, package manager & import alias before asking where components live.
pnpm dlx yummaui init
| Option | |
|---|---|
--force | Replace an existing yummaui.json |
-y, --yes | Skip prompts & take the defaults |
Add Components
Copies one or more components in. With no names, it opens a list to search & 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 & take the defaults |
It asks before installing what a component needs from npm, and 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 file counts as used only when something outside your components folder reaches it.
Configuration File
yummaui.json
{
"componentsDir": "src/components/ui",
"alias": "@/components/ui",
"registry": "https://yummacss.com/ui/registry"
}
| 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 |
Registry
The registry is static JSON published by this site.
https://yummacss.com/ui/registry/index.json every component, and the theme they animate with
https://yummacss.com/ui/registry/<id>.json one component's source and dependencies
https://yummacss.com/ui/registry/styles.json the styles and the radius steps each takes
https://yummacss.com/ui/registry/<style>-<radius>/<id>.json the same, rewritten for a style
Point registry at your own copy to serve components from somewhere else.