Nevam UI UX Test

A Vue 3 component library built with Tailwind CSS v4 and Lucide icons.

Installation

npm install nevam-ui-ux-test

Getting Started

To use this library in your project, you need to import the CSS and configure your Tailwind CSS setup to scan the library's components.

1. Import CSS

In your main entry file (e.g., src/main.ts or src/main.js), import the library's styles:

import 'nevam-ui-ux-test/style.css'

2. Configure Tailwind CSS (v4)

If you are using Tailwind CSS v4 in your project, you must tell Tailwind to scan the library in your node_modules. This allows Tailwind to generate the necessary utility classes used by the components and any custom classes you apply to them.

Add the following to your main CSS file (e.g., src/style.css):

@import "tailwindcss";

/* 
 * CRITICAL: Tell Tailwind to scan this library. 
 * This ensures utility classes like 'bg-red-500' work 
 * when used with library components.
 */
@source "../node_modules/nevam-ui-ux-test/dist/**/*.js";

3. Usage

<script setup lang="ts">
import { BaseInput, BaseBadge } from 'nevam-ui-ux-test'
import { MailIcon } from 'lucide-vue-next'
import { ref } from 'vue'

const email = ref('')
</script>

<template>
  <div class="p-8 space-y-4">
    <BaseBadge label="New Feature" variant="secondary" />
    
    <BaseInput 
      v-model="email"
      label="Email"
      placeholder="[email protected]"
      :icon="MailIcon"
      required
    />
    
    <!-- Custom Tailwind classes will now work correctly! -->
    <div class="p-4 bg-blue-500 text-white rounded-lg">
      Custom styled container
    </div>
  </div>
</template>

Components

• BaseBadge: A versatile badge component with multiple variants and icon support.
• BaseInput: A feature-rich input component with labels, icons, error messages, and validation states.