Responsive

A component that renders different content on mobile and desktop screens.

Installation


pnpm dlx pitsi@latest add responsive

Usage

Resizable Scroll Area

On This Page

Installation Usage Examples Navigation With Fallback Props Responsive

import { Responsive } from "@/components/ui/responsive"

<Responsive
  mobile={<MobileNavigation />}
  desktop={<DesktopNavigation />}
/>

Examples

A common use case is rendering different navigation components:

<Responsive
  mobile={
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="ghost" size="icon">
          <Menu />
        </Button>
      </SheetTrigger>
      <SheetContent>
        <MobileNav />
      </SheetContent>
    </Sheet>
  }
  desktop={<DesktopNav />}
/>

With Fallback

You can provide a fallback for SSR/hydration:

<Responsive
  mobile={<MobileView />}
  desktop={<DesktopView />}
  fallback={<LoadingSkeleton />}
/>

Props

Responsive

Prop	Type	Default	Description
`mobile`	`React.ReactNode`	-	Content to render on mobile screens (< 768px)
`desktop`	`React.ReactNode`	-	Content to render on desktop screens (>= 768px)
`fallback`	`React.ReactNode`	`desktop`	Content to render during SSR/hydration before client detection

Desktop View(Resize to see mobile)