Skip to main content



In your Remix project, install the Dopt React component you would like to use with your preferred JavaScript package manager. For example, if installing the modal component:

npm install @dopt/react-modal


If you are leveraging Dopt components headlessly (i.e., using the hooks only), then you can skip this setup step as long as you are using the hooks exports (e.g., @dopt/react-*/hooks). For example, if you are only using the modal component hooks:

import { useModal } from '@dopt/react-modal/hooks';

If you are leveraging Dopt React components as pre-built UI, then you'll need add the Dopt React component package(s) and their dependencies to serverDependenciesToBundle in your Remix configuration. For example, if using the modal component:

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
serverDependenciesToBundle: [


Import the Dopt React component and use it as specified in the usage section of each component. For example, if using the modal component:

import Modal, { useModal } from '@dopt/react-modal';

function MyModal() {
const modal = useModal('my-flow.four-pandas-jam');

return (
<Modal.Root active={}>
<Modal.Overlay />
<Modal.DismissIcon onClick={modal.dismiss} />
<Modal.DismissButton onClick={modal.dismiss}>
<Modal.CompleteButton onClick={modal.complete}>