Installation

Responsive components install with the shadcn CLI into a shadcn project on Base UI or Radix (see Bases).

Add a componentCopy Anchor Link

The components ship from the @alexandrejoly registry, listed in the shadcn registry directory, so the CLI resolves the namespace with no setup:

npx shadcn@latest add @alexandrejoly/dialog-drawer

The full URL form works too:

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

To pin the namespace in your project, add it to the registries field of your components.json:

{
  "registries": {
    "@alexandrejoly": "https://alexandrejoly.me/r/{name}.json"
  }
}

The install adds the official shadcn items the component builds on (dialog, drawer, use-mobile, …) as registry dependencies. You get the standard shadcn components, not copies of them.

MigratingCopy Anchor Link

A responsive component takes the desktop component's props 1:1, on the root and on every part. To migrate, change your imports and the tag names, nothing else:

- import { Dialog, DialogTrigger, DialogContent } from "@/components/ui/dialog"
+ import { DialogDrawer, DialogDrawerTrigger, DialogDrawerContent } from "@/components/ui/dialog-drawer"

Each part name inserts the mobile side's name after the desktop one: DialogContent becomes DialogDrawerContent, and so on. Same props, same children.