# 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.
```bash
npm create astro@latest --add tailwind my-skeleton-app
cd my-skeleton-app
```
### Install Skeleton
Install the Skeleton core package for the Tailwind plugin.
```bash
npm i -D @skeletonlabs/skeleton
```
### Configure Tailwind
Create a global stylesheet in `/src/styles/global.css` and add import the following.
```css
@import 'tailwindcss';
@import '@skeletonlabs/skeleton'; /* [!code ++] */
@import '@skeletonlabs/skeleton/themes/cerberus'; /* [!code ++] */
```
### 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';
---
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
```
### 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](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.
```bash
npx astro add react
```
https\://docs.astro.build/en/guides/integrations-guide/react/
```bash
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.
```bash
@skeletonlabs/skeleton-react
```
```bash
@skeletonlabs/skeleton-svelte
```
### 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'; /* [!code ++] */
@import '@skeletonlabs/skeleton-svelte'; /* [!code ++] */
```
### 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 ;
}
```
```astro
---
import { AvatarWrapper } from '@/components/avatar-wrapper';
---
```
#### Svelte
```svelte
```
```astro
---
import AvatarWrapper from '@/components/avatar-wrapper.svelte';
---
```
### Run the Project
Start the dev server using the following command.
```bash
npm run dev
```