Astro

Requirements

Tooling	Minimum Supported
Astro	5
React	18
Svelte	5
Tailwind	4

Installation

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 --add tailwind my-skeleton-app
cd my-skeleton-app

Install Skeleton

Install the Skeleton core package for the Tailwind plugin.

npm i -D @skeletonlabs/skeleton

Configure Tailwind

Create a global styleshseet in /src/styles/global.css and add import the following.

@import 'tailwindcss';

@import '@skeletonlabs/skeleton';
@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';
import '../styles/global.css'
---
<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-primary-500">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

@skeletonlabs/skeleton-svelte

Add Style Imports

Import the stylesheets for the framework(s) you intend to use in your global stylesheet created above.

@import '@skeletonlabs/skeleton-react'; 
@import '@skeletonlabs/skeleton-svelte';

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