1. get started
  2. ›
  3. Installation
  4. ›
  5. astro

Astro

Install and configure Skeleton for Astro.

Requirements

ToolingMinimum 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.

1

Create a Project

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

bash 
npm create astro@latest --add tailwind my-skeleton-app
cd my-skeleton-app
2

Install Skeleton

Install the Skeleton core package for the Tailwind plugin.

bash 
npm i -D @skeletonlabs/skeleton
3

Configure Tailwind

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

css 
@import 'tailwindcss';

@import '@skeletonlabs/skeleton'; 
@import '@skeletonlabs/skeleton/themes/cerberus';
4

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.

astro 
---
import '../styles/global.css';

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-primary-500">Example Button</button>
</main>
5

Set Active Theme

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

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

Run the Project

Start the dev server using the following command.

bash 
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.
1
2

Skeleton Framework Packages

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

bash 
@skeletonlabs/skeleton-react
bash 
@skeletonlabs/skeleton-svelte
3

Add Style Imports

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

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

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

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

export function AvatarWrapper() {
	const imgSrc = '...';
	return <Avatar src={imgSrc} name="skeleton" />;
}
astro 
---
import { AvatarWrapper } from '@/components/avatar-wrapper';
---

<AvatarWrapper />

Svelte

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

<Avatar src={imgSrc} name="skeleton" />
astro 
---
import AvatarWrapper from '@/components/avatar-wrapper.svelte';
---

<AvatarWrapper />

Run the Project

Start the dev server using the following command.

bash 
npm run dev
View page on GitHub