Introduction
Responsive shadcn/ui overlays that render the desktop component at 768px and up, and its mobile counterpart below.
A centered Dialog is hard to use on a phone. The shadcn docs offer a
recipe: combine Dialog and Drawer yourself behind a useMediaQuery hook.
Each project then rewrites that code, and the same bugs come back: cast
types, overwritten classNames, lost callbacks, duplicated children.
responsivecn ships that recipe as installable components that follow the
shadcn conventions: open code, a registry install, compound components.
A pair is a curated desktop→mobile combination. Each pair produces a responsive component: a drop-in replacement for the desktop component that renders the mobile one below the breakpoint. Four pairs exist:
| Pair | Responsive component |
|---|---|
| Dialog → Drawer | DialogDrawer |
| Sheet → Drawer | SheetDrawer |
| Popover → Drawer | PopoverDrawer |
| Tooltip → Popover | TooltipPopover |
Bases
Each component works on Base UI (shadcn's default) and Radix, whichever
shadcn base you installed. It is one file that builds on your own shadcn
components (@/components/ui/dialog, drawer, …), so its props are those of
your Dialog, Sheet, Popover or Tooltip, including render on Base UI and
asChild on Radix. React Aria is not supported yet: its shadcn components
have a different part structure, so a drop-in replacement cannot map onto
them.
What these docs cover
Installation, the breakpoint and the override prop work the same for every component, so each has its own page. A component page covers only what is specific to its pair.
The underlying components are documented upstream. For their APIs, see the shadcn/ui docs, the Base UI docs and the Radix docs.