Componentes

Componentes

Fenextjs posee componentes para implementar en Nextjs con el objetivo de ahorrar tiempo en el desarrollo de funcionalidades, para solo consentrarce en los estilos de los componentes

Lista de componentes disponibles categorizados de la siguiente manera >>>

Estructurales

  • ⚙️ Configuración
  • 🟩 Forma

Navegación

  • 🍎 Usabilidad
  • 🔃 Carga
  • ⌛ Progreso

Elementos

  • 🅰️ Texto
  • 🖼️ Imágenes
  • ⌨️ Entradas de texto
  • 📅 Fechas
  • 📢 Comunicación
  • 🗒️ Orden
  • 👑 Lujo

Estucturales

⚙️ Configuración

  • Theme > El componente de Theme permite definir y aplicar un conjunto coherente de estilos y paletas de colores en toda la aplicación. Es fundamental para mantener la consistencia visual y para implementar fácilmente cambios de temas o modos (como claro/oscuro).
  • Layout > Proporciona estructuras predeterminadas para el diseño de páginas.
    • Layout Grid Menu Left > Organiza la página con un menú lateral a la izquierda, optimizando el uso del espacio y facilitando la navegación en la aplicación.
    • Layout Grid Menu Top > Presenta un diseño con un menú en la parte superior, adecuado para aplicaciones con enfoque en la horizontalidad y accesibilidad rápida a diferentes secciones.
    • Layout Grid Menu TopLeft > Combina ambas disposiciones, con menús tanto en la parte superior como en el lado izquierdo, proporcionando una estructura de navegación robusta y flexible para aplicaciones complejas o sitios web.

🟩 Forma

  • Header > Cabecera de sitio o aplicación, incluye navegación y elementos clave de UI como logos, menús o controles de usuario.

  • User Profile >

  • Container > Contenedor básico para alinear y organizar elementos, esencial en el diseño web responsivo y en la estandarización de layouts.

  • Box > Contenedor genérico para UI, útil para agrupar elementos relacionados visualmente, como en dashboards o en la agrupación de formularios.

  • Columns > Estructura para diseño de columnas, fundamental en layouts responsivos o para organizar contenido en secciones claramente definidas.

  • Two Col Sticky > ste componente estructura la página en dos columnas, con una de ellas fija ("sticky") que permanece visible mientras se desplaza la otra. Es ideal para diseños que requieren una navegación constante o elementos de referencia, como menús laterales o dashboards con filtros.

  • ContentShow > Mostrar contenido de manera condicional, ideal para interfaces dinámicas donde el contenido depende de ciertas condiciones o selecciones del usuario.

Navegación

🍎 Usabilidad

  • Menu > El componente Menu actúa como el contenedor para un conjunto de ItemMenu o enlaces de navegación. Es esencial para la creación de barras de navegación, menús desplegables o paneles laterales, organizando las opciones de navegación de manera estructurada y coherente. - Button Menu > Este componente es un botón interactivo diseñado para activar o desplegar un menú de navegación. Es ideal para interfaces que requieren menús compactos, especialmente en diseños responsivos o en aplicaciones móviles. - Item Menu > Representa un elemento individual dentro de un menú. Cada ItemMenu es un enlace o acción en la lista de navegación, permitiendo una organización clara y accesible de las opciones del menú.

  • Back > Botón para retroceder en el flujo del usuario. Comúnmente usado en aplicaciones con múltiples niveles de navegación o en flujos de trabajo paso a paso.

  • Breadcrumb > Indicador de la ruta de navegación actual. Esencial en sitios web con estructura jerárquica profunda, como tiendas en línea o sitios de contenido.

  • Button > Elemento interactivo para acciones de usuario, como enviar formularios, abrir ventanas modales o activar funciones. Clave en cualquier interfaz interactiva.

  • Share > El componente Share permite a los usuarios compartir contenido de la página en redes sociales o plataformas de mensajería. Es esencial en sitios que buscan aumentar su alcance y promover la interacción social.

  • Link > Navegación interna o externa, fundamental en cualquier interfaz para conectar diferentes áreas o recursos.

  • Tab > Pestañas para organizar contenido en secciones, comunes en interfaces de configuración, perfiles de usuario o en áreas con múltiples categorías de contenido.

  • Pagination > Navegación por páginas de contenido, esencial en sitios con listados largos como blogs, catálogos de productos o bases de datos.

    • Pagination All > Este componente de paginación está diseñado para mostrar todas las páginas disponibles en una interfaz, permitiendo a los usuarios saltar directamente a cualquier página. Es útil en situaciones donde se necesita un acceso rápido a páginas específicas en un conjunto de datos extenso.
    • Pagination Page > Un componente de paginación que muestra un número determinado de páginas alrededor de la página actual, con opciones para avanzar hacia adelante y atrás. Este enfoque es ideal para conjuntos de datos grandes, donde mostrar todas las páginas a la vez puede ser abrumador o poco práctico.
    • Pagination Item Page > Representa un elemento individual en un sistema de paginación. Cada ItemPage es un enlace a una página específica, permitiendo la navegación precisa dentro de un conjunto de datos o contenido paginado.

  • Steps > El componente Steps es utilizado para mostrar una secuencia de pasos en un proceso, como en formularios de registro o procesos de compra. Ofrece una manera clara y visual de indicar el progreso a través de diferentes etapas, ayudando a los usuarios a comprender su posición actual y los pasos siguientes en un procedimiento.

🔃 Carga

  • Loader > Indicadores de carga para procesos o cargas de contenido, mejoran la experiencia de
    • Loader Progress Line > Este componente muestra una barra de progreso horizontal que se llena gradualmente para indicar el avance de una tarea o carga. Es ideal para procesos donde se puede determinar el progreso, como la carga de archivos o el envío de formularios.
    • Loader Spinner > Un indicador circular o 'spinner' que gira para mostrar que una operación está en curso. Es ampliamente utilizado en aplicaciones y sitios web durante la espera de procesos que no tienen un tiempo de finalización definido, como la carga de datos desde un servidor.
    • Loader Skeleton > Este loader simula la disposición del contenido antes de que se cargue completamente, usando líneas o formas en el lugar donde aparecerá el contenido real. Es efectivo para mejorar la experiencia del usuario durante la carga de páginas, reduciendo la percepción de espera y manteniendo la estructura visual de la página.
  • Content Loading > Indica el estado de carga del contenido, mejorando la experiencia del usuario en cargas asincrónicas o en espera de datos.

⌛ Progreso

  • Progress > Un indicador visual para mostrar el progreso de una tarea o proceso. Puede ser utilizado en situaciones donde se necesite representar visualmente el avance, como en cargas de archivos, procesos de instalación o progreso de tareas.
  • Page Progress > Este componente es utilizado para mostrar el progreso de carga de una página completa. Es ideal para informar a los usuarios sobre el estado de carga de la página, especialmente en sitios web con contenido pesado o en aplicaciones web que requieren tiempo para cargar datos.
  • Progress Line > Es una variante del indicador de progreso que muestra una barra lineal. Se utiliza comúnmente para representar el progreso de manera simple y clara, como en el progreso de descargas o en barras de carga de formularios.
  • Progress Circle > Este estilo muestra el progreso en un formato circular, lo que es ideal para espacios compactos o para una presentación estética más dinámica, como en dashboards o en interfaces de aplicaciones móviles.

Elementos

🅰️ Texto

  • Title > Un componente para crear títulos y encabezados. Es esencial para estructurar el contenido, destacar secciones y mejorar la legibilidad en interfaces y páginas web.

  • Text > Este componente se utiliza para la presentación de texto en la interfaz, ofreciendo flexibilidad para diferentes estilos, como párrafos, citas o cualquier otro formato de texto.

  • Tooltip > Proporciona información adicional en forma de texto emergente cuando el usuario pasa el cursor sobre un elemento. Ideal para explicar funciones de botones, iconos o para proporcionar detalles adicionales sin sobrecargar la interfaz.

  • Copy > Funcionalidad para copiar texto al portapapeles, útil en interfaces donde los usuarios necesitan replicar información rápidamente, como en aplicaciones de código o datos.

  • Chronometer: > Mide y muestra tiempo, ideal en aplicaciones de productividad, temporizadores de eventos o para seguimiento de actividades.

🖼️ Imágenes

  • Img > Componente para integrar y gestionar imágenes, clave en cualquier interfaz que requiera visualización de imágenes, como blogs, galerías o productos.

  • Grid Gallery > Presenta imágenes o contenido en formato de cuadrícula, ideal para portfolios, catálogos de productos o galerías de medios.s

  • Gallery > Galería para mostrar colecciones de imágenes, usada en sitios de fotografía, portafolios de diseño o catálogos de productos.

  • Slider Generic > Un componente versátil que puede ser utilizado no solo para imágenes, sino también para cualquier tipo de contenido deslizable, como texto, tarjetas de información o galerías multimedia.

  • Slider > Carrusel de imágenes, popular en páginas de inicio, en presentaciones de productos o en portfolios.

  • Media > Este componente se enfoca en la integración y visualización de contenido multimedia, como imágenes, videos y audio, en la interfaz de usuario. Es perfecto para aplicaciones que requieren una manipulación intensiva de medios.

    • Media Input > Especializado en la carga y entrada de archivos multimedia. Facilita a los usuarios subir sus propios archivos de medios, siendo ideal para plataformas que permiten la personalización del contenido multimedia por parte del usuario.

📢 Comunicación

  • Counter > Contador interactivo, común en carritos de compra, configuraciones de cantidad o en interfaces donde se requiere ajuste numérico.
  • Modal > Componente para crear ventanas emergentes o diálogos. Utilizado para mostrar información adicional, recolectar datos del usuario o proporcionar alertas y confirmaciones en un contexto sobreimpuesto al contenido principal.
  • Notification > Este componente se utiliza para mostrar mensajes breves al usuario. Esencial para proporcionar retroalimentación instantánea o alertas sobre acciones o cambios en el estado de la aplicación.
  • Notification Pop > Una variante de notificación que aparece temporalmente en la pantalla, usualmente en una esquina, y se esconde automáticamente. Ideal para mensajes que no requieren una acción inmediata del usuario.
  • Print > Facilita la impresión de contenido específico desde la aplicación.
    • Print impresaframe > Permite imprimir contenido alojado en un iframe, como documentos o reportes generados dinámicamente dentro de la aplicación.
    • Print Page > Diseñado para imprimir toda la página o secciones específicas de ella, manteniendo el formato y estilo adecuados para la salida impresa.
  • Error Component > Muestra errores o problemas, esencial para una buena experiencia de usuario en la gestión de errores y en la presentación de feedbacks críticos.

⌨️ Entradas de texto

📅 Fechas

  • Schedule > Este componente es utilizado para organizar y mostrar eventos o actividades en un calendario. Facilita la planificación y visualización de agendas en aplicaciones o sitios web.
    • Schedule Day > Una variante del componente Schedule enfocada en la visualización diaria. Muestra eventos o tareas programadas para un día específico, ideal para agendas detalladas o itinerarios diarios.
    • Schedule Weekly > Se centra en la organización semanal. Presenta una vista de toda la semana, permitiendo a los usuarios ver y planificar actividades a lo largo de varios días. Útil para horarios semanales o planificaciones a mediano plazo.

🗒️ Orden

  • Table > El componente Table sirve para mostrar datos en un formato de filas y columnas, facilitando la organización y visualización de información compleja. Es ideal para dashboards, reportes financieros, y listas de datos, donde una representación clara y ordenada es fundamental.
  • Drop Down > Menú desplegable para seleccionar opciones, ampliamente utilizado en formularios, filtros de búsqueda o navegación compacta.
  • Chronological List > Lista para mostrar eventos o elementos en orden cronológico. Útil en timelines, historiales de transacciones o listados de eventos.
  • Collapse > Permite mostrar u ocultar contenido. Utilizado en FAQs, paneles de control con opciones avanzadas o para reducir la sobrecarga visual en interfaces complejas.
    • Simple > Este componente permite a los usuarios mostrar u ocultar contenido individual con un simple clic. Es ideal para interfaces donde se necesita compactar información, como en secciones de preguntas frecuentes o en paneles de control donde el espacio es limitado.
    • Multiple > Similar al Collapse Simple, pero diseñado para manejar múltiples secciones de contenido colapsables simultáneamente. Es útil en interfaces complejas donde varios conjuntos de información necesitan ser accesibles sin abrumar al usuario, como en menús extensos o en paneles de información detallada.

👑 Lujo

  • Lava Lamp > El componente Lava Lamp añade un efecto visual fluido y colorido a interfaces, ideal para realzar la estética y captar la atención del usuario.

Instalacion independiente

En caso de que solo quieras usar la parte de componentes de Fenextjs sin installar el resto de funcionalidades, puedes hacerlo de siguiente manera:

Npm
npm i fenextjs-component
Bun
bun i fenextjs-component
Pnpm
pnpm i fenextjs-component
IntroducciónBack