Breakpoint preview

<BreakpointPreview
	blocks={[
		{
			breakpoint: 'Mobile',
			widthEnd: '480px',
			value: 'Regular',
			dotsStart: true,
			alignEnd: true,
			active: true,
		},
		{
			breakpoint: 'Default',
			value: 'Small',
			dotsEnd: true,
		},
	]}
/>

Highlighted props

For the complete list of props, use your IDE's autocomplete functionality.

Start dots

If you don't want to reduce the width of the blocks within.

<BreakpointPreview
	dotsStart
	blocks={[
		{
			breakpoint: 'Mobile',
			widthEnd: '480px',
			value: 'Regular',
			alignEnd: true,
			active: true,
		},
		{
			breakpoint: 'Default',
			value: 'Small',
			dotsEnd: true,
		},
	]}
/>

End dots

If you don't want to reduce the width of the blocks within.

<BreakpointPreview
	dotsEnd
	blocks={[
		{
			breakpoint: 'Mobile',
			widthEnd: '480px',
			value: 'Regular',
			dotsStart: true,
			alignEnd: true,
			active: true,
		},
		{
			breakpoint: 'Default',
			value: 'Small',
		},
	]}
/>