What You Get

Starwind Pro is a collection of production-ready sections: heroes, pricing tables, testimonials, CTAs, FAQs, footers, and more. Each block is a complete .astro component you can drop into your project, with full props for easy customization.

These aren't React components awkwardly ported to Astro. They're built natively for the framework. View Transitions and other Astro features all work as expected.

Starwind Pro builds on Starwind UI, so if you've used it or shadcn/ui, you're already familiar with the patterns.

One Command Install

Every block installs with a single CLI command:

npx starwind@latest add @starwind-pro/hero-01

The CLI handles dependencies and file placement automatically.

Built for Astro

• Native .astro component structure
• View Transitions support via astro:after-swap
• Container queries for component-level responsiveness
• TypeScript interfaces for all props
• Tailwind CSS v4 styling

Responsive by Default

Blocks use container queries instead of media queries. They adapt to their container width, not the viewport. This means they work correctly whether you're using them full-width or in a sidebar layout.

Why Container Queries Matter

Traditional media queries respond to the viewport width. Container queries respond to the parent element's width. This makes components truly portable — they look great at any size without additional configuration.

You Own the Code

When you install a component, you get the source files in your project. It's not a dependency you import from node_modules. It's your code. Change anything: styling, structure, behavior.

What's Included

Blocks for every section of your landing pages and marketing sites:

Getting Started

1. Set up: Run npx starwind@latest init --pro and add your license key
2. Browse: Find components at the components page
3. Install: Copy the command and run it
4. Customize: Edit colors, content, layout to match your brand

One-time purchase. No subscription. Use it on as many projects as you want with free updates for life.