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

Astro

Install and configure Skeleton for 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.

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