Design system

DesignSystem component serves as a root component for your application that gives access to all components to the current theme and breakpoint.

Every application must be wrapped in by DesignSystem in order to use Visage components.

Responsive design

Design of applications is often responsive so it adapts to user's device screen size. Visage supports responsive design but you have to enable it because it's disabled by default.

To enable responsive support you need to use responsive prop on DesignSystem component. This prop enables breakpoint detection using window.matchMedia API.

Visage uses it's default set of breakpoints which can be changed.

If default breakpoints don't suit your needs you change them using breakpoints prop.

By default Visage uses createEmotionStyleGenerator() that produces only styles for current matched breakpoint and doesn't output any media queries.

Default style generator works fine for client side only applications or if you use server side rendering with device detection.

In case you need to produce styles for server side rendered application without an ability to detect device, you need to use createEmotionResponsiveStyleGenerator() so styles produced by Visage will contain media queries. For example you'd use this in a website powered by Gatsby.

Prop Types

PropRequiredTypeDescription
breakpointsno
string[] | undefined
Css media query conditions ordered from smallest to largest e.g. ['only screen', 'screen and (min-width: 1024px)'] This prop is respected only if responsive prop is set to true
childrenno
ReactNode
defaultZIndexno
number | undefined
Sets the default zIndex (default is 100)
disableGlobalStylesno
boolean | undefined
Disables all styles that sets some visual properties and keeps just CSS reset for body and html
isno
number | undefined
Default breakpoint
responsiveno
boolean | undefined
Enable breakpoint detection using window.matchMedia API
styleGeneratorno
StyleGenerator | undefined
Use custom style generator
themeno
Theme<StyleSheetThemeSettings<StyleSheetFaces>> | undefined
Use custom theme
PreviousGetting startedNextStyles