¡La estética de macOS llega a la web! Presentando las nuevas variantes de layout en tucu-ui

Hoy es un día muy especial para mí. Si me sigues desde hace un tiempo, sabes cuánto me apasiona el diseño de interfaces y la experiencia de usuario. Por eso, he estado trabajando duro en mi librería de componentes, tucu-ui, y hoy por fin puedo mostrarles algo en lo que he puesto muchísimo cariño: ¡las nuevas variantes de layout inspiradas en macOS! 🍏✨

Si quieres verlas en acción de inmediato, te invito a chusmear el enlace aquí: tucu-ui macOS Layouts.

¿Por qué macOS? 🤔

El ecosistema de Apple siempre se ha destacado por su diseño limpio, el uso inteligente del espacio y una navegación sumamente intuitiva. Quería traer esa misma sensación de fluidez y profesionalismo a la web, permitiendo que cualquier desarrollador pueda replicar esta estética en sus aplicaciones de forma rápida y sin dolores de cabeza.

Con estos nuevos layouts, tu aplicación web puede transformarse en una "app de escritorio" moderna en cuestión de minutos. ¡Ideal para SaaS, dashboards o portafolios personales!

¿Qué vas a encontrar en esta actualización? 🚀

He diseñado diferentes variantes para adaptarme a lo que tu proyecto necesite, cuidando cada detalle visual:

• Sidebar clásico de macOS: Un menú lateral elegante con soporte para navegación, ideal para paneles de administración o herramientas complejas.
• Ventanas con controles nativos: Los icónicos botones rojo, amarillo y verde (el semáforo de macOS) integrados de forma interactiva para dar ese toque de "ventana de app" real.
• Estética premium: Sombras suaves (box-shadows), bordes redondeados perfectos y transiciones sutiles que elevan el diseño de inmediato.

Un vistazo rápido a cómo se usa 💻

Integrarlo en tu proyecto es súper sencillo y minimalista. Aquí tienes un ejemplo de cómo se ve la estructura básica:

import { ThemeProvider, LAYOUT_OPTIONS, LucideIcons } from '@e-burgos/tucu-ui';
import { Dashboard } from './pages/Dashboard';
import { Projects } from './pages/Projects';
import { Analytics } from './pages/Analytics';

const menuItems = [
  {
    name: 'Dashboard',
    path: '/',
    icon: <LucideIcons.LayoutDashboard />,
    component: <Dashboard />,
  },
  {
    name: 'Projects',
    path: '/projects',
    icon: <LucideIcons.FolderKanban />,
    component: <Projects />,
  },
  {
    name: 'Analytics',
    path: '/analytics',
    icon: <LucideIcons.BarChart3 />,
    component: <Analytics />,
  },
];

function App() {
  return (
    <ThemeProvider
      menuItems={menuItems}
      layout={LAYOUT_OPTIONS.MACOS_TAHOE}
      themeStyle="macos-tahoe" // Activates Tahoe theme + Liquid Glass
      logo={{ path: '/', name: 'Studio' }}
      rightButton={<NotificationBell />}
    />
  );
}

// Features:
// - Liquid Glass sidebar with backdrop-blur and vibrancy
// - Refined toolbar with centered page title
// - Dynamic mesh background (radial variant by default)
// - 9 Tahoe Accent Bundles (Glass, Blue, Purple, Pink, etc.)
// - Content area with rounded corners and glass surface
// - Toast notifications with Tahoe styling

¡Me encantaría saber tu opinión! 💬

Este proyecto lo construyo a pulmón y pensando siempre en la comunidad de desarrolladores. Si estás buscando un look fresco, minimalista y profesional para tu próximo proyecto, te invito a probar tucu-ui.

• 👉 Explora la documentación y juega con los demos: tucu-ui.netlify.app/macos
• ⭐️ Si te gusta el proyecto, ¡un feedback, un repost o una estrella en el repositorio me ayudan un montón a seguir mejorándolo!

¿Qué te parece este estilo para aplicaciones web? ¿Sos de los que prefieren layouts tradicionales o te gusta experimentar con estéticas de sistemas operativos? ¡Te leo en los comentarios! 👇

#React #Frontend #UIUX #WebDesign #OpenSource #TailwindCSS