Nexora UI (Vue)

A lightweight, utility-first Vue 3 component library designed to work out‑of‑the‑box with nexora-css.

Built to offer reusable, accessible UI components styled entirely with your custom utility framework.

🚀 Installation

npm install nexora-css nexora-ui-vue

⚠️ Prerequisites

Ensure you've installed and imported nexora-css. Either via:

@import "nexora-css/dist/nexora.min.css";

Or register all components globally:

import { createApp } from "vue";
import NexoraUI from "nexora-ui-vue";
import "nexora-css/dist/nexora.css";

const app = createApp(App);
app.use(NexoraUI);
app.mount("#app");

✅ Usage

Import components individually for optimized bundle size:

<script setup>
import { Button, Input } from "nexora-ui-vue";
</script>

<template>
  <Button variant="primary" size="lg">Click Me</Button>
  <Input placeholder="Type here…" />
</template>

📦 Available Components

| Component | Props | Description | | --------- | ----------------------------------------- | ------------------------------------------------- | | Button | variant, size, disabled | Solid & outline buttons with hover/focus states | | Input | type, size, disabled, model-value | Text, textarea, checkbox, radio with form support | | Card | padding, border, shadow, slots | Flexible card container | | Alert | variant, closable, onClose | Contextual alert with close button | | Badge | variant, size | Inline label for statuses |

🎨 Styling & Variants

All components leverage utility classes from nexora-css, such as:

Buttons:

<button
  class="bg-primary-500 hover:bg-primary-600 text-white rounded-md px-4 py-2"
>
  Submit
</button>

• Inputs:

  <input
    class="border-gray-300 focus:border-primary-500 bg-white rounded px-3 py-2 w-full"
  />

Component props automatically apply the right utility combos internally.

💡 Author

Lucky Kumar Kashyap Senior Full-Stack Engineer | LinkedIn