Components Overview

Browse 55 CLI-installed styled components for Astro, React, and the Vue 3.5 public beta. Open any component for installation, copy-paste examples, and API details.

Image is the one exception. It integrates directly with Astro’s image pipeline, so React and Vue projects should use their framework-native image component.

Browse All Components

Every component page includes installation commands, copy-paste examples, and its public API.

Installation

Initialize Starwind in the project root, then add one component or the complete bundled styled registry. The CLI detects Astro or a supported React or Vue host. See the installation guide and CLI reference for configuration and update workflows.

npx starwind@latest init --defaults
npx starwind@latest add button
npx starwind@latest add --all

Import Pattern

The CLI copies styled component source into src/components/starwind by default. Import each public component from its local folder:

import { ComponentName } from "@/components/starwind/component-name";

Class Overrides

Installed components accept class overrides through class in Astro and Vue, and className in React. Tailwind Variants and Tailwind Merge combine the component defaults with project-specific classes.

---
import { Button } from "@/components/starwind/button";
---

<Button>Default button</Button>
<Button class="rounded-full bg-purple-700 text-white hover:bg-purple-800">Custom button</Button>

import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <>
      <Button>Default button</Button>
      <Button className="rounded-full bg-purple-700 text-white hover:bg-purple-800">
        Custom button
      </Button>
    </>
  );
}

<script setup lang="ts">
import { Button } from "@/components/starwind/button";
</script>

<template>
  <Button>Default button</Button>
  <Button class="rounded-full bg-purple-700 text-white hover:bg-purple-800">Custom button</Button>
</template>