starwind

Astro-first, framework-portable UI components you can own.

Starwind UI gives you accessible, Tailwind CSS components with Starwind/shadcn-style ergonomics, backed by a portable Runtime that powers Astro, React, Vue 3.5 beta, and Svelte 5 beta adapters today.

Explore Components

Why Starwind?

• 🎯 Own Your Code — Styled components live in your project, where you can understand and customize them.
• ✨ Animated by Default — Smooth, polished animations out of the box with Tailwind CSS v4.
• ♿ Accessible — Keyboard navigable and screen reader friendly. Built with a11y in mind.
• 🚀 Portable Runtime — Shared DOM behavior with generated Astro, React, Vue 3.5 beta, and Svelte 5 beta adapters.
• 🛠️ CLI-Powered — Add only what you need with a simple npx starwind add command.

Looking for the main package? See starwind-ui/cli.

Get Started

Initialize an Astro or React project with the stable release:

npx starwind@latest init

Then add the components you need:

npx starwind@latest add

Vue 3.5 beta

Try the public beta in Vite Vue, Astro Vue, Nuxt 3 or 4, Laravel with Inertia Vue, or Quasar Vite SPA/SSR projects:

npm install @starwind-ui/vue@beta vue@^3.5
npx starwind@latest init --framework vue

Vue adapters use idiomatic v-model arguments, matching update:* events, and normal detailed event listeners. The Styled Image component remains Astro-only. The Vue API can change during the 0.x series. Report beta feedback in the Starwind UI issue tracker.

Svelte 5 beta

Try the public beta in Vite with Svelte, SvelteKit, or Astro with Svelte:

npm install @starwind-ui/svelte@beta "svelte@>=5.29.0 <6"
npx starwind@latest init --framework svelte

The beta provides the same 36 Primitive families and 54 portable Styled components as the other first-party adapters. The Styled Image component remains Astro-only. Starwind Pro setup is not available for Svelte. The Svelte API can change during the 0.x series.

Runtime Architecture

Starwind components use a framework adapter backed by the shared, framework-neutral Runtime.

flowchart TD
  App["Your application"]
  Components["Starwind components you own<br/>Tailwind CSS + framework markup"]
  Adapter["Framework adapter<br/>Astro, React, Vue 3.5 beta, or Svelte 5 beta"]
  Runtime["Starwind Runtime<br/>shared accessible behavior"]
  Browser["Browser APIs and the DOM"]

  App --> Components
  Components --> Adapter
  Adapter --> Runtime
  Runtime --> Browser

See Portable Runtime for the current implementation details.

AI integration

Resources for AI:

• Starwind Skills
• MCP server
• llms.txt
• llms-full.txt

Contributing

Please read the contributing guide.

License

Licensed under the MIT license.