Breakpoint

Every responsive component switches at 768px through the shadcn use-mobile hook. Only one side is mounted, so uncontrolled fields reset.

The breakpoint is fixed at 768px, read through the standard shadcn use-mobile hook, the same one the shadcn Sidebar uses. At 768px and up the desktop component renders, below it the mobile one. This is a conditional render, not CSS: only one side is mounted at a time.

What carries over

Crossing 768px unmounts one side and mounts the other. Every responsive component holds the open state itself, so an uncontrolled overlay that is open stays open on the other side. State held inside the overlay does not carry over: uncontrolled form fields reset. Keep values you cannot afford to lose in your own state or a form library.

Installation

Install a responsive component with the shadcn CLI from the @alexandrejoly registry, and migrate from the shadcn component it replaces.

Override prop

Pass mobile-only props through the drawer or popover prop. className merges, state callbacks compose and every other prop replaces.

On this page

What carries over