Skeleton

WARNING: The following guide will install a pre-release version of Skeleton v3. Be aware that 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 using Astro Add:

npx astro add tailwind

Install Skeleton

Install the Skeleton core package for the Tailwind plugin. Once again, please note this does not include components.

npm i -D @skeletonlabs/skeleton@next

Configure Tailwind

Open tailwind.config in the root of your project and make the following changes:

import { skeleton } from '@skeletonlabs/skeleton/plugin';
import * as themes from '@skeletonlabs/skeleton/themes';

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [
    skeleton({
      // NOTE: each theme included will increase the size of your CSS bundle
      themes: [themes.cerberus, themes.rose],
    }),
  ],
};

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 body tag to define the active theme.

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

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 flag for React children, 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

Configure Tailwind

Open tailwind.config in the root of your project and make these changes. First, include the contentPath import.

import { skeleton, contentPath } from '@skeletonlabs/skeleton';

Then append content for ONLY the framework(s) you intend to use.

export default {
  {/* ... */}
  content: [
    './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}', // <-- Keep this
    contentPath(import.meta.url, 'react'), // <-- Add this for React
    contentPath(import.meta.url, 'svelte') // <-- Add this for 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