Get Started
Components
- Accordion
- Alert Dialog
- Alert
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button Group
- Button
- Card
- Carousel
- Checkbox
- Collapsible
- Combobox
- Command
- Container
- Context Menu
- Data Table
- Dialog
- Drawer
- Dropdown Menu
- Empty
- Field
- Flex
- Form
- Grid
- Hero Button
- Hover Card
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Label
- Menubar
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Responsive
- Scroll Area
- Segmented Control
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spacer
- Spinner
- Squircle
- Switch
- Table
- Tabs
- Textarea
- Theme Toggle
- Toggle Group
- Toggle
- Tooltip
- Typography
- Unicorn Wrapper
Animations
- Background Image Parallax
- Card Swipe Carousel
- Cards Parallax
- Parallax Scroll
- Perspective Carousel
- Perspective Section Transition
- Scroll Expand
- Scroll Fade
- Scroll Scale
- Slide Down
- Slide Up
- Smooth Parallax Scroll
- Smooth Scroll
- Sticky Footer
- Text Along Path
- Text Gradient Opacity
- Text Parallax
- Transforms 3d
- Zoom Parallax
import { Monitor, Smartphone } from "lucide-react"
import { Responsive } from "@/components/ui/responsive"
export function ResponsiveDemo() {
return (
<Responsive
mobile={
<div className="bg-muted flex items-center gap-2 rounded-lg border p-4">
<Smartphone className="size-5" />
<span className="font-medium">Mobile View</span>
<span className="text-muted-foreground text-sm">
(Resize to see desktop)
</span>
</div>
}
desktop={
<div className="bg-muted flex items-center gap-2 rounded-lg border p-4">
<Monitor className="size-5" />
<span className="font-medium">Desktop View</span>
<span className="text-muted-foreground text-sm">
(Resize to see mobile)
</span>
</div>
}
/>
)
}
Installation
pnpm dlx pitsi@latest add responsive
Usage
import { Responsive } from "@/components/ui/responsive"<Responsive
mobile={<MobileNavigation />}
desktop={<DesktopNavigation />}
/>Examples
Navigation
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 |