feat(components): add Repeater component

[salehattari]

🔗 Linked issue

Resolves #5308

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR introduces a new Repeater component.
It allows users to create dynamic, sortable lists of forms or items. It is designed to handle complex objects, supports custom templates, and is fully integrated with the Nuxt UI theme system.

• Dependencies: This component utilizes @vueuse/integrations/useSortable (wrapping sortablejs).

Features

• 🔄 Drag & Drop: Fully sortable items powered by useSortable (with touch support).
• 🎛 Manual Sorting: Optional Up/Down buttons for better accessibility.
• 🎨 Themeable: Built with tv (Tailwind Variants) supporting outline, soft, etc.
• 🛡 Limits: Built-in support for maxItems and minItems.
• 🧩 Extensible Slots: Full control via slots.
• ⌨️ Typed: Generic type support for complex models (T extends Record<string, any>).

Checklist

• Component logic (src/runtime/components/Repeater.vue)
• Theme configuration (src/theme/repeater.ts)
• Playground example (playgrounds/nuxt/app/pages/components/repeater.vue)
• Tests (test/components/Repeater.spec.ts)
• Documentation (docs/content/docs/components/repeater.md)

Preview

URepeater.-.salehattari.mp4

[ta-inventions]

Hey man,
CI was failing due to unified-signatures lint rules and unused vars.
I pushed a fix PR against your branch that resolves this:
salehattari#1
Thx for this great work btw!

[ta-inventions]

Hey @salehattari,
I pushed another PR against your branch that resolves the new CI failed test:
salehattari#2

[ta-inventions]

Hey @salehattari,
I pushed another PR against your branch that resolves the new CI failed typecheck:
salehattari#3

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@5797

commit: a2bfc0a

[ta-inventions]

Hey, @atinux @TheAlexLichter - I'm not sure if I'm tagging the right people to address it but -
it seens that tiptap/core published a new version (3.15) like 2 hours ago:

https://www.npmjs.com/package/@tiptap/core?activeTab=readme
And since the pnpm-lock.yaml on the root of the project is fixed to:
'@tiptap/core': specifier: ^3.14.0 version: 3.14.0(@tiptap/[email protected])
but the Install dependencies for the playground CI runs:
Run pnpm install --ignore-workspace

it ignores the root lock file and install the latest version of tiptap/core(3.15) which later on causes an error on the
Typecheck step of the playground because there is a mismatch between the 2 tiptap/core versions:
Types of property 'addNodeView' are incompatible. Type '((this: { name: string; options: any; storage: any; editor: import("/home/runner/work/ui/ui/node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@tiptap/core/dist/index").Editor; type: import("/home/runner/work/ui/ui/playgrounds/nuxt/node_modules/.pnpm/[email protected]/node_modules/prosemirr...' is not assignable to type '((this: { name: string; options: any; storage: any; editor: import("/home/runner/work/ui/ui/playgrounds/nuxt/node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@tiptap/core/dist/index").Editor; type: import("/home/runner/work/ui/ui/playgrounds/nuxt/node_modules/.pnpm/[email protected]/node_...'.

Any guidance? 🙏

[caiotarifa]

Thanks @salehattari for your work on this PR! A Repeater is really needed, especially for forms.

Small naming thought: if the main goal is form usage (state + validation), maybe a name like FormRepeater (or UFormRepeater) could make that intent clearer.

A few points to consider:

1. The UI of each item/card feels a bit “big”. Maybe the title and the actions could stay on the same line, with a more compact spacing.
2. It would be great to have a “single line” / “compact” option for simple cases (like repeating only one field), without the full card structure.
3. Accessibility is very important here: keyboard support, focus order, clear labels for icon-only buttons, and a good experience for screen readers.
4. Form integration: it should work well with UForm state and Standard Schema validation (errors per item / per field, and predictable paths/keys).

For UI reference, I really like Filament’s Repeater: https://filamentphp.com/docs/3.x/forms/fields/repeater

It keeps the header/actions compact and works great in real forms.

With Buttons

With Collapsing

With 'One Line' Mode