Release Candidate
The Skeleton v4 Release Candidate is an early access preview and not yet intended for production use.
}
Skeleton v4 introduces a top-to-bottom overhaul of the component APIs. The goal has been to stabalized the internal and external APIs of our component system and ensure we can continue to introduce new components and new component frameworks over time.
## Prerequisites
We recommend you handle all migration changes on a dedicated feature branch. This ensures you can easily drop and revert if something goes wrong.
```console
git checkout -b migration
```
Make sure you've accounted for the following:
- Ensure each Skeleton package (core and framework) are updated to the latest v3.x release.
- Update all critical dependencies to their latest version (optional but recommended)
- Your app has been tested and is in a functional state.
---
## Migrate to v4 RC
For the Release Candidate, please update each Skeleton package to the early access `@next` version. Note that we will be updating these package frequently leading up to the full release.
**React**
```console
npm remove @skeletonlabs/skeleton @skeletonlabs/skeleton-react
npm i -D @skeletonlabs/skeleton@next @skeletonlabs/skeleton-react@next
```
**Svelte**
```console
npm remove @skeletonlabs/skeleton @skeletonlabs/skeleton-svelte
npm i -D @skeletonlabs/skeleton@next @skeletonlabs/skeleton-svelte@next
```
---
## Migrating Your Global Stylesheet
The following migration steps apply to your global stylesheet (ex: `app.css`).
### Replace Source Rules
The `@source` rules for sourcing component styles have been replaced with simpler and more intuitive `@import` rules.
```diff
- @source '../node_modules/@skeletonlabs/skeleton-{framework}/dist';
+ @import '@skeletonlabs/skeleton-{framework}';
```
### Remove Optional Preset Import
The optional preset import is no longer required as these styles are now part of the core package.
```diff
- @import '@skeletonlabs/skeleton/optional/presets';
```
---
## Migrating Components
Per the Skeleton v4 RC, we do not yet have an automated migration CLI. For now, you will need to manually migrate each component in your project to the new format. Please consult the code snippets found on each respective component's documentation page for reference. Below an example of that process using the Avatar component.
**Was (v3)**
```svelte