Meraki UI
Para copiar y pegar componentes de UI listos hechos con Tailwind CSS en tus proyectos web.
Colección gratuita de componentes de interfaz hechos con Tailwind CSS, con soporte RTL y modo oscuro.
Notas y contexto
Qué es
Meraki UI es una colección gratuita de componentes de interfaz construidos con Tailwind CSS. Cada componente es responsive (basado en Flexbox y CSS Grid), incluye modo oscuro y da soporte a idiomas RTL como el árabe o el hebreo. La interactividad de algunos componentes se resuelve con AlpineJS, y el catálogo ofrece variantes para AlpineJS, Vue 3 y Laravel Blade. El proyecto es open source bajo licencia MIT y, además de los componentes gratuitos, vende plantillas premium completas.
Para qué sirve
- Copiar y pegar bloques de UI (navegación, formularios, tarjetas, precios, testimonios, CTA) sin escribirlos desde cero.
- Acelerar el maquetado de landings y paneles manteniendo una estética coherente.
- Construir interfaces con soporte RTL y modo oscuro sin tener que resolver esos detalles a mano.
- Partir de plantillas completas de pago cuando se necesita una base más amplia.
Cuándo usarlo
Encaja cuando ya trabajas con Tailwind CSS y prefieres tomar markup listo en lugar de instalar una librería de componentes con su propio runtime. Es buena opción para prototipos rápidos y proyectos pequeños o medianos. Si necesitas componentes accesibles y con lógica encapsulada, alternativas como shadcn/ui (React), Flowbite o daisyUI pueden encajar mejor según tu stack.
Ejemplo
El flujo de uso es por copia directa:
- Entra en merakiui.com y abre la categoría de componentes (por ejemplo, botones o formularios).
- Elige una variante y copia su código HTML con clases de Tailwind.
- Pégalo en tu plantilla. Un botón típico tiene este aspecto:
<button
class="px-6 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300"
>
Aceptar
</button>- Asegúrate de tener Tailwind CSS configurado en el proyecto; para componentes con interactividad, incluye también AlpineJS.
Puntos clave
- Soporte RTL nativo en los componentes, pensado para idiomas como árabe y hebreo.
- Modo oscuro y diseño totalmente responsive con Flexbox y CSS Grid.
- Variantes de código para AlpineJS, Vue 3 y Laravel Blade.
- Componentes gratuitos bajo licencia MIT, además de plantillas premium de pago.
Ten en cuenta
Requiere tener Tailwind CSS ya configurado en el proyecto y, para los componentes interactivos, depender de AlpineJS. No es un paquete instalable: trabajas copiando markup, lo que da flexibilidad pero deja en tu mano el mantenimiento y la accesibilidad. Las plantillas completas son de pago (desde unos 49 dólares).