Skip to main content

Starwind UI v3.0 is now available! Migration guide

On this page

Components Overview

View Markdown

Browse 55 CLI-installed styled components for Astro and React. 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 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.

Navigation

Move users through pages, sections, and app states.

Overlay & Disclosure

Reveal additional information or contextual actions.

Feedback & Status

Communicate progress, outcomes, and loading states.

Layout & Structure

Build consistent spatial structure and content organization.

Content & Media

Present media, rich text, and supporting UI metadata.

All component docs (A-Z)

Accordion / Alert / Alert Dialog / Aspect Ratio / Avatar / Badge / Breadcrumb / Button / Button Group / Card / Carousel / Checkbox / Checkbox Group / Collapsible / Color Picker / Combobox / Context Menu / Dialog / Dropdown / Dropzone / Field / Form / Hover Card / Image / Input / Input Group / Input Otp / Item / Kbd / Label / Native Select / Navigation Menu / Pagination / Popover / Progress / Prose / Radio Group / Scroll Area / Select / Separator / Sheet / Sidebar / Skeleton / Slider / Spinner / Switch / Table / Tabs / Textarea / Theme Toggle / Toast / Toggle / Toggle Group / Tooltip / Video

Installation

Initialize Starwind for Astro once, then add an individual component or install the complete bundled styled registry. See the installation guide and CLI reference for configuration and update workflows.

Terminal window
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:

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.