• Getting Started
  • Using Visly from code
  • Version Control
  • Tokens
  • Layers
  • Primitives
  • Interaction States
  • Variants
  • Props & Slots
  • Composition & Inner Components
  • Built-ins
  • Responsive Design


  • Using Visly with Create React App
  • Using Visly with Next.js
  • Using Visly with Gatsby
  • Creating stateful components
  • Routing with Visly
  • Using variants for responsive design
  • Create dynamic UI with inner components
  • Reuse existing components with Slots


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.

To make a component responsive in Visly, you need to create a enum variant that includes the different sizes for your component. The name of this variant doesn't matter, but we usually call it size.

There is nothing special about the size variant in the example above, it's just a variant like any other. Next, you'll 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 { FileInput, useBreakpoint } from '../visly'

// Only do this once in index.js or equivalent startup script
setBreakpoints('min-width', ['800px', '1200px'])

export default function() {
  const size = useBreakpoint('small', ['medium', 'large'])
  return <FileInput 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 you only want breakpoints for 800px and 1200px you would call setBreakpoints('min-width', ['800px', '1200px']). If you're 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 changing the first argument to this function.