Component Playground

A component for displaying a component playground

Default

Default component playground

Controls

Hover to energize

Electric border card

arcColor tints the lightning; accentColor tints the hover shadow and glow.

default-example.tsx

1"use client";
2
3import { ElectricBorderCardDefaultExample } from "../electric-border-card";
4
5export function ComponentPlaygroundDefaultExample() {
6  return (
7    <div className="mx-auto w-full max-w-4xl">
8      <ElectricBorderCardDefaultExample />
9    </div>
10  );
11}

Controls

arcColor

accentColor

radius

volumetricShadow

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