Hooks

useMediaQuery

Reactively track CSS media queries. Useful for responsive layouts, dark mode detection, and adapting UI based on screen size or user preferences.

Breakpoint Detection

Resize the browser window to see which breakpoints currently match.

sm (640px) md (768px) lg (1024px) xl (1280px)

<script lang="ts">
  import { Badge } from 'sv5ui';
  import { useMediaQuery } from 'sv5ui';

  const sm = useMediaQuery('(min-width: 640px)');
  const md = useMediaQuery('(min-width: 768px)');
  const lg = useMediaQuery('(min-width: 1024px)');
  const xl = useMediaQuery('(min-width: 1280px)');
</script>

<Badge label="SM" color={sm.matches ? 'success' : 'surface'} variant={sm.matches ? 'solid' : 'outline'} />
<Badge label="MD" color={md.matches ? 'success' : 'surface'} variant={md.matches ? 'solid' : 'outline'} />
<Badge label="LG" color={lg.matches ? 'success' : 'surface'} variant={lg.matches ? 'solid' : 'outline'} />
<Badge label="XL" color={xl.matches ? 'success' : 'surface'} variant={xl.matches ? 'solid' : 'outline'} />

Dark Mode Detection

Detect the user's system color scheme preference.

System preference: light

Your system prefers light mode.

<script lang="ts">
  import { Badge } from 'sv5ui';
  import { useMediaQuery } from 'sv5ui';

  const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
  let theme = $derived(prefersDark.matches ? 'dark' : 'light');
</script>

<Badge
  label={theme}
  color={prefersDark.matches ? 'info' : 'warning'}
  leadingIcon={prefersDark.matches ? 'lucide:moon' : 'lucide:sun'}
  variant="soft"
/>

Options

Option	Type	Default	Description
`initialValue`	`boolean`	`false`	`Initial value before media query is evaluated (useful for SSR)`

Return Values

Name	Type	Default	Description
`matches`	`boolean`	`-`	`Whether the media query currently matches`

useClipboard useClickOutside