Component Playground

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

Default

Default component playground

Controls

Compare playground

Adjust interactive compare props live

Controls

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

default-example.tsx

1"use client";
2
3import { Compare } from "@/registry/ui";
4import { ComponentPlayground } from "@/registry/ui";
5
6export function ComponentPlaygroundDefaultExample() {
7  return (
8    <div className="mx-auto w-full max-w-4xl">
9      <ComponentPlayground
10        title="Compare playground"
11        description="Adjust interactive compare props live"
12        showPreviewReset
13        code={`<Compare
14  initialSliderPercentage={40}
15  slideMode="drag"
16  showHandlebar
17  autoplay={false}
18  autoplayDuration={3000}
19/>`}
20        filename="compare-example.tsx"
21        controls={{
22          initialSliderPercentage: {
23            type: "range",
24            min: 0,
25            max: 100,
26            step: 1,
27            default: 40,
28          },
29          slideMode: {
30            type: "select",
31            options: ["hover", "drag"],
32            default: "drag",
33          },
34          showHandlebar: {
35            type: "boolean",
36            default: true,
37          },
38          autoplay: {
39            type: "boolean",
40            default: false,
41          },
42          autoplayDuration: {
43            type: "range",
44            min: 1200,
45            max: 8000,
46            step: 200,
47            default: 3000,
48          },
49        }}
50      >
51        <Compare
52          firstImage="https://placehold.co/600x400"
53          secondImage="https://placehold.co/600x400"
54          className="w-[400px] h-[400px]"
55        />
56      </ComponentPlayground>
57    </div>
58  );
59}

Controls

initialSliderPercentage

slideMode

showHandlebar

autoplay

autoplayDuration

Installation & source

Install via the shadcn CLI or copy the registry files manually.

bash

npx shadcn@latest add @tt-ui/component-playground

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