Components
Loading preview...
use-mobile hook
npx shadcn@latest add https://21st.dev/r/shadcn/use-mobileimport { useIsMobile } from "@/hooks/use-mobile"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Smartphone, Monitor } from "lucide-react"
export function MobileDemo() {
const isMobile = useIsMobile()
return (
<Card className="w-[300px] mx-auto mt-4">
<CardHeader>
<CardTitle>Device Detection Demo</CardTitle>
</CardHeader>
<CardContent className="flex flex-col items-center gap-4">
{isMobile ? (
<div className="flex items-center gap-2">
<Smartphone className="w-5 h-5" />
<span>Mobile View</span>
</div>
) : (
<div className="flex items-center gap-2">
<Monitor className="w-5 h-5" />
<span>Desktop View</span>
</div>
)}
</CardContent>
</Card>
)
}