Exemples playground Nuxt UI

Le playground sépare deux galeries :

Onglet	Contenu
Documentation	Vitrines Nuxt UI + tableaux API (Name / Type / Default / Description)
Examples	Démos JSONForms, compositions et cas limites

Tout exemple dont le name commence par nuxt- atterrit automatiquement dans Documentation. Ouvrir le playground.

Catalogue Documentation

Exemple	Fichier	À retenir
Nuxt UI — Vitrine des contrôles	`nuxt-ui-showcase.ts`	Plusieurs contrôles côte à côte pour juger hauteur / alignement
Control Options	`control-options.ts`	Options communes, restrict, toggle, autocomplete, WYSIWYG
Simple form	`simple-form.ts`	Formulaire minimal string + boolean

Exemple	Composants	Options clés
String & Textarea	`UInput`, `UTextarea`, password	`restrict`, `multi`, `input`, `format: password`
Pin Input	`UPinInput`	`format: pin`, `otp`, `mask`, `length`
Color Picker	`UColorPicker`	`colorFormat`, `showInput`
File Upload	`UFileUpload`	`accept`, `layout`, multi via `array`
Autocomplete API	`UInputMenu`	`api.*`, `minLength`, `suggestion`
WYSIWYG	`UEditor`	`wysiwyg`, `contentType` (`json` \| `html`)

Exemple	Composants	Options clés
Number	`UInputNumber`	`step`, `inputNumber`
Slider	`USlider`	`slider`, `step`, `hideValue`
Rating	`UInputRating`	`format: rating`, `icon`, `hideValue`
Boolean	`UCheckbox`, `USwitch`	`toggle`, `checkbox`, `switch`

Exemple	Composants	Options clés
Select	`USelect`, `USelectMenu`	`format: select` vs défaut (recherche)
Radio & Multi-enum	`URadioGroup`, `UCheckboxGroup`	`format: radio`, `vertical`, `radioGroup`

Exemple	Composants	Options clés
Date & Time	`UInputDate`, `UInputTime`	`pattern`, précision mois / année
Calendar	`UCalendar`	`format: calendar`
Date ranges	Calendar / InputDate	`range`, `minDate`, `disabled*`

Exemple	Composants	Options clés
Tags	`UInputTags`	`format: tags`, `delimiter`
Array	Cartes répétables	`showSortButtons`, `elementLabelProp`, `detail`
Layouts	`UCard`, `UTabs`, Label	`card`, `queryKey`, `level`, `separator`

Créer playground/examples/items/nuxt-<nom>.ts qui appelle registerExamples([{ name: 'nuxt-…', … }]).
Préfixer name par nuxt- (ou passer section: 'docs') pour l’onglet Documentation.
Déclarer les groupes API dans playground/docs-api/props.ts (API_BY_EXAMPLE).
Documenter les options dans docs/guide/options/ et lier depuis cette page.

Les fichiers sont chargés en eager via import.meta.glob dans playground/examples/index.ts — aucun registre manuel supplémentaire.

Chaque page d’options se termine par des JSON prêts à coller. Les vitrines ci-dessus en sont la version interactive :