# Runtime Primitives

Starwind exposes 36 Runtime-backed primitives for Astro, React, and the Vue 3.5 public beta. They use the same
use-case groups as the styled component overview, making it easy to move between the styled and
behavior-first layers.

## Form & Input

Collect and validate user input.

### Fields and Validation

| Primitive | Runtime factory | Parts | Styled components |
| --- | --- | ---: | ---: |
| [Field](/docs/primitives/field/) | `createField` | 7 | 1 |
| [Fieldset](/docs/primitives/fieldset/) | `createFieldset` | 2 | 1 |
| [Form](/docs/primitives/form/) | `createForm` | 2 | 1 |

### Text, File, and Value Inputs

| Primitive | Runtime factory | Parts | Styled components |
| --- | --- | ---: | ---: |
| [Color Picker](/docs/primitives/color-picker/) | `createColorPicker` | 23 | 1 |
| [Dropzone](/docs/primitives/dropzone/) | `createDropzone` | 5 | 1 |
| [Input](/docs/primitives/input/) | `createInput` | 1 | 1 |
| [Input OTP](/docs/primitives/input-otp/) | `createInputOtp` | 7 | 1 |
| [Slider](/docs/primitives/slider/) | `createSlider` | 7 | 1 |

### Selection Controls

| Primitive | Runtime factory | Parts | Styled components |
| --- | --- | ---: | ---: |
| [Checkbox](/docs/primitives/checkbox/) | `createCheckbox` | 4 | 1 |
| [Checkbox Group](/docs/primitives/checkbox-group/) | `createCheckboxGroup` | 1 | 1 |
| [Combobox](/docs/primitives/combobox/) | `createCombobox` | 20 | 1 |
| [Radio](/docs/primitives/radio/) | `createRadio` | 3 | 1 |
| [Radio Group](/docs/primitives/radio-group/) | `createRadioGroup` | 1 | 1 |
| [Select](/docs/primitives/select/) | `createSelect` | 18 | 1 |
| [Switch](/docs/primitives/switch/) | `createSwitch` | 4 | 1 |

### Actions and Toggles

| Primitive | Runtime factory | Parts | Styled components |
| --- | --- | ---: | ---: |
| [Button](/docs/primitives/button/) | `createButton` | 1 | 1 |
| [Toggle](/docs/primitives/toggle/) | `createToggle` | 1 | 2 |
| [Toggle Group](/docs/primitives/toggle-group/) | `createToggleGroup` | 1 | 1 |

## Navigation

Move users through pages, sections, and app states.

| Primitive | Runtime factory | Parts | Styled components |
| --- | --- | ---: | ---: |
| [Menu](/docs/primitives/menu/) | `createMenu` | 18 | 1 |
| [Navigation Menu](/docs/primitives/navigation-menu/) | `createNavigationMenu` | 12 | 1 |
| [Sidebar](/docs/primitives/sidebar/) | `createSidebarController` | 5 | 1 |
| [Tabs](/docs/primitives/tabs/) | `createTabs` | 5 | 1 |

## Overlay & Disclosure

Reveal additional information or contextual actions.

### Inline Disclosure

| Primitive | Runtime factory | Parts | Styled components |
| --- | --- | ---: | ---: |
| [Accordion](/docs/primitives/accordion/) | `createAccordion` | 5 | 1 |
| [Collapsible](/docs/primitives/collapsible/) | `createCollapsible` | 3 | 1 |

### Dialogs and Drawers

| Primitive | Runtime factory | Parts | Styled components |
| --- | --- | ---: | ---: |
| [Alert Dialog](/docs/primitives/alert-dialog/) | `createAlertDialog` | 9 | 1 |
| [Dialog](/docs/primitives/dialog/) | `createDialog` | 7 | 1 |
| [Drawer](/docs/primitives/drawer/) | `createDrawer` | 9 | 1 |

### Floating and Contextual Overlays

| Primitive | Runtime factory | Parts | Styled components |
| --- | --- | ---: | ---: |
| [Context Menu](/docs/primitives/context-menu/) | `createContextMenu` | 19 | 1 |
| [Popover](/docs/primitives/popover/) | `createPopover` | 11 | 1 |
| [Preview Card](/docs/primitives/preview-card/) | `createPreviewCard` | 8 | 1 |
| [Tooltip](/docs/primitives/tooltip/) | `createTooltip` | 6 | 1 |

## Feedback & Status

Communicate progress, outcomes, and loading states.

| Primitive | Runtime factory | Parts | Styled components |
| --- | --- | ---: | ---: |
| [Progress](/docs/primitives/progress/) | `createProgress` | 5 | 1 |
| [Toast](/docs/primitives/toast/) | `createToastManager` | 9 | 1 |

## Layout & Structure

Build consistent spatial structure and content organization.

| Primitive | Runtime factory | Parts | Styled components |
| --- | --- | ---: | ---: |
| [Scroll Area](/docs/primitives/scroll-area/) | `createScrollArea` | 6 | 1 |

## Content & Media

Present media, rich text, and supporting UI metadata.

| Primitive | Runtime factory | Parts | Styled components |
| --- | --- | ---: | ---: |
| [Avatar](/docs/primitives/avatar/) | `createAvatar` | 3 | 1 |
| [Carousel](/docs/primitives/carousel/) | `createCarousel` | 6 | 1 |

## Installation

`starwind init` installs the Primitive adapter for your project's primary framework. If you are
configuring Starwind manually, install the package that matches the files you are authoring:

```bash
npm install @starwind-ui/astro
# or
npm install @starwind-ui/react
# or, for the Vue 3.5 public beta
npm install @starwind-ui/vue@beta vue@^3.5
```

You can also copy Primitive adapter source into your project with `starwind primitives add`. See
the [Getting Started Primitives guide](/docs/getting-started/primitives/) for the package, vendored
source, and Runtime/raw HTML tradeoffs.

## Import Pattern

Import each Primitive from its framework package and component subpath. The individual reference
pages include examples for Astro, React, and Vue. The API tables cover Astro and React.
See the [Vue guide](/docs/frameworks/vite-vue/) for setup and Vue usage.

**Astro**

```ts
import { Accordion } from "@starwind-ui/astro/accordion";
```

**React**

```ts
import { Accordion } from "@starwind-ui/react/accordion";
```

**Vue 3.5 public beta**

```ts
import Accordion from "@starwind-ui/vue/accordion";
```

The Vue API can change during the `0.x` release series. Send beta feedback through the
[issue tracker](https://github.com/starwind-ui/starwind-ui/issues).

When you vendor Primitive source, import from the configured `primitiveDir` or
`primitiveDirs.<framework>` destination instead.

## Styling and Composition

Primitives provide behavior and framework-native anatomy without Starwind's styled wrapper. You
own the rendered markup and styling while the adapter coordinates the underlying Runtime contract.
Start with a [styled component](/docs/components/) when you want ready-to-render UI, or continue to
the [Runtime reference](/docs/runtime/) when you need to initialize behavior against raw HTML.