Tema 4 de 8

Sistemas de Diseño Populares

Explora Material Design, Ant Design, Chakra UI, Radix, shadcn/ui y más

Sistemas de Diseño Líderes

Aprender de sistemas establecidos te ahorra años de prueba y error. Aquí están los más influyentes, sus filosofías y cuándo usar cada uno.

Material Design (Google)

El sistema de diseño más popular del mundo

m3.material.io →

Material Design 3 (M3) es la última evolución del lenguaje de diseño de Google. Usado en Android, Gmail, Google Drive y miles de aplicaciones. Enfatiza la profundidad, movimiento y paletas de colores dinámicas.

Componentes: 60+ (Botón, FAB, Chips, Sheets)

Plataformas: Web, Android, Flutter, Compose

Tematización: Generador de temas basado en Material Theme Builder

Cuándo usar: Aplicaciones Android, estética moderna/juguetona

npm install @mui/material @emotion/react @emotion/styled

import { Button, ThemeProvider, createTheme } from '@mui/material';

const theme = createTheme({
  palette: {
    primary: { main: '#1976d2' },
  },
});

Ant Design (Alibaba)

Sistema de diseño empresarial para aplicaciones B2B

ant.design →

La solución definitiva para paneles de administración, CRMs y herramientas internas. 50+ componentes con DataTable, DatePicker, Form y Upload incorporados.

Componentes: 50+ (Table, Form, Upload, Tree)

Uso: Dashboards empresariales, herramientas de administración

Tematización: Sistema de tokens menos/CSS personalizado

Tamaño del paquete: ~1MB (grande, pero rico en características)

npm install antd

import { Button, Table, Form } from 'antd';
import 'antd/dist/reset.css';



      
        
          Chakra UI
          Simple, modular y accesible
        
        
          chakra-ui.com →
        
      
      
        Chakra es adorado por su DX. Excelente accesibilidad, modo oscuro incorporado y estilo de props que se siente natural.
      
      
        Filosofía: Enfoque en accesibilidad primero
        Estilo: Estilo de utilidad basado en props
        Tematización: Extensión de tema profunda
        Cuándo usar: Aplicaciones de inicio rápido con excelente UX
      
      npm install @chakra-ui/react @emotion/react

import { ChakraProvider, Button, Box } from '@chakra-ui/react';


  
  Caja estilizada con props

    

      
        
          Radix UI
          Primitivas sin cabeza, sin estilo
        
        
          radix-ui.com →
        
      
      
        Radix proporciona comportamiento, accesibilidad y gestión de estado. Tú proporcionas los estilos. 
        Es la base de shadcn/ui y muchos sistemas personalizados.
      
      
        Componentes: 30+ primitivas (Dialog, Dropdown, Tabs)
        Estilo: Completamente sin estilo - trae tu propio CSS
        Accesibilidad: Cumplimiento WCAG completo incorporado
        Cuándo usar: Cuando quieres control total sobre los estilos
      
      npm install @radix-ui/react-dialog

import * as Dialog from '@radix-ui/react-dialog';


  Abrir
  
    
    
      {/* Tus estilos personalizados aquí */}
    
  

    

      
        
          shadcn/ui
          Componentes de copiar y pegar, no una biblioteca
        
        
          ui.shadcn.com →
        
      
      
        No es una biblioteca npm - copias componentes directamente a tu base de código. Construido sobre Radix UI + 
        Tailwind CSS. Propiedad completa, sin dependencias ocultas.
      
      
        Filosofía: Los componentes son tuyos para poseer y personalizar
        Stack tecnológico: Radix UI + Tailwind + CVA
        Tamaño del paquete: Solo lo que usas (tree-shakeable)
        Cuándo usar: Cuando quieres propiedad sin reinventar la rueda
      
      npx shadcn-ui@latest init
npx shadcn-ui@latest add button

// Copia Button.tsx a components/ui/
import { Button } from '@/components/ui/button';


// Personaliza, modifica, extiende - es tu código
    

    Otros Sistemas Notables
    
      
        daisyUI
        Plugin Tailwind CSS con componentes estilizados. 10KB+ estilos.
      
      
      
        Mantine
        100+ hooks y componentes. Gran DX, sistema de temas incorporado.
      
      
      
        NextUI
        Bello, rápido, moderno. Construido para Next.js con modo oscuro.
      
      
      
        Tremor
        Componentes de dashboard con gráficos y visualizaciones de datos.
      
      
      
        PrimeReact
        90+ componentes. Excelente para aplicaciones empresariales.
      
      
      
        Ariakit
        Componentes sin cabeza con accesibilidad incorporada.
      
    
  

    Tabla Comparativa
    
      

    

    

    

    
  

  

  

        
          
            Sistema
            Tamaño del Paquete
            Tematización
            Mejor Para
          
        
        
          Material UI ~300KB Excelente Android, estilo Google
          Ant Design ~1MB Bueno Paneles empresariales
          Chakra UI ~120KB Excelente Aplicaciones modernas, startups
          Radix UI ~10KB/comp N/A Sistemas personalizados
          shadcn/ui Solo lo que usas CSS/Tailwind Propiedad completa
          Mantine ~150KB Excelente Aplicaciones completas

Sistema	Tamaño del Paquete	Tematización	Mejor Para
Material UI	~300KB	Excelente	Android, estilo Google
Ant Design	~1MB	Bueno	Paneles empresariales
Chakra UI	~120KB	Excelente	Aplicaciones modernas, startups
Radix UI	~10KB/comp	N/A	Sistemas personalizados
shadcn/ui	Solo lo que usas	CSS/Tailwind	Propiedad completa
Mantine	~150KB	Excelente	Aplicaciones completas



  
    💡 Consejos para Elegir
    
      • Prototipos rápidos: Material UI, Chakra UI, Ant Design
      • Diseño personalizado: Radix UI, Headless UI, React Aria
      • Propiedad completa: shadcn/ui (copia → posee → personaliza)
      • Dashboards empresariales: Ant Design, Tremor
      • Enfoque en accesibilidad: Chakra UI, Radix UI, React Aria
      • Menor tamaño de paquete: Radix UI, shadcn/ui, Preact con Headless UI

Anterior
Bibliotecas de ComponentesSiguiente
Documentación & Storybook

Ver Todos los Temas de Sistemas de Diseño