# Components Overview

The bundled Starwind registry currently ships 55 CLI-installed styled components.
Interactive components compose the first-party Primitive adapters and shared Runtime behavior;
presentational components remain native Astro or React components.

## Form & Input

Collect and validate user input.

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

## Navigation

Move users through pages, sections, and app states.

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

## Overlay & Disclosure

Reveal additional information or contextual actions.

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

## Feedback & Status

Communicate progress, outcomes, and loading states.

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

## Layout & Structure

Build consistent spatial structure and content organization.

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

## Content & Media

Present media, rich text, and supporting UI metadata.

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

## Installation

Initialize Starwind for Astro once, then add an individual component or install the complete bundled
styled registry. 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 --framework astro
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 support class overrides through the Astro `class` prop. Tailwind Variants and
Tailwind Merge combine the component defaults with project-specific classes.

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