Welcome to Starwind Pro

# Welcome to Starwind Pro

Starwind Pro is a collection of production-ready blocks for Astro, styled with Tailwind CSS v4. Heroes, pricing tables, testimonials, CTAs, navbars, footers. Install what you need, customize it, ship.

> **Info:** Built on [Starwind UI](https://starwind.dev). If you've used it or
[shadcn/ui](https://ui.shadcn.com), you already know the patterns.

<BlockStats class="my-8" />

## Why Starwind Pro?

Stop rebuilding the same landing page sections from scratch. Every block is a complete `.astro` component you drop into your project with full props for customization.

- **Ship Faster**: Production-ready sections so you can focus on your product, not layout
- **Own The Code**: Components live in your codebase, not `node_modules`. Modify styling, structure, and behavior freely
- **One Command Install**: Add any block with `npx starwind@latest add @starwind-pro/block-name`

## Built for Astro

These aren't React components ported to Astro. Every block is built natively for the framework.

- **Native `.astro` Components**: View Transitions, `astro:after-swap`, and all Astro features work as expected
- **Container Queries**: Blocks adapt to their container width, not the viewport. They work full-width or in a sidebar
- **Tailwind CSS v4**: Fully themable with CSS variables and the latest Tailwind features
- **TypeScript**: Complete type interfaces for all props and data structures
- **Dark Mode**: Every block works seamlessly in light and dark modes

## Get Started

1. Get your license key

One-time purchase, lifetime access. Or try the [free blocks](/components/) with no license required.

2. Set up your project

Run init with the `--pro` flag and add your license key to `.env`.

```bash
npx starwind@latest init --pro
```

3. Start building

Browse blocks at [/components](/components/) and install with a single command.

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

Full setup instructions in the [Installation Guide](/docs/getting-started/installation).

<div class="not-content mt-6 flex flex-col gap-3 sm:flex-row">
<DocsButton variant="primary" href="/sign-up/">
Get Free Access
</DocsButton>
<DocsButton variant="outline" href="/components/">
Browse Blocks
</DocsButton>
</div>