Mantine

Qué es

Mantine es una librería de componentes para React, escrita en TypeScript y mantenida por Vitaly Rtishchev y su comunidad de colaboradores. Ofrece más de 120 componentes de interfaz y más de 70 hooks listos para usar, todo bajo licencia MIT. Su estilado se basa en CSS nativo (sin coste en tiempo de ejecución) e incluye soporte para modo oscuro y temas personalizables desde el primer momento.

Para qué sirve

• Montar interfaces React completas con inputs, modales, menús, selectores de fecha, tablas y navegación sin reinventarlos.
• Crear selects, multiselects, autocompletados y campos de etiquetas a medida con el sistema Combobox componible.
• Gestionar formularios con validación y objetos anidados mediante @mantine/form, sin dependencias externas.
• Reutilizar lógica de UI con hooks como useDisclosure, useDebouncedValue, useHotkeys, useMediaQuery o useClipboard.
• Añadir funcionalidades específicas con paquetes complementarios: notificaciones, gráficas (@mantine/charts), editor de texto enriquecido o paleta de comandos (@mantine/spotlight).

Cuándo usarlo

Es una buena opción cuando necesitas un sistema de componentes amplio y coherente para una aplicación React y valoras la accesibilidad, el tipado fuerte y el soporte de temas de serie. Frente a alternativas como Material UI (más opinada en diseño) o shadcn/ui (componentes que copias a tu repo), Mantine ofrece un equilibrio entre cobertura amplia y personalización. Si solo necesitas unos pocos componentes muy concretos o un control total del marcado, quizá te baste con primitivas sin estilo como Radix UI.

Ejemplo

Instalación de los paquetes principales y uso básico envolviendo la app con MantineProvider:

npm install @mantine/core @mantine/hooks

import '@mantine/core/styles.css';
import { MantineProvider, Button, Group } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

function App() {
  const [opened, { toggle }] = useDisclosure(false);

  return (
    <MantineProvider>
      <Group>
        <Button onClick={toggle}>{opened ? 'Ocultar' : 'Mostrar'}</Button>
        {opened && <span>Contenido visible</span>}
      </Group>
    </MantineProvider>
  );
}

Puntos clave

• Más de 120 componentes y más de 70 hooks en un ecosistema de más de 13 paquetes.
• Escrita en TypeScript con tipado completo de props y temas.
• Estilado con CSS nativo y preset de PostCSS, sin sobrecarga en tiempo de ejecución.
• Modo oscuro y temas personalizables con muy poca configuración.
• Componentes accesibles y un sistema Combobox para construir selectores a medida.

Ten en cuenta

• Requiere importar la hoja de estilos (@mantine/core/styles.css) y envolver la aplicación con MantineProvider; olvidarlo es un error de configuración habitual.
• Cada versión mayor (la actual es la 9) puede incluir cambios de ruptura; conviene revisar la guía de migración al actualizar.
• Su estética por defecto es marcada: si necesitas un sistema de diseño totalmente propio sin partir de estilos predefinidos, primitivas sin estilo como Radix UI o Headless UI pueden encajar mejor.