# Leímos 150 repos de shadcn/ui. Lo uniforme no es violeta.

Análisis, primera entrega. Los proyectos de shadcn/ui más populares usan dos tipografías y un color principal gris. El degradado violeta viene de otro sitio.

https://laithjunaidy.com/es/writing/taken-apart-shadcn-defaults
Por Laith Aljunaidy. Publicado: 2026-09-25.

---

![Gráficos de los 150 repositorios shadcn/ui con más estrellas: el 88 por ciento usa Geist o Inter y el 75 por ciento un color principal neutro](https://laithjunaidy.com/writing/taken-apart-1/chart.png)

Quien construye con IA reconoce el aspecto: una tipografía, un degradado violeta y las mismas tarjetas suaves. Se suele culpar a shadcn/ui porque está detrás de muchas de esas aplicaciones. Así que dejé de suponer y leí el código.

## Qué medí

Tomé los 150 repositorios de GitHub con más estrellas y la etiqueta `shadcn-ui`, a 25 de septiembre de 2026. En cada uno leí los archivos que deciden el aspecto de la aplicación: la distribución raíz, la configuración de Tailwind y la hoja de estilos global. Registré dos cosas.

- **La tipografía**, a partir de las importaciones de `next/font`, los enlaces de Google Fonts y las declaraciones de `font-family`.
- **El color principal**, a partir del primer valor de color principal de la hoja de estilos, clasificado por tono en neutro, azul, violeta y otros.

Cuando no se podía leer una señal, se registraba como ilegible. No se adivinaba. Quedaron 67 repositorios con tipografía legible y 87 con color principal legible.

## Una de dos tipografías

59 de los 67 repositorios con tipografía legible usan **Geist o Inter**. Es el 88 por ciento. Geist aparece en 34, Inter en 28 y algunos cargan ambas. Solo 8 eligieron otra, entre DM Sans, Manrope, Sora, Montserrat y unas pocas más.

Esa es la uniformidad real. No es una mala elección, Geist e Inter son excelentes tipografías de pantalla, pero significa que lo primero que ve el lector es lo mismo en casi todos estos productos.

## Un color principal gris

65 de los 87 colores principales legibles son **neutros**: casi negros o grises, tomados directamente de las paletas base de shadcn. Es el 75 por ciento. El azul aparece en 11, un 13 por ciento. El violeta en 5, un 6 por ciento.

El violeta no viene de shadcn/ui. Por defecto, ofrece gris. Si un producto es violeta, alguien lo ha elegido, o algo lo ha elegido por ese equipo.

## Qué significa al diseñar con IA

La biblioteca de componentes no es el problema de marca. Ofrece estructura y una superficie neutra a propósito. La uniformidad entra por dos puntos: la tipografía que nadie cambió y el color de acento que una herramienta rellenó porque nadie indicó cuál usar.

Cada uno requiere una decisión. Se elige una tipografía que exprese la voz de la marca, se fija un color principal propio y se entregan ambos al modelo antes de que dibuje. Esa es toda la solución y la razón por la que el sistema de diseño debe ir primero.

## Método y datos

El escáner, las reglas y los resultados brutos son públicos: [scan_shadcn.py](https://laithjunaidy.com/writing/taken-apart-1/scan_shadcn.py) y [results.json](https://laithjunaidy.com/writing/taken-apart-1/results.json). Los grupos de tono usan HSL (violeta de 240 a 300 grados) y OKLCH (violeta de 265 a 320 grados). Cualquier saturación inferior al 12 por ciento o croma inferior a 0.05 se considera neutra, donde se sitúan las bases slate y zinc de shadcn. La muestra incluye los 150 repositorios con más estrellas y esa etiqueta, tanto bibliotecas como aplicaciones; la mediana tiene unas 1,700 estrellas.

Esta es la primera entrega de **Análisis**: una pregunta de diseño, medida a mano y con el método a la vista. Para proponer una pregunta que medir, [basta con contármela](https://laithjunaidy.com/contact).
