Docs

Migration

What to change when you move between Vamos UI preview releases. Each step is small; do them in order.

Preview releases
Until 1.0, minor versions may change APIs. So far, no exported component or prop has been removed between 0.1 and 0.3: the breaking change is the package name, the rest is additive or opt-out.

Versions at a glance

VersionPackageWhat changes for you
0.1The old preview package (source only, never on npm)Starting point.
0.2@vamos-ui/reactRename imports and the CSS import. The npm package is compiled. New /scheduler/core subpath; /locale-data gets its data packs.
0.3@vamos-ui/reactNew /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.10.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
globals.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
// 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.0

Motion

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 it

Full release notes: Changelog.