Sebastian Gomez

Feb 21, 2022

Updated: Jun 24, 2026

Theme UI en Next.js

En este artículo aprenderás a utilizar Theme UI, una librería que te permite crear objetos con un tema de CSS (colores, variables, estilos, etc.) y usarlos en tus componentes de Next.js. Además, veremos cómo manejar el alcance de los estilos e inyectar el CSS en tu aplicación.

Nota importante antes de empezar (2026). Theme UI está hoy en modo mantenimiento: su última versión estable (v0.17.4) es de enero de 2025 y la librería es anterior a React 19 y Next.js 16. Sigue siendo un ejemplo excelente para entender el concepto de "tema como objeto" y la propiedad sx, pero si vas a empezar un proyecto nuevo en 2026 te recomiendo evaluar alternativas con mantenimiento activo: Tailwind CSS v4 (lo que usa este mismo sitio), CSS Modules, o librerías de CSS sin coste en tiempo de ejecución como Panda CSS o vanilla extract. Toma este post como una guía conceptual; las ideas se trasladan bien a esas herramientas.

Instalación

Primero, instalemos los paquetes necesarios y, por supuesto, Theme UI:

npm i theme-ui @theme-ui/presets
# o
yarn add theme-ui @theme-ui/presets

Creación del tema

Crea el tema en un archivo JavaScript en la carpeta raíz de tu aplicación de Next.js y llámalo theme.js. La idea es sencilla:

Escribe el tema como un objeto con los estilos que necesites.
Importa un preset (configuración predefinida) de Theme UI y mézclalo con tus estilos adicionales.

Ejemplo de theme.js:

import { roboto } from '@theme-ui/presets'

const theme = {
  ...roboto,
  containers: {
    // Estilos de los contenedores
  },
  styles: {
    ...roboto.styles,
  },
}

export default theme

Creación de componentes

Ahora creemos componentes para nuestra aplicación, como un componente de navegación.

Nota sobre el pragma JSX. El ejemplo original abría cada archivo con el pragma clásico /** @jsx jsx */ y un import { jsx } from 'theme-ui'. Ese es el runtime de JSX clásico, que está deprecado: React 17 en adelante (y React 19) usan el runtime automático. La guía actual de Theme UI es usar /** @jsxImportSource theme-ui */ en la primera línea del archivo, y ya no necesitas importar jsx manualmente. Eso es lo que usaremos en todos los ejemplos.

Ejemplo de nav.jsx:

/** @jsxImportSource theme-ui */
import Link from 'next/link'

const Nav = () => (
  <nav sx={{ display: 'flex', gap: 3, p: 3 }}>
    <Link href="/">Inicio</Link>
    <Link href="/notes">Notas</Link>
  </nav>
)

export default Nav

Fíjate en la propiedad sx: nos permite escribir CSS directamente en el componente (inline CSS) y acceder a los valores definidos en nuestro objeto de tema. Por ejemplo, p: 3 toma el tercer valor de la escala de espaciado del tema.

Aplicación en páginas (Pages Router)

Si tu proyecto usa el Pages Router, así se aplica Theme UI en tus páginas. Recuerda incluir el pragma /** @jsxImportSource theme-ui */ en cada archivo que use la propiedad sx.

// pages/index.jsx
/** @jsxImportSource theme-ui */
import Link from 'next/link'

export default function Home() {
  return (
    <main sx={{ p: 4 }}>
      <h1 sx={{ color: 'primary' }}>Página principal</h1>
      <Link href="/notes">Ir a las notas</Link>
    </main>
  )
}

// pages/notes/index.jsx
/** @jsxImportSource theme-ui */
import Link from 'next/link'

export default function Notes() {
  return (
    <section sx={{ p: 4 }}>
      <h2 sx={{ color: 'secondary' }}>Mis notas</h2>
      <Link href="/">Volver</Link>
    </section>
  )
}

Encapsulando la aplicación (Pages Router)

Para que el tema esté disponible en toda la aplicación, la envolvemos con el componente ThemeProvider de Theme UI. En el Pages Router esto va en el archivo pages/_app.jsx:

// pages/_app.jsx
import { ThemeProvider } from 'theme-ui'
import theme from '../theme'
import Nav from '../src/components/nav'

export default function App({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <div>
        <Nav />
        <Component {...pageProps} />
      </div>
    </ThemeProvider>
  )
}

Encapsulando la aplicación (App Router)

Next.js 16 usa por defecto el App Router (la carpeta app/). Como ThemeProvider mantiene estado y usa la React Context API, tiene que vivir en un límite de cliente, es decir, dentro de un componente marcado con 'use client'. El patrón recomendado es crear un componente provider y renderizarlo desde app/layout.jsx.

Primero, creamos el provider de cliente:

// app/providers.jsx
'use client'

import { ThemeProvider } from 'theme-ui'
import theme from '../theme'

export default function Providers({ children }) {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>
}

Después lo usamos desde el layout raíz, que sigue siendo un Server Component:

// app/layout.jsx
import Providers from './providers'
import Nav from '../src/components/nav'

export default function RootLayout({ children }) {
  return (
    <html lang="es">
      <body>
        <Providers>
          <Nav />
          {children}
        </Providers>
      </body>
    </html>
  )
}

Nota: el patrón correcto en el App Router es envolver ThemeProvider en un componente 'use client' renderizado desde app/layout.jsx, igual que con cualquier provider basado en Context en Next.js 16. Consulta la documentación de Theme UI para detalles de inyección de estilos en el servidor, ya que la librería se diseñó pensando en el Pages Router.

Conclusiones

Theme UI te permite crear temas de CSS y aplicarlos fácilmente a tus componentes en Next.js (ten en cuenta que la librería está en modo mantenimiento).
Puedes importar presets y añadir estilos personalizados a tu tema.
Utiliza la propiedad sx para aplicar estilos directamente a tus componentes y acceder a los valores de tu objeto de tema.
Recuerda usar el runtime automático de JSX (/** @jsxImportSource theme-ui */) y, en el App Router, envolver ThemeProvider en un componente 'use client'.

Theme UI es una herramienta útil y potente, con muchas funcionalidades y bastante profundidad. En este post solo cubrimos lo fundamental para usarlo en tus aplicaciones de Next.js; el concepto es el mismo para tus aplicaciones de React. Eso sí, recuerda la nota del inicio: si arrancas algo nuevo en 2026, evalúa también las alternativas vigentes.

Espero que este post te sea de utilidad y lo puedas aplicar a algún proyecto que tengas en mente, o que simplemente te haya ayudado a entender cómo funciona Theme UI y cómo aplicarlo exitosamente a tus proyectos de Next.js.

Si tienes alguna pregunta, opinión o deseas agregar algo, no dudes en dejar un comentario aquí abajo. Si te gustó este artículo, compártelo usando los enlaces a las redes sociales que se encuentran al final.

Ejercicios propuestos

Crea un proyecto de Next.js 16 desde cero e implementa Theme UI siguiendo los pasos de este artículo, usando el App Router y el pragma /** @jsxImportSource theme-ui */.
Explora diferentes presets de Theme UI y elige uno que se adapte a tus necesidades.
Crea tus propios estilos personalizados y aplícalos a diferentes componentes de tu aplicación.
Como ejercicio comparativo, reimplementa el mismo componente con Tailwind CSS v4 o CSS Modules y compara la experiencia de desarrollo.

Resumen en 3 puntos

Theme UI es una librería que simplifica la creación y aplicación de temas de CSS en tus proyectos de Next.js y React, aunque hoy está en modo mantenimiento (evalúa Tailwind v4, CSS Modules o Panda CSS para proyectos nuevos).
Los presets de Theme UI proporcionan estilos predefinidos que puedes importar y personalizar según tus necesidades.
Utiliza la propiedad sx y el componente ThemeProvider para aplicar los estilos de tu tema; recuerda el runtime automático de JSX y el límite 'use client' en el App Router.