Repolode
Enviar
ui-layouts

ui-layouts/uilayouts

Biblioteca de componentes de React y Tailwind CSS con componentes, efectos y bloques de interfaz animados basados en Framer Motion, distribuida con una configuración al estilo de shadcn.

Ver en GitHubSitio web
Estrellas
3,808
Forks
228
Issues abiertos
10
Último commit
hace 2 meses

¿Qué es?

UI Layouts es una biblioteca de componentes de código abierto para crear sitios web con interfaces creativas y animadas. Sus componentes incluyen efectos como destellos, focos, rastros del mouse y ondulaciones en imágenes, además de controles habituales como acordeones, paneles deslizables, modales, carruseles, sliders, carga de archivos y campos de contraseña.

La mayoría de los componentes están escritos en TypeScript para React y usan Tailwind CSS para los estilos; muchos recurren a Framer Motion para las animaciones. Para configurar el proyecto, hay que instalar Tailwind, el paquete motion y clsx junto con tailwind-merge, y añadir un pequeño helper `cn` y un hook para consultas de medios. El proyecto también incluye una sección Labs para componentes experimentales.

La biblioteca está dirigida a desarrolladores y diseñadores que quieren incorporar elementos de interfaz pulidos y con muchas animaciones sin tener que crear los efectos desde cero.

Funciones clave

  • 01Componentes con efectos animados, como destellos, focos, rastros del mouse y ondulaciones en imágenes.
  • 02Controles de interfaz habituales, como acordeones, paneles deslizables, modales, carruseles, sliders de rango y carga de archivos.
  • 03Desarrollado para React con TypeScript y con estilos basados en Tailwind CSS.
  • 04Las animaciones están implementadas con Framer Motion (paquete motion).
  • 05Bloques listos para usar y una sección Labs con componentes experimentales.

Casos de uso

  • Añadir secciones hero animadas o efectos visuales a una landing page de marketing.
  • Crear controles interactivos, como carga de archivos, sliders o campos de etiquetas, en una aplicación React.
  • Prototipar sitios de portafolio creativos con componentes repletos de animaciones.

Temas

#react#tailwindcss#component-library#framer-motion#animation#typescript#ui-components#accertinity#accordion-component#animated-tabs

Preguntas frecuentes

¿Qué es uilayouts?
Biblioteca de componentes de React y Tailwind CSS con componentes, efectos y bloques de interfaz animados basados en Framer Motion, distribuida con una configuración al estilo de shadcn. UI Layouts es una biblioteca de componentes de código abierto para crear sitios web con interfaces creativas y animadas. Sus componentes incluyen efectos como destellos, focos, rastros del mouse y ondulaciones en imágenes, además de controles habituales como acordeones, paneles deslizables, modales, carruseles, sliders, carga de archivos y campos de contraseña.
¿uilayouts es gratuito? ¿Qué licencia tiene?
uilayouts es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿uilayouts sigue mantenido?
Actualizado en los últimos 6 meses. El último commit de uilayouts fue el 23 ago 2026.
¿Para qué puedo usar uilayouts?
Añadir secciones hero animadas o efectos visuales a una landing page de marketing. Crear controles interactivos, como carga de archivos, sliders o campos de etiquetas, en una aplicación React. Prototipar sitios de portafolio creativos con componentes repletos de animaciones.
¿Dónde consigo uilayouts?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/ui-layouts/uilayouts

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados