Playground

Verificación integral de todos los componentes shadcn-vue instalados, formularios con VeeValidate + Zod, tabla con TanStack Table y notificaciones toast con vue-sonner. Esta página puede reemplazarse cuando se implementen funcionalidades reales.

1. Tarjeta principal

Bienvenido a la zona de pruebas de shadcn-vue

Esta página ejercita cada componente instalado en app/components/ui/. Úsela para confirmar que la instalación funciona de extremo a extremo: formularios, superposiciones, visualización de datos y retroalimentación.

Stack: Nuxt 4 · Vue 3.5 · TypeScript estricto · shadcn-nuxt 2.7 · Reka UI 2.9 · VeeValidate 4.15 · Zod 3.25 · @tanstack/vue-table 8.21 · vue-sonner 2.0

2. Botones

Variantes

Las seis variantes de botón

Tamaños

Tamaños xs, sm, default, lg, icon

3. Insignias, avatares y separadores

Insignias

Las seis variantes de insignia

predeterminado

secundario

contorno

destructivo

fantasma

enlace

Avatares

Imagen, fallback y grupo

NXJDVU

Grupo de avatares con contador

ABC

4. Formulario — VeeValidate + Zod

Iniciar sesión

Ingrese sus credenciales para iniciar sesión.

5. Tabla

Lista de usuarios

7 usuarios de prueba con insignias de estado

Lista de usuarios de prueba para verificar los componentes de tabla.
ID	Nombre	Correo electrónico	Rol	Estado
1	John Doe	john@example.com	Administrador	Activo
2	Jane Smith	jane@example.com	Editor	Activo
3	Bob Johnson	bob@example.com	Visualizador	Inactivo
4	Alice Brown	alice@example.com	Editor	Pendiente
5	Charlie Wilson	charlie@example.com	Administrador	Activo
6	Diana Garcia	diana@example.com	Visualizador	Inactivo
7	Eve Martinez	eve@example.com	Editor	Activo

6. Superposiciones — Dialog, DropdownMenu y Tooltip

Dialog

Modal de confirmación

DropdownMenu

Tres opciones de menú

Tooltip

Pase el cursor para ver el tooltip

7. Notificaciones toast — vue-sonner

Notificaciones toast

Haga clic en un botón para disparar una notificación. El <Toaster /> global está montado en app.vue.

8. Skeleton — Demo de estado de carga

Demo de carga

Alternar un estado de carga de 2 segundos. Los skeletons se muestran durante la carga; el contenido real se renderiza después.

Datos cargados exitosamente

Este contenido aparece después de la demora simulada de 2 segundos. En una aplicación real, esto sería reemplazado por datos reales de una respuesta de API.

{ "status": "ok", "items": 42, "lastUpdated": "2026-06-19T00:00:00Z" }

9. Pestañas

Panel de resumen

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Página de pruebas — puede eliminarse cuando se implementen funcionalidades reales. Todos los componentes se autoimportan desde app/components/ui/.