Responsive Design

Overview

Fidely UI uses a mobile-first breakpoint system with min-width media queries:

export const breakpoints = {
  sm: '640px',
  md: '768px',
  lg: '1024px',
  xl: '1280px',
  '2xl': '1536px',
}

Object syntax

Here's an example of how to change the font weight of a text on large screens

<Text fontWeight="medium" lg={{ fontWeight: 'bold' }}>
  Text
</Text>

or use the prop based modifier

<Text fontWeight={{ base: 'medium', lg: 'bold' }}>Text</Text>

Array syntax

Fidely UI also accepts arrays as values for responsive styles. Pass the corresponding value for each breakpoint in the array. Using our previous code as an example:

<Text fontWeight={['medium', undefined, undefined, 'bold']}>Text</Text>

Notice the use of undefined for the breakpoints to skip the md and lg breakpoints.

Breakpoint targeting

Breakpoint range

Fidely UI provides a way to target a range of breakpoints using the To notation. To apply styles between the md and xl breakpoints, use the mdToXl property:

<Text fontWeight={{ mdToXl: 'bold' }}>Text</Text>

This text will only be bold from md to xl breakpoints.

Only breakpoint

To target a single breakpoint, use the Only notation. Here's an example of how to apply styles only in the lg breakpoint, using the lgOnly property:

<Text fontWeight={{ lgOnly: 'bold' }}>Text</Text>

Down breakpoint

To target a breakpoint and below, use the Down notation. This creates clear boundaries for responsive variants. Here's an example of how to apply styles from the md breakpoint and below:

<Text fontWeight={{ smDown: 'bold' }}>Text</Text>

This text will be bold from base up to and including the sm breakpoint.

Hiding elements at breakpoint

Fidely UI provides the hideFrom and hideBelow utilities to hide elements at specific breakpoints powered by Panda Css.

To hide an element from the md breakpoint, use the hideFrom utility:

<HStack hideFrom="md">
  <Text>This text will be hidden from the `md` breakpoint</Text>
</HStack>

To hide an element below the md breakpoint, use the hideBelow utility:

<HStack hideBelow="md">
  <Text>This text will be hidden below the `md` breakpoint</Text>
</HStack>

Responsive Variants

When applying breakpoints to component variants, we recommend using explicit breakpoints instead of using the base breakpoint.

This way, you can avoid style leaking from one variant to another.

// okay, but can lead to style leaking ⚠️
<Button variant={{ base: "solid", md: "outline" }}>Button</Button>

// good ✅
<Button variant={{ smDown: "solid", md: "outline" }}>Button</Button>

Customizing Breakpoints

To learn how to customize breakpoints, please refer to the Panda CSS customizing breakpoints section.