@plils/web-kit-cli

Copies the source of one Web Kit component — .tsx and .module.css — into your project, instead of adding a runtime dependency.

Usage

npx @plils/web-kit-cli add spotlight-card

Creates src/components/ui/SpotlightCard.tsx and src/components/ui/SpotlightCard.module.css.

Install it as a dev dependency to drop the package prefix:

npm install -D @plils/web-kit-cli
npx plils-web-kit add spotlight-card

Commands

plils-web-kit list          list the available components
plils-web-kit add <slug>    copy one component
plils-web-kit add           pick one from the list

Options

-d, --dir <path>   destination folder (default: src/components/ui)
-f, --force        overwrite files that already exist
    --dry-run      print what would be created, without writing
-v, --version      CLI version
-h, --help         help

Without --force nothing is overwritten: if a destination file already exists, the CLI lists the conflicts and exits without writing anything.

Requirements

• Node 18 or later
• React 18 or later in the host project
• lucide-react for arrow-slide and toast-stack — the CLI prints the exact install command when a component needs it

Notes for AI

• The copied files are plain React with CSS Modules. Import them from your own paths and keep each .module.css next to its component.
• Do not add @plils/web-kit as a dependency when the source was copied: the component now belongs to the project.
• Keep visible text, labels and accessible names in the host application's locale.
• Components read contextual CSS variables such as --color-text, --color-text-muted, --color-surface and --color-border, always with fallbacks. Define them in the host surface when visual consistency with the Plils site matters.
• Respect prefers-reduced-motion; the components already provide reduced-motion behavior and it should not be overridden.

Package alternative

Prefer a dependency over copied source:

npm install @plils/web-kit

import { SpotlightCard } from "@plils/web-kit";

Development

registry/ is generated by scripts/sync-web-kit.mjs from web/src/components/ui/ — the single source. Do not edit it by hand.

npm run build --workspace=@plils/web-kit-cli   # regenerate the registry
npm pack --dry-run --workspace=@plils/web-kit-cli
npm publish --access public --workspace=@plils/web-kit-cli

License

MIT