Breakpoints

The breakpoint configuration is used to show the toolbar, labels and scale. You can customize the breakpoints to match your design system. It doesn't effect the behaviour of the component itself.

Default Presets

Component comes with it's own default set of breakpoints and you can find them here: Here

Custom Breakpoints

You can pass breakpoints like following:

<ChildPreview
  config={{
    darkMode: colorMode === "dark" ? true : false,
  }}
  breakpoints={[
    {
      title: "xxs",
      minWidthRem: 5,
      minWidthPx: 80,
      icon: DoorClosedIcon,
    },
    {
      title: "md",
      minWidthRem: 28,
      minWidthPx: 448,
      icon: Tablet,
    },
  ]}
>
  <Child />
</ChildPreview>