Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ Extends Tailwind's base layer with a set of opinionated global styles.
<figure class="linker bg-noise">
<a
class="btn preset-filled"
href="https://github.com/skeletonlabs/skeleton/blob/next/packages/skeleton/src/base/globals.css"
href="https://github.com/skeletonlabs/skeleton/blob/main/packages/skeleton/src/base/globals.css"
target="_blank"
>
View Global Styles
Expand All @@ -48,7 +48,7 @@ Uses Tailwind's `@theme` to implement a variety of new properties and utility cl
<figure class="linker bg-noise">
<a
class="btn preset-filled"
href="https://github.com/skeletonlabs/skeleton/blob/next/packages/skeleton/src/base/theme.scss"
href="https://github.com/skeletonlabs/skeleton/blob/main/packages/skeleton/src/base/theme.scss"
target="_blank"
>
View Theme Properties
Expand Down Expand Up @@ -162,7 +162,7 @@ Sets the default width for border, divide, and ring width to match the active th
## @utility

<figure class="linker bg-noise">
<a href="https://github.com/skeletonlabs/skeleton/blob/next/packages/skeleton/src/utilities" target="_blank" class="btn preset-filled">
<a href="https://github.com/skeletonlabs/skeleton/blob/main/packages/skeleton/src/utilities" target="_blank" class="btn preset-filled">
View Utilites
</a>
</figure>
Expand All @@ -176,7 +176,7 @@ Allow you to style semantic HTML elements with utility classes.
## @variant

<figure class="linker bg-noise">
<a href="https://github.com/skeletonlabs/skeleton/blob/next/packages/skeleton/src/variants" target="_blank" class="btn preset-filled">
<a href="https://github.com/skeletonlabs/skeleton/blob/main/packages/skeleton/src/variants" target="_blank" class="btn preset-filled">
View Variants
</a>
</figure>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,34 +14,15 @@ import ProcessStep from '@components/docs/ProcessStep.astro';

## Requirements

| Tooling | Minimum Version |
| ------------------------------------ | --------------- |
| [Astro](https://vite.dev/) | 5 |
| [React](https://react.dev/) | 18 |
| [Svelte](https://svelte.dev/) | 5 |
| [Tailwind](https://tailwindcss.com/) | 4 |
| Tooling | Supported Versions |
| ------------------------------------ | ------------------ |
| [Astro](https://vite.dev/) | 5 |
| [React](https://react.dev/) | 18 |
| [Svelte](https://svelte.dev/) | 5 |
| [Tailwind](https://tailwindcss.com/) | 4 |

## Installation

{

<div className="card preset-outlined-error-500 preset-tonal-error p-8 space-y-8">
<p>
WARNING: The following guide will install a pre-release version of Skeleton v3. Some features may be missing, incomplete, or
non-functional at this time. Please report bugs and issues on{' '}
<a className="anchor" href="https://github.com/skeletonlabs/skeleton/issues/new/choose" target="_blank" rel="external">
GitHub
</a>{' '}
or{' '}
<a className="anchor" href="https://discord.gg/EXqV7W8MtY" target="_blank" rel="external">
Discord
</a>
.
</p>
</div>

}

Learn how to install the Skeleton core into your Astro project. We'll cover using components in the section below.

<Process>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,33 +14,14 @@ import ProcessStep from '@components/docs/ProcessStep.astro';

## Requirements

| Tooling | Minimum Version |
| ------------------------------------ | --------------- |
| [Next.js](https://nextjs.org/) | 15 |
| [React](https://react.dev/) | 18 |
| [Tailwind](https://tailwindcss.com/) | 4 |
| Tooling | Supported Versions |
| ------------------------------------ | ------------------ |
| [Next.js](https://nextjs.org/) | 15 |
| [React](https://react.dev/) | 18 |
| [Tailwind](https://tailwindcss.com/) | 4 |

## Installation

{

<div className="card preset-outlined-error-500 preset-tonal-error p-8 space-y-8">
<p>
WARNING: The following guide will install a pre-release version of Skeleton v3. Some features may be missing, incomplete, or
non-functional at this time. Please report bugs and issues on{' '}
<a className="anchor" href="https://github.com/skeletonlabs/skeleton/issues/new/choose" target="_blank" rel="external">
GitHub
</a>{' '}
or{' '}
<a className="anchor" href="https://discord.gg/EXqV7W8MtY" target="_blank" rel="external">
Discord
</a>
.
</p>
</div>

}

<Process>
<ProcessStep step="1">
### Create a Project
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: '@layouts/LayoutDoc.astro'
title: Other
description: Generic guidance for installing Skeleton for other frameworks.
title: Other Frameworks
description: Install Skeleton for other frameworks.
order: 1000
---

Expand All @@ -16,7 +16,7 @@ import ProcessStep from '@components/docs/ProcessStep.astro';

Skeleton's [Core Package](/docs/get-started/core-api) is framework agnostic, meaning many of the Design System and Tailwind-centric features can used on any number of frameworks. This includes everything _except_ components. In order to install Skeleton for additional framework, your app must be able to support the following:

| Tooling | Minimum Version |
| Tooling | Supported Versions |
| ------------------------------------ | --------------------- |
| Package Management | NPM, PNPM, Yarn, etc. |
| [Tailwind](https://tailwindcss.com/) | 4 |
Expand All @@ -25,25 +25,6 @@ The exact instructions for installing Skeleton will differ per framework, howeve

## Installation

{

<div className="card preset-outlined-error-500 preset-tonal-error p-8 space-y-8">
<p>
WARNING: The following guide will install a pre-release version of Skeleton v3. Some features may be missing, incomplete, or
non-functional at this time. Please report bugs and issues on{' '}
<a className="anchor" href="https://github.com/skeletonlabs/skeleton/issues/new/choose" target="_blank" rel="external">
GitHub
</a>{' '}
or{' '}
<a className="anchor" href="https://discord.gg/EXqV7W8MtY" target="_blank" rel="external">
Discord
</a>
.
</p>
</div>

}

<Process>
<ProcessStep step="1">
### Create a Project
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,33 +14,14 @@ import ProcessStep from '@components/docs/ProcessStep.astro';

## Requirements

| Tooling | Minimum Version |
| ------------------------------------ | --------------- |
| [SvelteKit](https://svelte.dev/) | 2 |
| [Svelte](https://svelte.dev/) | 5 |
| [Tailwind](https://tailwindcss.com/) | 4 |
| Tooling | Supported Versions |
| ------------------------------------ | ------------------ |
| [SvelteKit](https://svelte.dev/) | 2 |
| [Svelte](https://svelte.dev/) | 5 |
| [Tailwind](https://tailwindcss.com/) | 4 |

## Installation

{

<div className="card preset-outlined-error-500 preset-tonal-error p-8 space-y-8">
<p>
WARNING: The following guide will install a pre-release version of Skeleton v3. Some features may be missing, incomplete, or
non-functional at this time. Please report bugs and issues on{' '}
<a className="anchor" href="https://github.com/skeletonlabs/skeleton/issues/new/choose" target="_blank" rel="external">
GitHub
</a>{' '}
or{' '}
<a className="anchor" href="https://discord.gg/EXqV7W8MtY" target="_blank" rel="external">
Discord
</a>
.
</p>
</div>

}

<Process>
<ProcessStep step="1">
### Create a Project
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,33 +14,14 @@ import ProcessStep from '@components/docs/ProcessStep.astro';

## Requirements

| Tooling | Minimum Version |
| ------------------------------------ | --------------- |
| [Vite](https://vite.dev/) | 6 |
| [React](https://react.dev/) | 18 |
| [Tailwind](https://tailwindcss.com/) | 4 |
| Tooling | Supported Versions |
| ------------------------------------ | ------------------ |
| [Vite](https://vite.dev/) | 6 |
| [React](https://react.dev/) | 18 |
| [Tailwind](https://tailwindcss.com/) | 4 |

## Installation

{

<div className="card preset-outlined-error-500 preset-tonal-error p-8 space-y-8">
<p>
WARNING: The following guide will install a pre-release version of Skeleton v3. Some features may be missing, incomplete, or
non-functional at this time. Please report bugs and issues on{' '}
<a className="anchor" href="https://github.com/skeletonlabs/skeleton/issues/new/choose" target="_blank" rel="external">
GitHub
</a>{' '}
or{' '}
<a className="anchor" href="https://discord.gg/EXqV7W8MtY" target="_blank" rel="external">
Discord
</a>
.
</p>
</div>

}

<Process>
<ProcessStep step="1">
### Create a Project
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,33 +14,14 @@ import ProcessStep from '@components/docs/ProcessStep.astro';

## Requirements

| Tooling | Minimum Version |
| ------------------------------------ | --------------- |
| [Vite](https://vite.dev/) | 6 |
| [Svelte](https://svelte.dev/) | 5 |
| [Tailwind](https://tailwindcss.com/) | 4 |
| Tooling | Supported Versions |
| ------------------------------------ | ------------------ |
| [Vite](https://vite.dev/) | 6 |
| [Svelte](https://svelte.dev/) | 5 |
| [Tailwind](https://tailwindcss.com/) | 4 |

## Installation

{

<div className="card preset-outlined-error-500 preset-tonal-error p-8 space-y-8">
<p>
WARNING: The following guide will install a pre-release version of Skeleton v3. Some features may be missing, incomplete, or
non-functional at this time. Please report bugs and issues on{' '}
<a className="anchor" href="https://github.com/skeletonlabs/skeleton/issues/new/choose" target="_blank" rel="external">
GitHub
</a>{' '}
or{' '}
<a className="anchor" href="https://discord.gg/EXqV7W8MtY" target="_blank" rel="external">
Discord
</a>
.
</p>
</div>

}

<Process>
<ProcessStep step="1">
### Create a Project
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,6 @@ order: 9999
export const components = componentSet;
import NavGrid from '@components/docs/NavGrid.astro';

{

<div className="card preset-outlined-error-500 preset-tonal-error p-8 space-y-8">
<p>
WARNING: Skeleton v3 is currently in a pre-release status. It is not yet intended for production use. This may include bugs, incomplete
documentation, and breaking changes leading up to the full release. Depending on the scale and scope of of your project, we may even
encourage of your application to take full advantage of all changes.
</p>
</div>

}

## Introduction

Version 3 represents a major overhaul to Skeleton. This includes a ground up rewrite of quite literally every feature in the library. We have provided a migration CLI to help automate this process. However, some portions of this migration will still required manual intervention. This is not a trivial migration from prior versions, so please use caution when updating and ensure you follow this guide very carefully.
Expand Down Expand Up @@ -53,11 +41,23 @@ Skeleton is built on top of the following technologies. These must be migrated i

### Svelte v5

Migrate to the latest release of Svelte v5 ([migration guide](https://svelte.dev/docs/svelte/v5-migration-guide))
Migrate to the latest release of Svelte v5.

<figure class="linker bg-noise">
<a class="btn preset-filled" href="https://svelte.dev/docs/svelte/v5-migration-guide" target="_blank">
Svelte v5 Migration &rarr;
</a>
</figure>

### SvelteKit v2

Migrate to the latest release of SvelteKit v2 ([migration guide](https://svelte.dev/docs/kit/migrating-to-sveltekit-2))
Migrate to the latest release of SvelteKit v2.

<figure class="linker bg-noise">
<a class="btn preset-filled" href="https://svelte.dev/docs/kit/migrating-to-sveltekit-2" target="_blank">
SvelteKit v2 Migration &rarr;
</a>
</figure>

### Tailwind v4

Expand All @@ -67,7 +67,13 @@ Before migration to tailwind V4 using their upgrade guide some manual steps are
2. Rename your `app.postcss` or `app.pcss` to `app.css`.
3. Remove the `purgecss` (`vite-plugin-tailwind-purgecss`) vite plugin from your `vite.config` (if installed).

Migrate to the latest release of Tailwind v4 ([migration guide](https://tailwindcss.com/docs/upgrade-guide))
Migrate to the latest release of Tailwind v4.

<figure class="linker bg-noise">
<a class="btn preset-filled" href="https://tailwindcss.com/docs/upgrade-guide" target="_blank">
Tailwind v4 Migration &rarr;
</a>
</figure>

---

Expand Down Expand Up @@ -119,17 +125,6 @@ What will NOT be migrated...

Make sure to consult your local Git Diff to compare what has been modified before progressing forward or committing these automated changes.

{

<div class="card preset-outlined-warning-500 preset-tonal-warning p-8 space-y-8">
<p>
Early Adopters: In extremely rare instances the CLI may modify values outside the scope of Skeleton. If this occurs, please report this
as a bug in the <code className="code">#skeleton-cli-beta</code> channel on Discord!
</p>
</div>

}

---

## Additional Migration
Expand Down
7 changes: 3 additions & 4 deletions sites/next.skeleton.dev/src/layouts/LayoutDoc.astro
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,11 @@ const layoutProps = {
classList: 'grid grid-rows-[auto_1fr]'
};
// GitHub Settings
const branch = 'next';
// @ts-expect-error - FIXME: update before launch
const docSite = branch === 'master' ? 'skeleton.dev' : 'next.skeleton.dev';
const branch = 'main';
const site = 'skeleton.dev';
// URLs
const urls = {
githubDocsUrl: `https://github.com/skeletonlabs/skeleton/tree/${branch}/sites/${docSite}/src/content`,
githubDocsUrl: `https://github.com/skeletonlabs/skeleton/tree/${branch}/sites/${site}/src/content`,
githubSkeletonUrl: `https://github.com/skeletonlabs/skeleton/tree/${branch}/packages/skeleton/src`,
githubSvelteUrl: `https://github.com/skeletonlabs/skeleton/tree/${branch}/packages/skeleton-svelte`,
githubReactUrl: `https://github.com/skeletonlabs/skeleton/tree/${branch}/packages/skeleton-react`
Expand Down
8 changes: 2 additions & 6 deletions sites/next.skeleton.dev/src/layouts/LayoutRoot.astro
Original file line number Diff line number Diff line change
Expand Up @@ -81,12 +81,8 @@ const meta = {
});
</script>
<!-- Analytics -->
<script
type="text/partytown"
defer
data-domain="next.skeleton.dev"
src="https://events.plygrnd.org/js/script.outbound-links.js"
is:inline></script>
<script type="text/partytown" defer data-domain="skeleton.dev" src="https://events.plygrnd.org/js/script.outbound-links.js" is:inline
></script>
<script>
declare global {
interface Window {
Expand Down