HyperUI: Una colección de componentes Tailwind CSS para tu próximo proyecto
HyperUI es una colección gratuita y de código abierto de componentes construidos con Tailwind CSS, diseñada para facilitar la creación de interfaces de usuario atractivas y funcionales. Con una amplia gama de componentes, HyperUI permite a desarrolladores y diseñadores construir rápidamente sitios web de marketing, paneles de administración, tiendas de comercio electrónico y mucho más.
Instalación y Uso
Una de las ventajas destacadas de HyperUI es que no requiere instalación ni configuración previa. Si ya tienes un proyecto que utiliza Tailwind CSS, simplemente puedes copiar el código del componente deseado y pegarlo en tu proyecto. Algunos componentes pueden utilizar Alpine.js para funcionalidades interactivas.
Pasos para utilizar HyperUI:
- Navegar por los componentes: Explora la variedad de componentes disponibles en el sitio web de HyperUI.
- Previsualizar el componente: Antes de copiar el código, puedes previsualizar el componente en diferentes puntos de interrupción.
- Copiar el código: Haz clic en el botón 'Copiar' para obtener el código fuente del componente seleccionado.
- Pegar en tu proyecto: Pega el código copiado en tu proyecto Tailwind CSS y personalízalo según tus necesidades.
Este enfoque simplifica el proceso de desarrollo, permitiéndote construir interfaces de usuario de manera eficiente sin preocuparte por configuraciones complejas.
Componentes Destacados
HyperUI ofrece una amplia gama de componentes categorizados en dos secciones principales: Application UI y Marketing. A continuación, se presentan algunos de los componentes más relevantes:
1. Alertas
Las alertas son útiles para mostrar mensajes de información, éxito, advertencia o error a los usuarios. HyperUI proporciona componentes de alertas estilizados y listos para usar.
Ejemplo:
<div role="alert" class="rounded-xl border border-gray-100 bg-white p-4">
<div class="flex items-start gap-4">
<span class="text-green-600">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</span>
<div class="flex-1">
<strong class="block font-medium text-gray-900"> Changes saved </strong>
<p class="mt-1 text-sm text-gray-700">Your product changes have been saved.</p>
</div>
<button class="text-gray-500 transition hover:text-gray-600">
<span class="sr-only">Dismiss popup</span>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
2. Imagen, título y contenido alineados arriba
Este componente es ideal para mostrar contenido visual junto con un título y una descripción alineados en la parte superior.
<div class="flex items-start gap-4">
<img
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt=""
class="size-20 rounded-lg object-cover"
/>
<div>
<h3 class="text-lg/tight font-medium text-gray-900">Title goes here</h3>
<p class="mt-0.5 text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio
nesciunt quas non animi.
</p>
</div>
</div>
3. Paginación
La paginación mejora la navegación en aplicaciones con grandes volúmenes de contenido. HyperUI proporciona componentes de paginación fáciles de implementar.
Ejemplo:
<!--
Heads up! 👋
This component comes with some `rtl` classes. Please remove them if they are not needed in your project.
-->
<ol class="flex justify-center gap-1 text-xs font-medium">
<li>
<a
href="#"
class="inline-flex size-8 items-center justify-center rounded-sm border border-gray-100 bg-white text-gray-900 rtl:rotate-180"
>
<span class="sr-only">Prev Page</span>
<svg
xmlns="http://www.w3.org/2000/svg"
class="size-3"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
clip-rule="evenodd"
/>
</svg>
</a>
</li>
<li>
<a
href="#"
class="block size-8 rounded-sm border border-gray-100 bg-white text-center leading-8 text-gray-900"
>
1
</a>
</li>
<li class="block size-8 rounded-sm border-blue-600 bg-blue-600 text-center leading-8 text-white">
2
</li>
<li>
<a
href="#"
class="block size-8 rounded-sm border border-gray-100 bg-white text-center leading-8 text-gray-900"
>
3
</a>
</li>
<li>
<a
href="#"
class="block size-8 rounded-sm border border-gray-100 bg-white text-center leading-8 text-gray-900"
>
4
</a>
</li>
<li>
<a
href="#"
class="inline-flex size-8 items-center justify-center rounded-sm border border-gray-100 bg-white text-gray-900 rtl:rotate-180"
>
<span class="sr-only">Next Page</span>
<svg
xmlns="http://www.w3.org/2000/svg"
class="size-3"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
/>
</svg>
</a>
</li>
</ol>
Conclusión
HyperUI es una excelente opción para los desarrolladores que buscan acelerar el proceso de creación de interfaces modernas con Tailwind CSS. Su enfoque basado en componentes preconstruidos y fáciles de personalizar permite una integración rápida y eficiente en cualquier proyecto. Además, su compatibilidad con Alpine.js proporciona opciones interactivas sin necesidad de frameworks más pesados.
Si buscas una forma sencilla y efectiva de mejorar la apariencia y funcionalidad de tu sitio web, HyperUI es definitivamente una herramienta que vale la pena explorar. Con su amplia gama de componentes, es una solución ideal tanto para proyectos pequeños como para aplicaciones más complejas. ¡Anímate a probar HyperUI en tu próximo desarrollo y aprovecha todo lo que tiene para ofrecer!
