🎨 Una biblioteca moderna de componentes Vue 3 reutilizables y accesibles.

🚀 Instalación

npm install @ivokonstantinow/vue-ui-library

📖 Uso Rápido

<script setup>
import { Button, Navbar, Hero } from '@ivokonstantinow/vue-ui-library'
import '@ivokonstantinow/vue-ui-library/dist/vue-ui-library.css'
</script>

<template>
  <Navbar logo-text="Mi App" :links="navLinks" />
  
  <Hero
    title="Bienvenido"
    subtitle="Construye interfaces increíbles"
  >
    <template #actions>
      <Button variant="primary" size="large">
        Comenzar
      </Button>
    </template>
  </Hero>
</template>

🎨 Componentes

Button

Botón reutilizable con múltiples variantes perfecto para CTAs.

Props:

• variant: 'primary' | 'secondary' | 'danger' (default: 'primary')
• size: 'small' | 'medium' | 'large' (default: 'medium')
• disabled: boolean (default: false)

Ejemplo:

<Button variant="primary" size="large" @click="handleClick">
  Call to Action →
</Button>

Navbar

Barra de navegación responsive con logo a la izquierda y links al centro.

Props:

• logoText: Texto del logo (String)
• logoSrc: URL de imagen del logo (String)
• logoAlt: Alt text para la imagen (String)
• logoLink: URL del link del logo (String, default: '/')
• links: Array de links con formato [{ label, href, active }]
• variant: 'default' | 'transparent' | 'dark' (default: 'default')
• sticky: Navbar fijo al hacer scroll (Boolean)
• hideMenuToggle: Ocultar botón de menú móvil (Boolean)

Slots:

• logo: Slot personalizado para el logo
• nav: Slot personalizado para la navegación
• actions: Slot para acciones/botones a la derecha
• mobile-actions: Slot para acciones en menú móvil

Eventos:

• link-click: Emitido al hacer click en un link { link, event }

Ejemplo:

<Navbar
  logo-text="Brand"
  :links="[
    { label: 'Inicio', href: '/', active: true },
    { label: 'Productos', href: '/productos' },
    { label: 'Contacto', href: '/contacto' }
  ]"
  variant="default"
  sticky
  @link-click="handleNavClick"
>
  <template #actions>
    <Button size="small" variant="secondary">Login</Button>
    <Button size="small" variant="primary">Registrarse</Button>
  </template>
</Navbar>

Hero

Sección hero full-screen con múltiples variantes y slots flexibles.

Props:

• title: Título principal (String)
• subtitle: Subtítulo descriptivo (String)
• pretitle: Texto pequeño sobre el título (String)
• variant: 'default' | 'gradient' | 'dark' | 'image' (default: 'default')
• align: 'left' | 'center' | 'right' (default: 'center')
• fullHeight: Hero a pantalla completa (Boolean, default: true)
• minHeight: Altura mínima (String, default: '100vh')
• backgroundImage: URL de imagen de fondo (String)
• backgroundGradient: CSS gradient personalizado (String)
• backgroundColor: Color de fondo (String)
• overlay: Agregar overlay oscuro sobre la imagen (Boolean)
• overlayOpacity: Opacidad del overlay 0-1 (Number, default: 0.5)
• showScrollIndicator: Mostrar indicador de scroll (Boolean)

Slots:

• pretitle: Slot personalizado para pretitle
• title: Slot personalizado para título
• subtitle: Slot personalizado para subtítulo
• actions: Slot para botones CTA
• media: Slot para imagen/video a la derecha

Ejemplo básico:

<Hero
  variant="gradient"
  title="Construye el Futuro"
  subtitle="Componentes modernos para aplicaciones Vue 3"
  align="center"
>
  <template #actions>
    <Button variant="secondary" size="large">Comenzar Gratis</Button>
    <Button variant="primary" size="large">Ver Demo</Button>
  </template>
</Hero>

Ejemplo con imagen de fondo:

<Hero
  variant="image"
  title="Bienvenido"
  subtitle="Tu éxito comienza aquí"
  background-image="https://example.com/hero-bg.jpg"
  overlay
  :overlay-opacity="0.6"
  show-scroll-indicator
>
  <template #actions>
    <Button variant="primary" size="large">Explorar →</Button>
  </template>
</Hero>

🎨 Personalización con Design Tokens

Sobrescribí los design tokens CSS para personalizar el look:

:root {
  /* Colores */
  --color-primary: #8b5cf6;
  --color-primary-hover: #7c3aed;
  
  /* Tipografía */
  --font-size-xl: 1.5rem;
  --font-weight-bold: 700;
  
  /* Espaciado */
  --spacing-lg: 2rem;
  
  /* Border radius */
  --radius-md: 12px;
}

📦 Tamaño del Bundle

Gracias al tree-shaking, solo pagas por lo que usas:

• Button solo: ~2KB (gzipped)
• Navbar solo: ~3KB (gzipped)
• Hero solo: ~3KB (gzipped)
• Todo junto: ~9KB (gzipped)

📝 Licencia

MIT © Ivo Konstantinow

🔗 Links

• npm package
• GitHub