Astro Template: Star Breeze

Astro Star Breeze is an opinionated Astro 5 starter template with built-in support for Starwind UI, Tailwind CSS, Prettier, view transitions, and aliases and includes a blank default "index.astro" page.

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

The template includes:

• An initial Astro project structure
• Astro View Transitions
• Astro Aliases
• Starwind UI
• Tailwind CSS v4.1
• Prettier
• A default MainLayout.astro layout file
• A default starwind.css file
• A default starwind.config.json file with neutral base color
• 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"

An optional PowerShell function (standalone or as part of a PowerShell module) is available to deploy the above template and provide the following additional functionality:

• Creates additional empty directories: assets and components
• Runs the prettier CLI to provide an intial format of all project files
• Initializes a Git repository
• Automatically navigates to the project directory and peforms an initial install
• Runs astro update to update the core Astro packages to the latest versions and runs your preferred package manager (npm or bun) to update the other packages
• Provides an option to launch the site and/or open the project directory with VS Code post deployment

Deployment Methods

bun

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

npm

npx 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

PowerShell

The optional PowerShell function and module are available here: SmartAceDesigns.AstroLiftoff

New-AstroProject -ProjectName project-name -Location parent-directory -Template astro-starbreeze

astro-starbreeze.mp4

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

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
├── public/
│   └── favicon.svg
├── src/
│   ├── layouts/
│   │   └── MainLayout.astro
│   ├── pages/
│   │   └── index.astro
│   └── styles/
│       └── starwind.css
├── .gitignore
├── .prettierrc.mjs
├── astro.config.mjs
├── package.json
├── README.md
├── starwind.config.json
└── tsconfig.json

The optional New-AstroProject PowerShell function will add these additional directories to your project root:

/
└── src/
    ├── assets/
    └── components/