# Runtime Primitives

Starwind currently exposes 36 Runtime-backed primitives for Astro and React. 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
```

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 show the available parts and complete examples for both frameworks.

**Astro**

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

**React**

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

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.