landingskit

LandingsKIT 🚀

Librería de componentes UI y CSS Neón Sci-Fi para Vue 3 y Tailwind CSS, diseñada para construir interfaces futuristas, paneles de inteligencia artificial, consolas cibernéticas y dashboards glassmórficos con resplandor neón adaptativo.

📦 Instalación

npm install landingskit
# o con pnpm
pnpm add landingskit
# o con yarn
yarn add landingskit

⚡ Inicio Rápido

1. Importar estilos CSS

En tu punto de entrada (main.ts o App.vue):

import 'landingskit/style.css';

2. Registrar como Plugin de Vue (Global)

import { createApp } from 'vue';
import { LandingsKit } from 'landingskit';
import 'landingskit/style.css';
import App from './App.vue';

const app = createApp(App);
app.use(LandingsKit);
app.mount('#app');

3. O importar componentes individuales (Tree-shaking)

<script setup lang="ts">
import {
  LNeonCard,
  LVoiceOrb,
  LAudioWave,
  LActionTile,
  LRadialGauge,
  LSparkline,
  LChatCard,
  LAvatarPortal,
  LStatusItem,
  LBottomNav
} from 'landingskit';
import { ref } from 'vue';

const isListening = ref(true);
</script>

<template>
  <div class="min-h-screen bg-[#050711] p-8 text-white">
    <LNeonCard color="cyan" interactive>
      <template #header>
        <h3 class="text-xs font-mono font-bold uppercase tracking-wider text-cyan-400">Quantum Node</h3>
      </template>

      <div class="flex items-center gap-6 py-4">
        <LVoiceOrb :active="isListening" color="cyan" show-wings @click="isListening = !isListening" />
        <LAudioWave :bars="7" color="cyan" animated />
      </div>

      <template #footer>
        <span class="text-xs text-slate-400 font-mono">Status: 99.8% Synchronized</span>
      </template>
    </LNeonCard>
  </div>
</template>

🎨 Paleta de Colores Neón

Todos los componentes neón aceptan la prop color:

🛠️ Catálogo de Componentes Neón Sci-Fi

💻 Uso de Clases CSS Puras (Sin Vue)

Si deseas utilizar únicamente las clases CSS en cualquier proyecto HTML o con otros frameworks:

<!-- Tarjeta Neón -->
<div class="neon-card neon-card--cyan">
  <h3>Panel Neón Puro</h3>
</div>

<!-- Orbe de Voz -->
<div class="neon-voice-orb">
  <div class="neon-voice-orb__halo"></div>
  <div class="neon-voice-orb__ring"></div>
  <div class="neon-voice-orb__core">🎙️</div>
</div>

<!-- Barra Ecualizadora -->
<div class="neon-audio-wave">
  <span class="neon-audio-wave__bar" style="animation-delay: 0.1s"></span>
  <span class="neon-audio-wave__bar" style="animation-delay: 0.4s"></span>
  <span class="neon-audio-wave__bar" style="animation-delay: 0.2s"></span>
</div>

📄 Licencia

MIT © Carlos