Breakpoints

Breakpoints allow you to build responsive layouts by reacting to screen size changes. Zen uses Tailwind's default breakpoints with a mobile-first approach. Styles are applied from the smallest screen up, and breakpoints specify the minimum width at which styles take effect.

Usage#

Certain properties of layout components accept a Responsive object, which specifies what value to apply at a given breakpoint. Use 'base' for the mobile-first value that applies to all screen sizes.

For example, the Heading component takes a size prop. If we pass in a Responsive object, we can specify which sizes to display at different breakpoints.

<Heading
  size={{
    base: 'lg',    // Base size for all screens
    sm: 'xl',      // 640px and up
    md: '2xl',     // 768px and up
    lg: '3xl',     // 1024px and up
    xl: '4xl',     // 1280px and up
  }}
>
  This text will shrink/grow as the screen resizes.
</Heading>

useBreakpoint Hook#

The useBreakpoint hook returns the current breakpoint based on screen width.

import { useBreakpoint } from '@umami/react-zen';

function MyComponent() {
  const breakpoint = useBreakpoint();

  // breakpoint will be: 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
  return <Text>Current breakpoint: {breakpoint}</Text>;
}