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
Text, File, and Value Inputs
- Color Picker
createColorPicker23 parts / 1 styled link
- Dropzone
createDropzone5 parts / 1 styled link
- Input
createInput1 part / 1 styled link
- Input Otp
createInputOtp7 parts / 1 styled link
- Slider
createSlider7 parts / 1 styled link
Selection Controls
- Checkbox
createCheckbox4 parts / 1 styled link
- Checkbox Group
createCheckboxGroup1 part / 1 styled link
- Combobox
createCombobox20 parts / 1 styled link
- Radio
createRadio3 parts / 1 styled link
- Radio Group
createRadioGroup1 part / 1 styled link
- Select
createSelect18 parts / 1 styled link
- Switch
createSwitch4 parts / 1 styled link
Actions and Toggles
- Button
createButton1 part / 1 styled link
- Toggle
createToggle1 part / 2 styled links
- Toggle Group
createToggleGroup1 part / 1 styled link
Navigation
Move users through pages, sections, and app states.
- Menu
createMenu18 parts / 1 styled link
- Navigation Menu
createNavigationMenu12 parts / 1 styled link
- Sidebar
createSidebarController5 parts / 1 styled link
- Tabs
createTabs5 parts / 1 styled link
Overlay & Disclosure
Reveal additional information or contextual actions.
Inline Disclosure
- Accordion
createAccordion5 parts / 1 styled link
- Collapsible
createCollapsible3 parts / 1 styled link
Dialogs and Drawers
- Alert Dialog
createAlertDialog9 parts / 1 styled link
- Dialog
createDialog7 parts / 1 styled link
- Drawer
createDrawer9 parts / 1 styled link
Floating and Contextual Overlays
- Context Menu
createContextMenu19 parts / 1 styled link
- Popover
createPopover11 parts / 1 styled link
- Preview Card
createPreviewCard8 parts / 1 styled link
- Tooltip
createTooltip6 parts / 1 styled link
Feedback & Status
Communicate progress, outcomes, and loading states.
Layout & Structure
Build consistent spatial structure and content organization.
- Scroll Area
createScrollArea6 parts / 1 styled link
Content & Media
Present media, rich text, and supporting UI metadata.
All Primitive docs (A-Z)
Accordion / Alert Dialog / Avatar / Button / Carousel / Checkbox / Checkbox Group / Collapsible / Color Picker / Combobox / Context Menu / Dialog / Drawer / Dropzone / Field / Fieldset / Form / Input / Input Otp / Menu / Navigation Menu / Popover / Preview Card / Progress / Radio / Radio Group / Scroll Area / Select / Sidebar / Slider / Switch / Tabs / Toast / Toggle / Toggle Group / Tooltip
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:
npm install @starwind-ui/astro# ornpm install @starwind-ui/reactYou can also copy Primitive adapter source into your project with starwind primitives add. See the Getting Started Primitives guide 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
import { Accordion } from "@starwind-ui/astro/accordion";React
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 when you want ready-to-render UI, or continue to the Runtime reference when you need to initialize behavior against raw HTML.