Docs

Usage examples

1. Fresh Astro project, free components only

Theme first, then two free Astro components — badge-tag and avatar-group, both in Core UI.

bash

velocityx theme
velocityx add badge-tag
velocityx add avatar-group

Resulting tree:

text

my-astro-site/
├── velocity-theme/
│   ├── velocity-preset.cjs
│   └── velocity-theme.css
├── src/
│   └── components/
│       └── velocity/
│           ├── badge-tag/
│           │   └── BadgeTag.astro
│           └── avatar-group/
│               └── AvatarGroup.astro
└── velocityx.lock.json

Both are zero peer-dependency Astro files — no React, no extra install. Still two manual steps from the theme command: add the preset to tailwind.config.js and import velocity-theme.css in your global stylesheet.

2. Next.js project, subscriber adding a paid component

A free React component (accordion-faq) and a subscription-only one (abandoned-cart-strip, Growth & Conversion) in the same run. Both need the react peer dependency, which the CLI tells you about but never installs for you.

bash

velocityx login vx_live_your_key_here
velocityx theme --dest styles/velocity-theme
velocityx add accordion-faq abandoned-cart-strip

Resulting tree:

text

my-next-app/
├── styles/
│   └── velocity-theme/
│       ├── velocity-preset.cjs
│       └── velocity-theme.css
├── src/
│   └── components/
│       └── velocity/
│           ├── accordion-faq/
│           │   └── Accordion.jsx
│           └── abandoned-cart-strip/
│               └── AbandonedCartStrip.tsx
└── velocityx.lock.json

--dest styles/velocity-theme only moves where the theme files land — add still defaults to writing components under src/, which is Next's src-dir layout.

3. Neither Astro nor React — pulling source to hand-port

There's no Vue or Svelte output from the registry. The practical move is to pull the closest component anyway, into a scratch folder, and port the markup by hand:

bash

velocityx theme
velocityx add badge-tag --dest .velocityx-reference

Resulting tree:

text

my-svelte-app/
├── velocity-theme/
│   ├── velocity-preset.cjs
│   └── velocity-theme.css
└── .velocityx-reference/
    └── components/
        └── velocity/
            └── badge-tag/
                └── BadgeTag.astro

Read .velocityx-reference/.../BadgeTag.astro for the markup and the primary-* / accent-* classes it uses, rebuild the same structure as a .svelte file, then delete the reference folder — the theme (installed to your project root either way) is the only piece that carries over unchanged.