# 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.

## Form & Input

Collect and validate user input.

| Component | Astro | React | Vue |
| --- | --- | --- | --- |
| [Button](/docs/components/button/) | Available | Available | Beta |
| [Button Group](/docs/components/button-group/) | Available | Available | Beta |
| [Checkbox](/docs/components/checkbox/) | Available | Available | Beta |
| [Checkbox Group](/docs/components/checkbox-group/) | Available | Available | Beta |
| [Color Picker](/docs/components/color-picker/) | Available | Available | Beta |
| [Combobox](/docs/components/combobox/) | Available | Available | Beta |
| [Dropzone](/docs/components/dropzone/) | Available | Available | Beta |
| [Field](/docs/components/field/) | Available | Available | Beta |
| [Form](/docs/components/form/) | Available | Available | Beta |
| [Input](/docs/components/input/) | Available | Available | Beta |
| [Input Group](/docs/components/input-group/) | Available | Available | Beta |
| [Input Otp](/docs/components/input-otp/) | Available | Available | Beta |
| [Label](/docs/components/label/) | Available | Available | Beta |
| [Native Select](/docs/components/native-select/) | Available | Available | Beta |
| [Radio Group](/docs/components/radio-group/) | Available | Available | Beta |
| [Select](/docs/components/select/) | Available | Available | Beta |
| [Slider](/docs/components/slider/) | Available | Available | Beta |
| [Switch](/docs/components/switch/) | Available | Available | Beta |
| [Textarea](/docs/components/textarea/) | Available | Available | Beta |
| [Toggle](/docs/components/toggle/) | Available | Available | Beta |
| [Toggle Group](/docs/components/toggle-group/) | Available | Available | Beta |

## Navigation

Move users through pages, sections, and app states.

| Component | Astro | React | Vue |
| --- | --- | --- | --- |
| [Breadcrumb](/docs/components/breadcrumb/) | Available | Available | Beta |
| [Dropdown](/docs/components/dropdown/) | Available | Available | Beta |
| [Navigation Menu](/docs/components/navigation-menu/) | Available | Available | Beta |
| [Pagination](/docs/components/pagination/) | Available | Available | Beta |
| [Sidebar](/docs/components/sidebar/) | Available | Available | Beta |
| [Tabs](/docs/components/tabs/) | Available | Available | Beta |
| [Theme Toggle](/docs/components/theme-toggle/) | Available | Available | Beta |

## Overlay & Disclosure

Reveal additional information or contextual actions.

| Component | Astro | React | Vue |
| --- | --- | --- | --- |
| [Accordion](/docs/components/accordion/) | Available | Available | Beta |
| [Alert Dialog](/docs/components/alert-dialog/) | Available | Available | Beta |
| [Collapsible](/docs/components/collapsible/) | Available | Available | Beta |
| [Context Menu](/docs/components/context-menu/) | Available | Available | Beta |
| [Dialog](/docs/components/dialog/) | Available | Available | Beta |
| [Hover Card](/docs/components/hover-card/) | Available | Available | Beta |
| [Popover](/docs/components/popover/) | Available | Available | Beta |
| [Sheet](/docs/components/sheet/) | Available | Available | Beta |
| [Tooltip](/docs/components/tooltip/) | Available | Available | Beta |

## Feedback & Status

Communicate progress, outcomes, and loading states.

| Component | Astro | React | Vue |
| --- | --- | --- | --- |
| [Alert](/docs/components/alert/) | Available | Available | Beta |
| [Progress](/docs/components/progress/) | Available | Available | Beta |
| [Skeleton](/docs/components/skeleton/) | Available | Available | Beta |
| [Spinner](/docs/components/spinner/) | Available | Available | Beta |
| [Toast](/docs/components/toast/) | Available | Available | Beta |

## Layout & Structure

Build consistent spatial structure and content organization.

| Component | Astro | React | Vue |
| --- | --- | --- | --- |
| [Aspect Ratio](/docs/components/aspect-ratio/) | Available | Available | Beta |
| [Card](/docs/components/card/) | Available | Available | Beta |
| [Item](/docs/components/item/) | Available | Available | Beta |
| [Scroll Area](/docs/components/scroll-area/) | Available | Available | Beta |
| [Separator](/docs/components/separator/) | Available | Available | Beta |
| [Table](/docs/components/table/) | Available | Available | Beta |

## Content & Media

Present media, rich text, and supporting UI metadata.

| Component | Astro | React | Vue |
| --- | --- | --- | --- |
| [Avatar](/docs/components/avatar/) | Available | Available | Beta |
| [Badge](/docs/components/badge/) | Available | Available | Beta |
| [Carousel](/docs/components/carousel/) | Available | Available | Beta |
| [Image](/docs/components/image/) | Available | Framework native — React projects should use the framework or app router image primitive instead. | Unsupported — This component requires its native framework integration. |
| [Kbd](/docs/components/kbd/) | Available | Available | Beta |
| [Prose](/docs/components/prose/) | Available | Available | Beta |
| [Video](/docs/components/video/) | Available | Available | Beta |

## 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](/docs/getting-started/installation/) and [CLI reference](/docs/getting-started/cli/) for
configuration and update workflows.

```bash
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:

```ts
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.

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
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>
```
  </div>
  <div slot="react">
```tsx
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>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<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>
```
  </div>
</FrameworkCodeSwitcher>