Component Library

Component Playground

A component for displaying a component playground

Default

Default component playground

Controls

Compare playground

Adjust interactive compare props live

Controls

first image

second image

compare-example.tsx

1<Compare
2  initialSliderPercentage={40}
3  slideMode="drag"
4  showHandlebar
5  autoplay={false}
6  autoplayDuration={3000}
7/>

Controls

initialSliderPercentage

slideMode

showHandlebar

autoplay

autoplayDuration

compare-example.tsx

1<Compare
2  initialSliderPercentage={40}
3  slideMode="drag"
4  showHandlebar
5  autoplay={false}
6  autoplayDuration={3000}
7/>

Controls

initialSliderPercentage

slideMode

showHandlebar

autoplay

autoplayDuration

Props

Name	Type	Default	Description
controls	Record<string, PlaygroundControlConfig>	undefined	Live playground props; omit (or use an empty object) to hide the controls toolbar toggle and panel so children render exactly as authored—useful for fixed assets or non-interactive previews
controlsEnabled	boolean	true	Quickly turn controls behavior on/off without removing `controls`; when false, preview renders as static
showPreviewReset	boolean	false	Shows Reset animation in the toolbar; remounts the preview so motion / in-view demos can run again
dynamicCode	boolean	true	When at least one control is configured, rewrites the root JSX snippet in the Code tab from the static `code` template using the current values (falls back to `code` if parsing fails); ignored when `controls` is omitted
defaultControlsOpen	boolean	true	When live controls are present, whether the controls block under the preview starts visible; hiding it does not reset control values
controlsVisibilityToggle	"switch" \| "checkbox"	"switch"	When live controls are present, toolbar control used to show or hide the controls section
embedded	boolean	false	Softer outer chrome when nested in docs cards or other containers