Componentes

Cree interfaces de usuario atractivas, accesibles y receptivas con más de 125 componentes de Vue impulsados por Tailwind CSS y Reka UI.

Diseño

Componentes estructurales básicos para organizar el diseño de su aplicación y establecer una base consistente para su interfaz de usuario.

App

Un envoltorio para proporcionar configuración global, tostadas e información sobre herramientas para su aplicación.

Container

Un elemento de diseño para centrar y restringir el ancho de su contenido.

Error

Un componente de error preconstruido con soporte para NuxtError.

Footer

Un pie de página sensible para los enlaces de su sitio y avisos legales.

Header

Un header responsive para la navegación de tu sitio.

Main

Un elemento principal que llena la altura del viewport disponible.

Sidebar

Una barra lateral plegable con múltiples variantes visuales.

Splitter

Un conjunto de paneles redimensionables separados por asas arrastrables.

Theme

Un componente sin cabeza para componentes hijos de tema.

Bloques de construcción de interfaz de usuario esenciales que incluyen botones, insignias, avatares, iconos y otros elementos de interfaz fundamentales para crear experiencias de usuario intuitivas y consistentes.

Alert

Una llamada para llamar la atención del usuario.

Avatar

Un elemento img con respaldo y soporte para Nuxt Image.

El Avatargrupo

Apila varios avatares en un grupo.

Badge

Un texto corto para representar un estado o una categoría.

Banner

Muestra un banner en la parte superior de tu sitio web para informar a los usuarios sobre información importante.

Button

Un elemento de botón que puede actuar como un enlace o desencadenar una acción.

Calendar

Un componente de calendario para seleccionar fechas únicas, fechas múltiples o rangos de fechas.

Card

Mostrar el contenido en una tarjeta con un encabezado, cuerpo y pie de página.

Chip

Indicador de un valor numérico o de un estado.

Collapsible

Un elemento plegable para alternar la visibilidad de su contenido.

El FieldGroup

Agrupa varios elementos tipo botón juntos.

Icon

Un componente para mostrar cualquier icono de Iconify u otro componente.

Kbd

Un elemento kbd para mostrar una tecla de teclado.

Progress

Un indicador que muestra el progreso de una tarea.

ProgresiónGrupo

Una barra de progreso dividida en varios segmentos que se suman a un total.

Separator

Separa el contenido horizontal o verticalmente.

Skeleton

Un marcador de posición para mostrar mientras se carga el contenido.

Form (Edición española)

Componentes de formulario completos para crear experiencias interactivas de entrada de usuario, incluidas entradas de texto, selecciones, casillas de verificación, grupos de radio, interruptores, deslizadores y validación de formulario completa.

Checkbox

Un elemento de entrada para alternar entre los estados comprobados y no comprobados.

CheckboxGrupo

Un conjunto de casillas de verificación para seleccionar varias opciones de una lista.

Colorpimiento

Un componente para seleccionar un color.

Archivo Upload

Un elemento de entrada para subir archivos.

Form

Un componente de formulario con validación y manejo de envío integrados.

Formalidad

Un envoltorio para elementos de formulario que proporciona validación y manejo de errores.

Input

Un elemento de entrada para introducir texto.

Inputación

Un componente de entrada para la selección de fechas.

Inputación

Autocompletar con sugerencias en tiempo real.

InputNúmero

Una entrada para valores numéricos con un rango personalizable.

inputación

Un componente para mostrar y recopilar calificaciones de los usuarios.

Los inputtags

Un elemento de entrada que muestra etiquetas interactivas.

Tiempo de entrada

Una entrada para seleccionar un tiempo.

Listbox

Una lista seleccionable de elementos con búsqueda, virtualización y renderización de elementos enriquecidos.

Pininput

Un elemento de entrada para introducir un pin.

El radiogrupo

Un conjunto de botones de radio para seleccionar una sola opción de una lista.

Select

Un elemento para seleccionar de una lista de opciones.

SeleccionesMenú

Un elemento de selección de búsqueda avanzada.

Slider

Una entrada para seleccionar un valor numérico dentro de un rango.

Switch

Un control que alterna entre dos estados.

Textarea

Un elemento textarea para introducir texto de varias líneas.

Información

Componentes para mostrar y organizar datos, incluyendo tablas, acordeones, carruseles, líneas de tiempo, árboles y perfiles de usuario.

Accordion

Un conjunto de paneles plegables.

Carousel

Un carrusel con movimiento y deslizamiento construido con Embla.

Empty

Un componente para mostrar un estado vacío.

Marquee

Un componente para crear contenido de desplazamiento infinito.

Scrollón

Un contenedor de desplazamiento flexible con soporte de virtualización.

Table

Un elemento de tabla sensible para mostrar datos en filas y columnas.

Timeline

Componente que muestra una secuencia de eventos con fechas, títulos, iconos o avatares.

Tree

Un componente de vista de árbol para mostrar e interactuar con estructuras de datos jerárquicas.

User

Mostrar información del usuario con nombre, descripción y avatar.

Navegación

Componentes para la navegación del usuario y wayfinding, incluyendo menús, migas de pan, paginación, pestañas, steppers, enlaces y paletas de comandos.

Breadcrumb

Una jerarquía de enlaces para navegar a través de un sitio web.

Comandancia

Una paleta de comandos con búsqueda de texto completo impulsada por Fuse.js para una coincidencia difusa eficiente.

Columnas de pie

Una lista de enlaces como columnas para mostrar en su pie de página.

Link

Un envoltorio alrededor de NuxtLink con accesorios adicionales.

Navegación Menú

Una lista de enlaces que se pueden mostrar horizontal o verticalmente.

Pagination

Una lista de botones o enlaces para navegar por las páginas.

Stepper

Un conjunto de pasos que se utilizan para indicar el progreso a través de un proceso de varios pasos.

Tabs

Un conjunto de paneles de pestañas que se muestran de uno en uno.

Superpuesto

Elementos flotantes de la interfaz de usuario que aparecen sobre el contenido principal, incluidos modales, popovers, información sobre herramientas, cajones, diapositivas y menús contextuales.

Contexto Menú

Un menú para mostrar acciones al hacer clic derecho sobre un elemento.

Drawer

Un cajón que se desliza suavemente dentro y fuera de la pantalla.

DropdownMenú

Un menú para mostrar acciones al hacer clic en un elemento.

Modal

Una ventana de diálogo que se puede utilizar para mostrar un mensaje o solicitar la entrada del usuario.

Popover

Un diálogo no modal que flota alrededor de un elemento trigger.

Slideover

Un diálogo que se desliza desde cualquier lado de la pantalla.

Toast

Un mensaje breve para proporcionar información o retroalimentación al usuario.

Tooltip

Una ventana emergente que revela información al pasar el cursor sobre un elemento.

página

Secciones de marketing y contenido preconstruidas para crear páginas de destino, blogs, páginas de precios y otros materiales de marketing.

Autenticidad

Un formulario personalizable para crear formularios de inicio de sesión, registro o restablecimiento de contraseña.

El blogpost

Un artículo personalizable para mostrar en una página de blog.

Blogposteos

Mostrar una lista de entradas de blog en un diseño de cuadrícula sensible.

Changelogversión

Un artículo personalizable para mostrar en un changelog.

Changelogversiones

Mostrar una lista de versiones del registro de cambios en una línea de tiempo.

Page

Un diseño de cuadrícula para sus páginas con columnas izquierda y derecha.

Pagañones

Una lista de anclas que se mostrarán en la página.

Páginas

Un lado pegajoso para mostrar la navegación de su página.

Pagebody

El contenido principal de tu página.

Pageón

Componente de tarjeta prediseñado que muestra un título, descripción y enlace opcional.

Páginas Columnas

Un sistema de diseño multi-columna sensible para organizar el contenido de lado a lado.

Páginas

Una sección de llamada a la acción para mostrar en tus páginas.

Pagería

Un componente para mostrar las características clave de su aplicación.

Pageón

Un sistema de cuadrícula sensible para mostrar contenido en un diseño flexible.

Pageheader Siguiente

Un header responsive para tus páginas.

Pagañón

Un héroe responsive para sus páginas.

Páginas Links

Una lista de enlaces que se mostrarán en la página.

Páginas

Un diseño de lista vertical para mostrar el contenido en un formato apilado.

Pagelógos

Una lista de logotipos o imágenes para mostrar en sus páginas.

PageSección

Una sección responsive para tus páginas.

PricePlan

Un plan de precios personalizable para mostrar en una página de precios.

PricePlans

Mostrar una lista de planes de precios en un diseño de cuadrícula sensible.

PriceTablero

Un componente de tabla de precios sensible que muestra planes de precios por niveles con comparaciones de características.

Echa un vistazo al template **SaaS ph008x en GitHub para ver un ejemplo de la vida real.

Dashboard (Edición española)

Componentes especializados para crear paneles dinámicos con paneles de tamaño variable, barras laterales plegables, barras de herramientas y funcionalidad de búsqueda.

El DashboardGroup

Un componente de diseño fijo que proporciona contexto para los componentes del tablero con administración y persistencia del estado de la barra lateral.

DashboardNavegación

Una barra de navegación responsive para mostrar en un panel de control.

El DashboardPanel

Un panel redimensionable para mostrar en un panel de control.

DashboardRequerimientos

Una manija para redimensionar una barra lateral o un panel.

DashboardBúsqueda

Un CommandPalette listo para usar para agregar a su panel de control.

Dashboardsearchbutton

Un botón prediseñado para abrir el modal DashboardSearch.

Dashboardsportsportsportsportsportsportsportsportsportsportsportsportsportsportsportsportsportsportsportsportsportsportsportsportsportsportsports.

Una barra lateral redimensionable y plegable para mostrar en un tablero.

DashboardsidebarColapso

Un botón para colapsar la barra lateral en el escritorio.

DashboardsidebarToggle

Un botón para alternar la barra lateral en el móvil.

DashboardToolbar

Una barra de herramientas para mostrar debajo de la barra de navegación en un tablero.

Echa un vistazo a las plantillas de tablero Nuxt y Vue en GitHub para ver un ejemplo de la vida real.

AI Chat

Componentes para construir interfaces conversacionales y chatbots, impulsados por el [Vercel AI SDKph022xhttps://ai-sdk.dev/).

chatmensaje

Mostrar un mensaje de chat con icono, avatar y acciones.

ChatMensajes

Muestra una lista de mensajes de chat, diseñados para funcionar sin problemas con Vercel AI SDK.

Chatón

Una paleta de chat para crear una interfaz de chatbot dentro de una superposición.

Chatrápido

Una Textarea mejorada para enviar mensajes en las interfaces de chat de IA.

chatpromptsubmit

Un botón para enviar mensajes de chat con manejo automático de estado.

ChatReasoning

Mostrar un razonamiento o proceso de pensamiento de IA plegable.

Chateado

Mostrar un efecto de animación de brillo de texto.

Chattool

Mostrar un estado de invocación de herramienta de IA plegable.

Echa un vistazo a las plantillas Nuxt y Vue AI Chat en GitHub para un ejemplo de la vida real.

Archivo de la etiqueta: badge{label="4.3+" class="align-text-top"}

Componentes para construir un editor de texto enriquecido con soporte para tipos de contenido Markdown, HTML y JSON, impulsado por TipTap.

Editor

Un editor de texto enriquecido basado en TipTap con soporte para tipos de contenido Markdown, HTML y JSON.

EditoresDespacho

Una manija arrastrable para reordenar y seleccionar bloques en el editor.

EditorialidadEmocionesMenú

Un menú de selección de emojis que muestra sugerencias de emojis al escribir el carácter: en el editor.

EditormentoMenú

Menú de mención que muestra sugerencias de usuario al escribir un carácter de activación en el editor.

EditorialSugerenciaMenú

Un menú de comandos que muestra sugerencias de formato y acción al escribir el carácter/en el editor.

EditorialToolbar

Una barra de herramientas personalizable para las acciones del editor que se pueden mostrar como menú fijo, de burbuja o flotante.

Echa un vistazo al templatesph042x **Editor en GitHub para un ejemplo de la vida real.

Contenido

Componentes que se integran con Content para sitios de documentación, incluida la tabla de contenidos, la búsqueda, los árboles de navegación y los enlaces a las páginas circundantes.