Hooks
useMediaQuery
A hook that provides a way to detect if a media query matches the current viewport.
npx shadcn@latest add https://hookagain.vercel.app/r/use-media-query.json
import { useMediaQuery } from "@/hooks/use-media-query"
function Example() {
const isDesktop = useMediaQuery("(min-width: 768px)")
const prefersDark = useMediaQuery("(prefers-color-scheme: dark)")
return (
<div>
<p>Is Desktop: {isDesktop ? "Yes" : "No"}</p>
<p>Prefers Dark Theme: {prefersDark ? "Yes" : "No"}</p>
</div>
)
}