Upgrading

You installed Edmi at one version and a newer one is out. Components are copied into your project by the shadcn, shadcn-vue or shadcn-svelte CLI, so there is no npm update for them. You upgrade by adding the items again and reviewing the diff.

How versions work

• The Pages registry URL (https://viandwi24.github.io/edmi-ui/r/<framework>/{name}.json) always serves the latest release.
• jsDelivr serves pinned versions: https://cdn.jsdelivr.net/npm/@edmi-ui/registry-<framework>@0/r/<name>.json is the latest 0.x, @0.3.0 is exactly 0.3.0.
• @edmi-ui/tokens is a normal npm package: update it with your package manager (npm update, pnpm update, yarn up, bun update).
• Before 1.0 a minor release (0.2 to 0.3) may contain breaking changes. Read the Changelog (or the GitHub Release v<version>) first.

Recommended flow

1. Clean working tree. Commit or stash your work, ideally upgrade on a branch. The diff is your safety net.

2. Read the changelog for every version between yours and the target. Look for removed or renamed items, changed props and token changes.

3. Preview the change. The React CLI can show it without writing files:

   npmpnpmyarnbun

   npx shadcn@latest add @edmi-ui/button --dry-run

   pnpm dlx shadcn@latest add @edmi-ui/button --dry-run

   yarn dlx shadcn@latest add @edmi-ui/button --dry-run

   bunx shadcn@latest add @edmi-ui/button --dry-run

   --diff shows a diff for a file and --view shows file contents (see add --help for your CLI version). shadcn-vue and shadcn-svelte have no preview flag: upgrade on a scratch branch and use git diff.

4. Re-add with --overwrite. Single items, or everything you installed:

   npmpnpmyarnbun

   npx shadcn@latest add @edmi-ui/button @edmi-ui/card --overwrite

   pnpm dlx shadcn@latest add @edmi-ui/button @edmi-ui/card --overwrite

   yarn dlx shadcn@latest add @edmi-ui/button @edmi-ui/card --overwrite

   bunx shadcn@latest add @edmi-ui/button @edmi-ui/card --overwrite

   npmpnpmyarnbun

   npx shadcn@latest add @edmi-ui/theme @edmi-ui/all @edmi-ui/patterns @edmi-ui/ai-all --overwrite

   pnpm dlx shadcn@latest add @edmi-ui/theme @edmi-ui/all @edmi-ui/patterns @edmi-ui/ai-all --overwrite

   yarn dlx shadcn@latest add @edmi-ui/theme @edmi-ui/all @edmi-ui/patterns @edmi-ui/ai-all --overwrite

   bunx shadcn@latest add @edmi-ui/theme @edmi-ui/all @edmi-ui/patterns @edmi-ui/ai-all --overwrite

   Vue uses the same @edmi-ui/<name> names with shadcn-vue. Svelte takes URLs:

   npmpnpmyarnbun

   npx shadcn-svelte@latest add https://viandwi24.github.io/edmi-ui/r/svelte/theme.json https://viandwi24.github.io/edmi-ui/r/svelte/all.json --overwrite

   pnpm dlx shadcn-svelte@latest add https://viandwi24.github.io/edmi-ui/r/svelte/theme.json https://viandwi24.github.io/edmi-ui/r/svelte/all.json --overwrite

   yarn dlx shadcn-svelte@latest add https://viandwi24.github.io/edmi-ui/r/svelte/theme.json https://viandwi24.github.io/edmi-ui/r/svelte/all.json --overwrite

   bunx --bun shadcn-svelte@latest add https://viandwi24.github.io/edmi-ui/r/svelte/theme.json https://viandwi24.github.io/edmi-ui/r/svelte/all.json --overwrite

   Only add the entry items you originally installed (patterns and ai-all are optional). If you use a color theme item (theme-<base>-<accent>), install it again after theme.

5. Review git diff. Re-apply your local changes to overwritten files, fix call sites for changed or removed props, and run your typecheck and build. Check light and dark mode and every surface that used raised (see the 0.2 to 0.3 notes below).

6. Pinned CDN users: change the version in the URL (@0.2.0 to @0.3.0, or use the @0 range). If you pinned the registry in components.json (registries for React and Vue), change it there too.

From 0.2 to 0.3: raised becomes elevation

0.3 replaces the boolean raised prop with the elevation system. It is a breaking change and there is no alias: a leftover raised prop is a type error (or ends up on the DOM in Vue and Svelte).

What changed

• raised is removed everywhere. Use elevation="auto" | "sunken" | "flat" | "raised" | "floating" (default "auto").
• Raised no longer has a hard lip. It is a bevel (rim, top highlight, hairline); floating adds one soft drop; sunken is a soft inset. Pressed sinks 1px instead of 2px.
• Only the active part of tabs, toggle groups, pagination, calendars, switches and sliders rises. A raised TabsList raises the active trigger, not the list.
• New elevation item with ElevationProvider. Wrap a page in mode="layered" and every role takes its default level (filled buttons raised, fields sunken, cards raised, popovers and dialogs floating).
• New tokens (--bv-*, --sk-*, --r1-*, --fl-*) and a clearer dark ladder for the stone base. The theme item’s base rule now keys off [data-elevation=raised], [data-elevation=floating]. The old lip tokens remain for compatibility only.
• Demo and docs names changed from <name>-raised to <name>-elevation.

Steps

1. Re-add the entry items and every component you use with --overwrite (flow above). Always include theme and elevation; components that take depth install elevation as a dependency.
2. Replace every raised in your code. Search for raised, :raised, raised= and itemRaised.
3. Decide per page: keep it flat, raise a few things with the prop, or wrap the page in a layered ElevationProvider.
4. Delete any hand-written lip shadows and -lip border colours: use the prop or the shadow tokens.
5. Check light and dark mode, and any Toaster, TabsList, ToggleGroup, Pagination and Calendar that used raised.

Before and after

// 0.2
<Button raised>Get started</Button>
<TabsList raised variant="pills">…</TabsList>
<Card raised>…</Card>
<Toaster raised />

// 0.3
<Button elevation="raised">Get started</Button>
<TabsList elevation="raised" variant="pills">…</TabsList>
<Card elevation="raised">…</Card>
<Toaster elevation="raised" />

// 0.3, layered: no per-component props, roles decide
<ElevationProvider mode="layered">
  <App />
</ElevationProvider>

<!-- 0.2 -->
<Button raised>Get started</Button>
<TabsList raised variant="pills">…</TabsList>
<Card :raised="featured">…</Card>

<!-- 0.3 -->
<Button elevation="raised">Get started</Button>
<TabsList elevation="raised" variant="pills">…</TabsList>
<Card :elevation="featured ? 'raised' : 'flat'">…</Card>

<!-- 0.3, layered -->
<ElevationProvider mode="layered">
  <App />
</ElevationProvider>

<!-- 0.2 -->
<Button raised>Get started</Button>
<Tabs.List raised variant="pills">…</Tabs.List>
<Card.Root raised={featured}>…</Card.Root>

<!-- 0.3 -->
<Button elevation="raised">Get started</Button>
<Tabs.List elevation="raised" variant="pills">…</Tabs.List>
<Card.Root elevation={featured ? "raised" : "flat"}>…</Card.Root>

<!-- 0.3, layered -->
<ElevationProvider mode="layered">
  {@render children()}
</ElevationProvider>

The documentation examples and the example apps in the repository use layered mode for the Stockbreak pages and explicit levels for the Layerbeat page; open an example’s Code tab to see both styles. With the Agent skills installed your coding agent knows this migration.

Tips

• Keep customizations in wrapper components or className at call sites instead of editing installed files, so --overwrite never fights your changes.
• Keep the same iconLibrary in components.json, so icons are rewritten the same way.
• New dependencies of a newer version are installed by the CLI. If you skipped dependency install (--no-deps-install on Svelte), run your package manager afterwards.
• Renamed or removed items are called out in the changelog; delete the old file yourself after switching to the new item.
• Tell your coding agent: with the Agent skills installed it knows this flow.