# responsivecn

> shadcn/ui overlays that switch to their mobile counterpart below 768px: Dialog, Sheet and Popover to Drawer, Tooltip to Popover. On Base UI or Radix.

Each component is a drop-in replacement for the desktop shadcn/ui component: same props, same parts. Migrating means changing the import and renaming the tags. Below 768px (the shadcn `useIsMobile` breakpoint) the same children render in the mobile component. Mobile-only props go through the override prop (`drawer={{...}}` or `popover={{...}}`).

## When to use

- A shadcn/ui project needs a Dialog, Sheet or Popover that becomes a swipeable Drawer below 768px, or a Tooltip that becomes a tap-to-open Popover below 768px.
- The project uses the Base UI or Radix base of shadcn/ui. React Aria is not supported.
- Not for a custom breakpoint: it is fixed at 768px.

## Install

Install a component with the shadcn CLI, from the `@alexandrejoly` namespace (listed in the shadcn registry directory) or by URL. It adds one file to `components/ui/`, plus the shadcn components it builds on.

```bash
npx shadcn@latest add @alexandrejoly/dialog-drawer
npx shadcn@latest add https://alexandrejoly.me/r/dialog-drawer.json
```

## Docs

- [Introduction](https://responsivecn.alexandrejoly.me/docs.md): Responsive shadcn/ui overlays that render the desktop component at 768px and up, and its mobile counterpart below.
- [Installation](https://responsivecn.alexandrejoly.me/docs/installation.md): Install a responsive component with the shadcn CLI from the @alexandrejoly registry, and migrate from the shadcn component it replaces.
- [Breakpoint](https://responsivecn.alexandrejoly.me/docs/breakpoint.md): Every responsive component switches at 768px through the shadcn use-mobile hook. Only one side is mounted, so uncontrolled fields reset.
- [Override prop](https://responsivecn.alexandrejoly.me/docs/override-prop.md): Pass mobile-only props through the drawer or popover prop. className merges, state callbacks compose and every other prop replaces.
- [DialogDrawer](https://responsivecn.alexandrejoly.me/docs/dialog-drawer.md): A centered Dialog at desktop that becomes a swipeable Drawer below 768px. Installs with the shadcn CLI on Base UI or Radix.
- [SheetDrawer](https://responsivecn.alexandrejoly.me/docs/sheet-drawer.md): An edge-anchored Sheet at desktop that becomes a swipeable Drawer below 768px. Installs with the shadcn CLI on Base UI or Radix.
- [PopoverDrawer](https://responsivecn.alexandrejoly.me/docs/popover-drawer.md): An anchored Popover at desktop that becomes a swipeable Drawer below 768px. Installs with the shadcn CLI on Base UI or Radix.
- [TooltipPopover](https://responsivecn.alexandrejoly.me/docs/tooltip-popover.md): A hover Tooltip at desktop that becomes a tap-to-open Popover below 768px. Installs with the shadcn CLI on Base UI or Radix.

## Registry

- [Catalog](https://alexandrejoly.me/r/registry.json): every item of the @alexandrejoly registry, without file contents.
- [dialog-drawer](https://alexandrejoly.me/r/dialog-drawer.json): Dialog on desktop, Drawer on mobile.
- [sheet-drawer](https://alexandrejoly.me/r/sheet-drawer.json): Sheet on desktop, Drawer on mobile.
- [popover-drawer](https://alexandrejoly.me/r/popover-drawer.json): Popover on desktop, Drawer on mobile.
- [tooltip-popover](https://alexandrejoly.me/r/tooltip-popover.json): Tooltip on desktop, Popover on mobile.

## Optional

- [Full docs](https://responsivecn.alexandrejoly.me/llms-full.txt): every docs page in one Markdown file.
- [Source code](https://github.com/AlexDemzz/responsivecn): this site.