On this page

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 v5 and Tailwind CSS v4.

CLI Installation

Create a new Astro project (you could also start with an existing project).
Terminal window
pnpm create astro@latest
Terminal window
npm create astro@latest
Terminal window
yarn create astro
Follow the instructions and configure your base Astro project.
Add the following code to the tsconfig.json file to resolve paths:
tsconfig.json
```
{
  // ...
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
    }
  }
}
```
Tip
If using pnpm, you should also create a .npmrc file in the root of your project with the following content:
.npmrc
```
auto-install-peers=true
node-linker=hoisted
lockfile=true
```
Run the CLI
Use the starwind init command to initialize project configuration. This will create a starwind.config.json file in your project, adjust your astro.config.mjs file, and install dependencies.
Terminal window
pnpx starwind@latest init
Terminal window
npx starwind@latest init
Terminal window
yarn dlx starwind@latest init
If you choose not to install dependencies here, you will need to manually install them later.
Import the starwind.css file into your main layout. This is likely src/layouts/Layout.astro, but could vary depending on your project structure.
src/layouts/Layout.astro
```
---
// style import
import "@/styles/starwind.css";
---

```

That’s it!

You can now start adding components to your project.

pnpx starwind@latest add button

npx starwind@latest add button

yarn dlx starwind@latest add button

The command above will add the Button component to your project. You can now use it like this:

---
import { Button } from "@/components/starwind/button";
---
<html lang="en">
  <head>
    <title>Astro</title>
  </head>
  <body>
    <Button>Hello World</Button>
  </body>
</html>

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:

Create a starwind.config.json file in your project root with the following content:

{
  "$schema": "https://starwind.dev/config-schema.json",
  "tailwind": {
    "css": "src/styles/starwind.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "componentDir": "src/components",
  "components": []
}

Install the necessary dependencies:

pnpm add tailwindcss@latest @tailwindcss/vite@latest @tailwindcss/forms@latest tailwindcss-animate@latest tailwind-variants@latest @tabler/icons@latest

npm install tailwindcss@latest @tailwindcss/vite@latest @tailwindcss/forms@latest tailwindcss-animate@latest tailwind-variants@latest @tabler/icons@latest

yarn add tailwindcss@latest @tailwindcss/vite@latest @tailwindcss/forms@latest tailwindcss-animate@latest tailwind-variants@latest @tabler/icons@latest

Edit your astro.config.mjs file:

import { defineConfig } from 'astro/config';
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  experimental: {
    svg: {
      mode: "sprite",
    },
  },
  vite: {
    plugins: [tailwindcss()],
  },
})

Create the base starwind css file src/styles/starwind.css:

@import "tailwindcss";
@plugin "tailwindcss-animate";
@plugin "@tailwindcss/forms";
@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-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --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);
}

@layer base {
  :root {
    --background: var(--color-neutral-50);
    --foreground: var(--color-neutral-950);
    --card: var(--color-neutral-50);
    --card-foreground: var(--color-neutral-950);
    --popover: var(--color-neutral-50);
    --popover-foreground: var(--color-neutral-950);
    --primary: var(--color-blue-700);
    --primary-foreground: var(--color-neutral-50);
    --secondary: var(--color-fuchsia-700);
    --secondary-foreground: var(--color-neutral-50);
    --muted: var(--color-neutral-100);
    --muted-foreground: var(--color-neutral-600);
    --accent: var(--color-neutral-200);
    --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-300);
    --input: var(--color-neutral-200);
    --outline: var(--color-blue-600);
    --radius: 0.5rem;
  }

  .dark {
    --background: var(--color-neutral-950);
    --foreground: var(--color-neutral-50);
    --card: var(--color-neutral-950);
    --card-foreground: var(--color-neutral-50);
    --popover: var(--color-neutral-950);
    --popover-foreground: var(--color-neutral-50);
    --primary: var(--color-blue-700);
    --primary-foreground: var(--color-neutral-50);
    --secondary: var(--color-fuchsia-300);
    --secondary-foreground: var(--color-neutral-950);
    --muted: var(--color-neutral-900);
    --muted-foreground: var(--color-neutral-400);
    --accent: var(--color-neutral-900);
    --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: var(--color-neutral-700);
    --input: var(--color-neutral-800);
    --outline: var(--color-blue-600);
    --radius: 0.5rem;
  }

  * {
    @apply border-border;
  }
  *:focus-visible {
    @apply outline-outline;
  }
  html {
    @apply bg-background text-foreground scheme-light dark:scheme-dark;
  }
  button {
    @apply cursor-pointer;
  }
}

@layer utilities {
  /* transition-colors but without outline-color transition property */
  .starwind-transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
      --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--default-transition-timing-function);
    transition-duration: var(--default-transition-duration);
  }
}

Ponder and wonder why you wanted to do this manually in the first place. Then continue following the instructions from here.

Enjoy using Starwind UI 🚀