• Building your first component
  • Managing design tokens
  • Version Control
  • Using Visly components in code
  • Styling layers
  • Designing Primitives
  • Interactive components
  • Props
  • Variants
  • Composition
  • Responsive design


  • Building stateful components
  • Migrating components from code
  • Integrate Visly with Next.js
  • Building an Avatar component
  • Using slots for dynamic content
  • Using variants to customize layout
  • Stacking layers in z-index


Responsive design

When building applications that work on both large and small screens it's important to think about how those components change as the size of the device changes, this is typically referred to as responsive design. Visly makes this possible through the use of Variants.

Start by creating a variant with a couple different size options. In this example we'll name this variant size however you can name it anything you want.

Now select each variant option and customize the look of your component for each size. Once done we will mode over to code.

Responding to device size

There is nothing special about the size variant we created, it's just a variant like any other. Now we need to add some code to make sure the correct variant is used based on the screen size of the device the code is running on. For this Visly exports the useBreakpoint hook.

import { Button, useBreakpoint } from './visly'

export default function() {
  const size = useBreakpoint('small', ['medium', 'large'])
  return <Button size={size} />

The useBreakpoint() hooks above will choose a variant based on the size of the device running this code. Returning 'small' by default, 'medium' if the size of the display is larger than the first breakpoint, and 'large' if it is larger than the second breakpoint.

By default breakpoints are configured for 480px768px1024px, and 1200px. You can change this by calling setBreakpoints() at the start of your application. For example if we only want breakpoints for 800px and 1200px we would call setBreakpoints('min-width', ['800px', '1200px']). If you designing your components for a desktop-first environment rather than mobile-first you probably want to change the breakpoints to be based on max-width instead of min-width by calling the same function.