Migration
What to change when you move between Vamos UI preview releases. Each step is small; do them in order.
Versions at a glance
| Version | Package | What changes for you |
|---|---|---|
| 0.1 | The old preview package (source only, never on npm) | Starting point. |
| 0.2 | @vamos-ui/react | Rename imports and the CSS import. The npm package is compiled. New /scheduler/core subpath; /locale-data gets its data packs. |
| 0.3 | @vamos-ui/react | New /motion subpath. Site blocks animate by default (opt out with motion="off"). New blocks and example sites. |
0.1 → 0.2
New package name
The first preview was published from the repository under a different scope. From 0.2 the kit is @vamos-ui/react on npm, and the other packages are vamos-ui (CLI) and @vamos-ui/mcp. Replace the old name everywhere it appears; below it is written as <old preview package>, substitute the name from your package.json.
# 1. Swap the dependency
pnpm remove <old preview package>
pnpm add @vamos-ui/react
# 2. Rewrite imports (macOS: sed -i '' …). Check the diff before committing.
grep -rl "<old preview package>" src app | xargs sed -i 's#<old preview package>#@vamos-ui/react#g'Subpath imports keep their path; only the package part changes:
| 0.1 | 0.2+ |
|---|---|
<old preview package> | @vamos-ui/react |
<old preview package>/charts | @vamos-ui/react/charts |
<old preview package>/locale/tr | @vamos-ui/react/locale/tr |
<old preview package>/styles.css | @vamos-ui/react/styles.css |
/* before (0.1) */
@import "tailwindcss";
@import "<old preview package>/styles.css";
/* after (0.2+) */
@import "tailwindcss";
@import "@vamos-ui/react/styles.css";Compiled package
0.2 is the first release on npm. It ships compiled ESM with .d.ts files and keeps the "use client" directives, so bundlers no longer need to compile the kit.
// next.config.ts — 0.1 shipped TypeScript source and needed this.
// With the compiled npm package from 0.2 on, remove the entry (keep it only if you
// link the kit's workspace source in a monorepo).
const config: NextConfig = {
transpilePackages: ["@vamos-ui/react"],
};New and filled subpaths
@vamos-ui/react/scheduler/core— new: the React-free core of the scheduler (time scale, working-day math, event layout, Gantt scheduling, time-tracking helpers), importable from server components and workers.@vamos-ui/react/locale-data— the entry existed in 0.1 but exported nothing. From 0.2 it holds the React-free locale packs: week info, public holidays, working days, IBAN rules and decimals, with Turkish (tr) as the first pack.- Everything else from the 0.2 changelog (143 components, blocks, registry, CLI, MCP) is new and needs no change.
0.2 → 0.3
pnpm add @vamos-ui/react@^0.3.0Motion
0.3 adds @vamos-ui/react/motion (Reveal, Stagger, CountUp, Ticker, TextReveal, Parallax, ScrollProgress, Tilt, Magnetic, PageTransition, SkeletonSwap, useScrollShrink, MotionScope). Its CSS is part of styles.css, so there is nothing extra to import. Motion is CSS-first, never hides server-rendered content and renders the final state under reduced motion.
Blocks and sites
Behaviour change: SiteShell now has a motion level, subtle by default, and the site blocks (Hero, Feature grid, Stats band, Pricing table, Testimonials, FAQ, CTA, Media + text, Steps, Gallery section, Logo strip) animate on entry. To keep the 0.2 look:
// Keep 0.2 behaviour on a whole site: no entrance animations.
<SiteShell motion="off">…</SiteShell>
// Or for any subtree, including admin screens:
<div data-motion="off">…</div>If you have end-to-end tests that screenshot site pages, run them with reduced motion (Playwright: reducedMotion: "reduce") or wait for the entrance to finish.
If you copied components with the CLI
Copied files import from your alias, not from the package, so the rename does not touch them. Pull 0.3 changes with:
npx vamos-ui diff --summary # what changed upstream
npx vamos-ui upgrade # untouched files are replaced; edited ones show a diff and ask
npx vamos-ui add motion # the motion kit, if you want itFull release notes: Changelog.