Astro Template: Star Breeze

Astro Star Breeze is an opinionated Astro 7 starter template with built-in support for Starwind UI 3, Tailwind CSS 4, Prettier, view transitions, and aliases.

Using create astro@latest provides everything you need to create a basic Astro 7 application. However, it is missing a few useful items that you might find yourself manually adding to every new Astro 7 project. The Star Breeze template was created to automatically include these items as well as support for Starwind UI 3. This provides a great starting point for a new Astro 7 project with Tailwind 4 and Starwind UI 3.

The template includes:

• An initial Astro 7 project structure
• Astro View Transitions
• Astro Aliases
• Starwind UI 3
• Tailwind CSS 4
• Prettier
• A default MainLayout.astro layout file
• A default starwind.css file
• A default starwind.config.json file with neutral base color
• A default starwind.code-snippets VS Code compatible editor project level snippets file
• Default .vscode files to properly handle Tailwind CSS, recommended extensions, and default Prettier formatters
• A blank index.astro page
• The dev script set to "astro dev --open"

Deployment Methods

Note

The AGENTS.md and CLAUDE.md files will be created automatically by the create astro@latest npm initializer. Use the --no-ai flag to opt out of creating these files.

npm

npm create astro@latest -- --template smart-ace-designs/astro-starbreeze project-name

bun

bun create astro@latest -- --template smart-ace-designs/astro-starbreeze project-name

pnpm

pnpm create astro@latest --template smart-ace-designs/astro-starbreeze project-name

yarn

yarn create astro@latest --template smart-ace-designs/astro-starbreeze project-name

Using Starwind UI Components

• To add a Starwind UI component to your Astro project: Starwind UI CLI

• To import a Starwind UI component into an Astro file: Starwind UI Import Pattern

• To use a Starwind UI snippet in an Astro file with a VS Code compatible editor: begin typing starwind

Project Structure

After deploying the Astro Star Breeze template you will see the following files and directories in your project root:

/
├── .vscode/
│   ├── extensions.json
│   ├── launch.json
│   ├── settings.json
│   └── starwind.code-snippets
├── public/
│   └── favicon.svg
├── src/
│   ├── layouts/
│   │   └── MainLayout.astro
│   ├── pages/
│   │   └── index.astro
│   └── styles/
│       └── starwind.css
├── .gitignore
├── .prettierignore
├── .prettierrc.mjs
├── AGENTS.md
├── astro.config.mjs
├── CLAUDE.md
├── package.json
├── README.md
├── starwind.config.json
└── tsconfig.json