Components Overview

Browse components for Astro, React, Vue, and Svelte. Each page shows how to install and use a component, with examples you can copy into your project.

Image is the one exception. It integrates directly with Astro’s image pipeline, so React, Vue, and Svelte projects should use an image component for their framework or a standard <img> element.

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 supported Astro, React, Vue, and Svelte projects. 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. SvelteKit uses src/lib/starwind, with imports from $lib/starwind/component-name:

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

Class Overrides

Installed components accept class overrides through class in Astro, Vue, and Svelte, 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>

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

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