Astro - Skeleton

Requirements

Tooling	Minimum Version
Astro	5
React	18
Svelte	5
Tailwind	4

Installation

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 GitHub or Discord.

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

Create a Project

Start by creating a new Astro project. We recommend selecting all default options.

npm create astro@latest my-skeleton-app
cd my-skeleton-app

Install Tailwind

Install Tailwind and and the Tailwind Vite plugin.

npm install tailwindcss @tailwindcss/vite

Implement the plugin in astro.config in the root of your project.

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

Install Skeleton

Install the Skeleton core package for the Tailwind plugin.

npm i -D @skeletonlabs/skeleton@next

Configure Tailwind

Locate the global stylesheet in ./src/styles/global.css and append the following at the top of the file.

@import 'tailwindcss';

@import '@skeletonlabs/skeleton';
@import '@skeletonlabs/skeleton/optional/presets';
@import '@skeletonlabs/skeleton/themes/cerberus';

Remove Default Content and Styles

We recommend you open /src/components/welcome.astro and remove all default HTML and CSS. Here’s a simple starter layout.

---
const framework = 'Astro';
---
<main class="p-10 space-y-4">
  <h1 class="h1">Hello {framework}</h1>
  <p>This page is working.</p>
  <button type="button" class="btn preset-filled">Example Button</button>
</main>

Set Active Theme

Open /src/layouts/Layout.astro, then set the data-theme attribute on the HTML tag to define the active theme.

<html data-theme="cerberus">...</html>

Run the Project

Start the dev server using the following command.

npm run dev

Using Components in Astro

While Astro can support multiple Frontend frameworks, please be aware this comes with some notable restrictions:

With the exception of this experimental React flag, components cannot utilize slotted content in .astro files.
You will need to install additional packages for both Astro and Skeleton per your framework of choice.
You may need a wrapper component to use to utilize all component feature. We’ll demo this below.

Astro Framework Packages

Install only the Astro framework(s) packages you intend to use.

npx astro add react

https://docs.astro.build/en/guides/integrations-guide/react/

npx astro add svelte

https://docs.astro.build/en/guides/integrations-guide/svelte/

Skeleton Framework Packages

Install only the Skeleton framework(s) packages you intend to use.

@skeletonlabs/skeleton-react@next

@skeletonlabs/skeleton-svelte@next

Using Wrapper Components

In most cases, frontend framework components may not be fully functional if used directly within .astro files. To overcome this, you may utilize a wrapper component of that framework. Here’s a demo using the Skeleton Avatar component as an example.

React

import React from 'react';
import { Avatar } from '@skeletonlabs/skeleton-react';

export const ReactAvatarWrapper: React.FC = () => {
  const imgSrc = '...';
  return <Avatar src={imgSrc} name="skeleton" />;
};

---
import { ReactAvatarWrapper } from '@components/ReactAvatarWrapper';
---

<ReactAvatarWrapper />

Svelte

<script lang="ts">
import { Avatar } from '@skeletonlabs/skeleton-svelte';
const imgSrc = '...';
</script>

<Avatar src={imgSrc} name="skeleton" />

---
import { SvelteAvatarWrapper } from '@components/SvelteAvatarWrapper';
---

<SvelteAvatarWrapper />

Run the Project

Start the dev server using the following command.

npm run dev