🩺 Vue 3 UI Kit for Health-Care

Una librería moderna de componentes construida con Vue 3, TypeScript, Tailwind CSS v4 y Vite, diseñada específicamente para aplicaciones del sector health-care. Esta colección reutilizable de UI proporciona estilos accesibles, responsivos y coherentes, con una paleta de colores orientada a la confianza, claridad y profesionalismo.

🚀 Tecnologías

• ✅ Vue 3
• ✅ TypeScript
• ✅ Tailwind CSS v4
• ✅ Vite

🎨 Enfoque en salud

La paleta de colores está inspirada en sistemas clínicos: tonos de azul, verde, gris y rojo para estados críticos. Todo está diseñado para brindar claridad y confianza en entornos sensibles como hospitales, clínicas y apps médicas.

📦 Componentes disponibles

🧩 CardContainer.vue

Contenedor flexible con soporte para slots:

<CardContainer type="info">
  <template #header>
    <h2>Doctor John Doe</h2>
  </template>
  <template #cardBody>
    <p>Specialty: Cardiology</p>
  </template>
  <template #footer>
    <ButtonComponent type="default">View Profile</ButtonComponent>
  </template>
</CardContainer>

🔘 ButtonComponent.vue

Botón versátil con múltiples variantes (primary, secondary, accent, danger, etc.) y soporte para loading:

<ButtonComponent type="primary" :isLoading="false">
  Save
</ButtonComponent>

También puedes mostrar un spinner automáticamente:

<ButtonComponent type="danger" :isLoading="true" />

🔍 SearchInput.vue

Componente de input diseñado para búsquedas rápidas, enlazado por v-model:

<SearchInput
  placeholder="Search patient..."
  v-model="searchQuery"
  @update="onSearch"
/>

📊 TableComponent.vue

Tabla responsive basada en Tailwind sin paginación, útil para mostrar registros clínicos:

<TableComponent
  :headers="[
    { title: 'ID', key: 'id' },
    { title: 'Name', key: 'name' },
    { title: 'Age', key: 'age' },
    { title: 'Address', key: 'address' }
  ]"
  :items="filteredPatients"
/>