# Astro
Install and configure Skeleton for Astro.
## Requirements
| Tooling | Minimum Supported |
| ------------------------------------ | ----------------- |
| [Astro](https://vite.dev/) | 5 |
| [React](https://react.dev/) | 18 |
| [Svelte](https://svelte.dev/) | 5 |
| [Tailwind](https://tailwindcss.com/) | 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.
```console
npm create astro@latest --add tailwind my-skeleton-app
cd my-skeleton-app
```
### Install Skeleton
Install the Skeleton core package for the Tailwind plugin.
```console
npm i -D @skeletonlabs/skeleton
```
### Configure Tailwind
Create a global styleshseet in `/src/styles/global.css` and add import the following.
```css title="global.css"
@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.
```astro
---
const framework = 'Astro';
import '../styles/global.css'
---
Hello {framework}
This page is working.
```
### Set Active Theme
Open `/src/layouts/Layout.astro`, then set the `data-theme` attribute on the HTML tag to define the active theme.
```html title="layouts/Layout.astro" "data-theme="cerberus""
...
```
### Run the Project
Start the dev server using the following command.
```console
npm run dev
```
## Using Components in Astro
While Astro can support [multiple Frontend frameworks](https://docs.astro.build/en/guides/integrations-guide/), please be aware this comes with some notable restrictions:
- With the exception of this [experimental React flag](https://docs.astro.build/en/guides/integrations-guide/react/#children-parsing), 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.
```console
npx astro add react
```
https://docs.astro.build/en/guides/integrations-guide/react/
```console
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.
```console
@skeletonlabs/skeleton-react
```
```console
@skeletonlabs/skeleton-svelte
```
### Add Style Imports
Import the stylesheets for the framework(s) you intend to use in your global stylesheet created above.
```css title="global.css"
@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
```tsx title="ReactAvatarWrapper.tsx"
import React from 'react';
import { Avatar } from '@skeletonlabs/skeleton-react';
export const ReactAvatarWrapper: React.FC = () => {
const imgSrc = '...';
return ;
};
```
```astro title="page.astro"
---
import { ReactAvatarWrapper } from '@/components/ReactAvatarWrapper';
---
```
#### Svelte
```svelte title="SvelteAvatarWrapper.svelte"
```
```astro title="page.astro"
---
import { SvelteAvatarWrapper } from '@/components/SvelteAvatarWrapper';
---
```
### Run the Project
Start the dev server using the following command.
```console
npm run dev
```