# Initial Setup
It is highly recommended to use the CLI for installation, although manual steps are below as well.
> **Info:** Starwind UI is designed for Astro v6 and Tailwind CSS v4.
## CLI Installation
1. Create a new Astro project (you could also start with an existing project).
```bash
npm create astro@latest
```
Follow the instructions and configure your base Astro project.
**Tip:** If using pnpm, it is recommended to create a `.npmrc` file in the root of your project with the following content:
```text title=".npmrc"
auto-install-peers=true
node-linker=hoisted
lockfile=true
```
2. Run the CLI
Use the `starwind init` command to initialize project configuration. This will set up `tsconfig.json` for the necessary path aliases, create a `starwind.config.json` file in your project, adjust your `astro.config.mjs` file, import the `starwind.css` file into your main layout, and install dependencies.
```bash
npx starwind@latest init
```
If you choose not to install dependencies here, you will need to manually install them later.
3. Import the `starwind.css` file into your main layout. This is likely `src/layouts/Layout.astro`, but could vary depending on your project structure. Note that for common layout file names and locations, the CLI will automatically handle this for you.
```astro title="src/layouts/Layout.astro" ins={1-4}
---
// style import
import "@/styles/starwind.css";
---
```
4. That's it!
You can now start adding components to your project.
```bash
npx starwind@latest add button
```
The command above will add the `Button` component to your project. You can now use it like this:
```astro
---
import { Button } from "@/components/starwind/button";
---
Astro
```
5. Enjoy using Starwind UI 🚀
## Manual Installation
If you wish not to use the CLI (you monster), you can set up your project manually. Only step #3 will change from the above instructions.
Instead of using the CLI in step #3, do the following:
1. Add the following code to the `tsconfig.json` file to resolve paths:
```json title="tsconfig.json" ins={3-8}
{
// ...
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
}
}
}
```
2. Create a `starwind.config.json` file in your project root with the following content:
```json title="starwind.config.json"
{
"$schema": "https://starwind.dev/config-schema.json",
"tailwind": {
"css": "src/styles/starwind.css",
"baseColor": "neutral",
"cssVariables": true
},
"componentDir": "src/components",
"components": []
}
```
3. Install the necessary dependencies:
```bash
npm install tailwindcss@^4 @tailwindcss/vite@^4 @tailwindcss/forms@^0.5 tw-animate-css@^1 tailwind-variants@^3 tailwind-merge@^3 @tabler/icons@^3
```
4. Edit your `astro.config.mjs` file:
```js title="astro.config.mjs" ins={2,5-9}
import { defineConfig } from 'astro/config';
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
vite: {
plugins: [tailwindcss()],
},
})
```
5. Create the base starwind css file `src/styles/starwind.css`:
```css title="src/styles/starwind.css"
@import "tailwindcss";
@import "tw-animate-css";
@plugin "@tailwindcss/forms";
@custom-variant dark (&:where(.dark, .dark *));
@theme {
--animate-accordion-down: accordion-down 0.2s ease-out;
--animate-accordion-up: accordion-up 0.2s ease-out;
@keyframes accordion-down {
from {
height: 0;
}
to {
height: var(--starwind-accordion-content-height);
}
}
@keyframes accordion-up {
from {
height: var(--starwind-accordion-content-height);
}
to {
height: 0;
}
}
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-primary-accent: var(--primary-accent);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-secondary-accent: var(--secondary-accent);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-info: var(--info);
--color-info-foreground: var(--info-foreground);
--color-success: var(--success);
--color-success-foreground: var(--success-foreground);
--color-warning: var(--warning);
--color-warning-foreground: var(--warning-foreground);
--color-error: var(--error);
--color-error-foreground: var(--error-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-outline: var(--outline);
--radius-xs: calc(var(--radius) - 0.375rem);
--radius-sm: calc(var(--radius) - 0.25rem);
--radius-md: calc(var(--radius) - 0.125rem);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 0.25rem);
--radius-2xl: calc(var(--radius) + 0.5rem);
--radius-3xl: calc(var(--radius) + 1rem);
--color-sidebar: var(--sidebar-background);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-outline: var(--sidebar-outline);
}
:root {
--background: var(--color-white);
--foreground: var(--color-neutral-950);
--card: var(--color-white);
--card-foreground: var(--color-neutral-950);
--popover: var(--color-white);
--popover-foreground: var(--color-neutral-950);
--primary: var(--color-blue-700);
--primary-foreground: var(--color-neutral-50);
--primary-accent: var(--color-blue-700);
--secondary: var(--color-fuchsia-700);
--secondary-foreground: var(--color-neutral-50);
--secondary-accent: var(--color-fuchsia-700);
--muted: var(--color-neutral-100);
--muted-foreground: var(--color-neutral-600);
--accent: var(--color-neutral-100);
--accent-foreground: var(--color-neutral-900);
--info: var(--color-sky-300);
--info-foreground: var(--color-sky-950);
--success: var(--color-green-300);
--success-foreground: var(--color-green-950);
--warning: var(--color-amber-300);
--warning-foreground: var(--color-amber-950);
--error: var(--color-red-700);
--error-foreground: var(--color-neutral-50);
--border: var(--color-neutral-200);
--input: var(--color-neutral-200);
--outline: var(--color-neutral-400);
--radius: 0.625rem;
/* sidebar variables */
--sidebar-background: var(--color-neutral-50);
--sidebar-foreground: var(--color-neutral-950);
--sidebar-primary: var(--color-blue-700);
--sidebar-primary-foreground: var(--color-neutral-50);
--sidebar-accent: var(--color-neutral-100);
--sidebar-accent-foreground: var(--color-neutral-900);
--sidebar-border: var(--color-neutral-200);
--sidebar-outline: var(--color-neutral-400);
}
.dark {
--background: var(--color-neutral-950);
--foreground: var(--color-neutral-50);
--card: var(--color-neutral-900);
--card-foreground: var(--color-neutral-50);
--popover: var(--color-neutral-800);
--popover-foreground: var(--color-neutral-50);
--primary: var(--color-blue-700);
--primary-foreground: var(--color-neutral-50);
--primary-accent: var(--color-blue-400);
--secondary: var(--color-fuchsia-700);
--secondary-foreground: var(--color-neutral-50);
--secondary-accent: var(--color-fuchsia-400);
--muted: var(--color-neutral-800);
--muted-foreground: var(--color-neutral-400);
--accent: var(--color-neutral-700);
--accent-foreground: var(--color-neutral-100);
--info: var(--color-sky-300);
--info-foreground: var(--color-sky-950);
--success: var(--color-green-300);
--success-foreground: var(--color-green-950);
--warning: var(--color-amber-300);
--warning-foreground: var(--color-amber-950);
--error: var(--color-red-800);
--error-foreground: var(--color-neutral-50);
--border: --alpha(var(--color-neutral-50) / 10%);
--input: --alpha(var(--color-neutral-50) / 15%);
--outline: var(--color-neutral-500);
/* sidebars variables */
--sidebar-background: var(--color-neutral-900);
--sidebar-foreground: var(--color-neutral-50);
--sidebar-primary: var(--color-blue-700);
--sidebar-primary-foreground: var(--color-neutral-50);
--sidebar-accent: var(--color-neutral-800);
--sidebar-accent-foreground: var(--color-neutral-100);
--sidebar-border: var(--color-neutral-800);
--sidebar-outline: var(--color-neutral-600);
}
@layer base {
* {
@apply border-border outline-outline/50;
}
body {
@apply bg-background text-foreground scheme-light dark:scheme-dark;
}
button {
@apply cursor-pointer;
}
}
```
6. Ponder and wonder why you wanted to do this manually in the first place. Then continue following the instructions from [here](#step-4).
Enjoy using Starwind UI 🚀