Components
Starting preview...
useMediaQuery hook
npx shadcn@latest add https://21st.dev/r/serafimcloud/use-media-queryimport { useIsMobile } from "@/hooks/use-media-query"
import { Card } from "@/components/ui/card"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Badge } from "@/components/ui/badge"
function ResponsiveDemo() {
const isMobile = useIsMobile()
return (
<Card className="p-6 max-w-md mx-auto">
<div className="space-y-4">
<h1 className="text-2xl font-bold flex items-center">
Current mode: {" "}
<Badge className="h-6 ml-2" variant={isMobile ? "destructive" : "default"}>
{isMobile ? "Mobile" : "Desktop"}
</Badge>
</h1>
<Alert>
<AlertDescription>
Resize your browser window to see the changes!
</AlertDescription>
</Alert>
</div>
</Card>
)
}
export { ResponsiveDemo }