markdown/docs/1.简单文档/5.components/playground.md

title, icon, navBadges, badges

title	icon	navBadges	badges
Playground	lucide:app-window	value type New lime	value icon to target Source lucide:code https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Playground.vue _blank

Usage

Stackblitz

::stack ::div{class="p-4"} ::playground --- provider: stackblitz repo: nuxt/starter branch: v3 file: app.vue --- :: ::

::playground
---
provider: stackblitz
repo: nuxt/starter
branch: v3
file: app.vue
---
::

::

CodeSandbox

::stack ::div{class="p-4"} ::playground --- provider: codesandbox repo: nuxt/starter branch: v3 file: app.vue --- :: ::

::playground
---
provider: codesandbox
repo: nuxt/starter
branch: v3
file: app.vue
---
::

::

Props

::field-group :field{name="provider" type="'stackblitz' | 'codesandbox'"}[Provider to use] :field{name="repo" type="string"}[GitHub repository name (e.g. nuxt/starter)] :field{name="branch" type="string" default-value="main"}[Branch name] ::field{name="id" type="string"} Repository ID (e.g. for Stackblitz github-t1vjvm, for Codesandbox 8hq5qn)

::alert{icon="lucide:info" type="info"}
You need to provide either `repo` or `id` prop, but not both.
::

:: :field{name="dir" type="string" default-value="''"}[Directory to open in the playground (optional)] :field{name="file" type="string"}[File path to open] :field{name="title" type="string" default-value="Playground"}[Title of the iframe] ::