# rescript-radix > Unofficial ReScript React bindings for Radix Primitives: Radix's accessible, unstyled React components with typed props and an API that stays close to Radix. Key facts for writing code against these bindings: - Install with `npm install rescript-radix radix-ui` and add `"rescript-radix"` to `dependencies` in `rescript.json`. Requires rescript 12, @rescript/react 0.15, react 19, radix-ui 1.8. - Every primitive is a module under the `Radix` namespace and its parts are submodules: ``, ``. Part names match Radix's. - `open` and `type` are ReScript keywords, so those props are `open_` and `type_`. `aria-label` is `ariaLabel`. - Finite string props are polymorphic variants: `side=#bottom`, `orientation=#vertical`, `dir=#rtl`. - Radix roots whose `type` prop changes the value shape are split in two: `Accordion.Single` / `Accordion.Multiple`, `ToggleGroup.Single` / `ToggleGroup.Multiple`, `Toolbar.ToggleGroupSingle` / `Toolbar.ToggleGroupMultiple`. They still take `type_=#single` or `type_=#multiple`. - Checkbox state is `Radix.Shared.checkedState`: `Bool(true)`, `Bool(false)` or `Indeterminate`. - Each part binds only the props Radix documents for it, plus `asChild`, `className`, `style`, `id`, `ref` and `children`. For any other HTML attribute, pass `asChild=true` and render your own element. - Primitives are unstyled. Style them with `className` and Radix's `data-state` and similar attributes. ## Guides - [Installation](https://rescript-radix.dev/guides/installation.md): Add the package and configure your ReScript project. - [Usage](https://rescript-radix.dev/guides/usage.md): Compound parts, controlled state, and how Radix props map to ReScript. - [Styling](https://rescript-radix.dev/guides/styling.md): Style primitives with your own CSS and Radix state attributes. - [Tailwind CSS](https://rescript-radix.dev/guides/tailwind.md): Style primitives with Tailwind utilities, state variants and Radix CSS variables. - [CSS Modules](https://rescript-radix.dev/guides/css-modules.md): Bind scoped class names in ReScript and style Radix state with them. - [Composition](https://rescript-radix.dev/guides/composition.md): Render your own elements and components with asChild. - [AI Coding Agents](https://rescript-radix.dev/guides/ai-agents.md): Markdown versions of these docs for Claude Code, Cursor and other agents. ## Components - [Accordion](https://rescript-radix.dev/components/accordion.md): A vertically stacked set of headings that each reveal a section of content. - [Alert Dialog](https://rescript-radix.dev/components/alert-dialog.md): A modal dialog that interrupts the user with important content and expects a response. - [Aspect Ratio](https://rescript-radix.dev/components/aspect-ratio.md): Displays content within a chosen ratio. - [Avatar](https://rescript-radix.dev/components/avatar.md): An image element with a fallback for representing the user. - [Checkbox](https://rescript-radix.dev/components/checkbox.md): A control that toggles between checked, unchecked and indeterminate. - [Collapsible](https://rescript-radix.dev/components/collapsible.md): An interactive component which expands and collapses a panel. - [Context Menu](https://rescript-radix.dev/components/context-menu.md): A menu opened at the pointer by right-click or long-press. - [Dialog](https://rescript-radix.dev/components/dialog.md): A window overlaid on the primary window, rendering the content underneath inert. - [Dropdown Menu](https://rescript-radix.dev/components/dropdown-menu.md): A menu of actions or options, opened by a button. - [Form](https://rescript-radix.dev/components/form.md): Collects input from the user, with built-in validation messages. - [Hover Card](https://rescript-radix.dev/components/hover-card.md): For sighted users to preview content available behind a link. - [Label](https://rescript-radix.dev/components/label.md): Renders an accessible label associated with controls. - [Menubar](https://rescript-radix.dev/components/menubar.md): A visually persistent menu, as in desktop applications. - [Navigation Menu](https://rescript-radix.dev/components/navigation-menu.md): A collection of links for navigating websites. - [One-Time Password Field](https://rescript-radix.dev/components/one-time-password-field.md): A group of single-character inputs for entering one-time codes. - [Password Toggle Field](https://rescript-radix.dev/components/password-toggle-field.md): A password input with a button that shows or hides its value. - [Popover](https://rescript-radix.dev/components/popover.md): Displays rich content in a portal, triggered by a button. - [Progress](https://rescript-radix.dev/components/progress.md): Displays an indicator showing the completion progress of a task. - [Radio Group](https://rescript-radix.dev/components/radio-group.md): A set of checkable buttons, of which no more than one can be checked at a time. - [Scroll Area](https://rescript-radix.dev/components/scroll-area.md): Augments native scroll functionality for custom, cross-browser styling. - [Select](https://rescript-radix.dev/components/select.md): Displays a list of options for the user to pick from, triggered by a button. - [Separator](https://rescript-radix.dev/components/separator.md): Visually or semantically separates content. - [Slider](https://rescript-radix.dev/components/slider.md): An input where the user selects a value from within a given range. - [Switch](https://rescript-radix.dev/components/switch.md): A control that allows the user to toggle between checked and not checked. - [Tabs](https://rescript-radix.dev/components/tabs.md): Layered sections of content, known as tab panels, displayed one at a time. - [Toast](https://rescript-radix.dev/components/toast.md): A succinct message that is displayed temporarily. - [Toggle](https://rescript-radix.dev/components/toggle.md): A two-state button that can be either on or off. - [Toggle Group](https://rescript-radix.dev/components/toggle-group.md): A set of two-state buttons that can be toggled on or off. - [Toolbar](https://rescript-radix.dev/components/toolbar.md): A container for grouping a set of controls, such as buttons, toggle groups or menus. - [Tooltip](https://rescript-radix.dev/components/tooltip.md): A popup that displays information related to an element on hover or focus. ## Optional - [Accessible Icon](https://rescript-radix.dev/components/accessible-icon.md): Makes icons accessible by adding a label. - [Direction](https://rescript-radix.dev/components/direction.md): Sets the reading direction for every primitive beneath it. - [Portal](https://rescript-radix.dev/components/portal.md): Renders a React subtree in a different part of the DOM. - [Slot](https://rescript-radix.dev/components/slot.md): Merges its props onto its immediate child. - [Visually Hidden](https://rescript-radix.dev/components/visually-hidden.md): Hides content from the screen in an accessible way. - [Radix Primitives documentation](https://www.radix-ui.com/primitives/docs): Behavior and accessibility details of the underlying React components