ValkoUI Components

Introduction

ValkoUI is a Vue 3 and Nuxt component library built with TailwindCSS. It empowers developers to create modern, responsive, and accessible web interfaces effortlessly.

Quick Start with Nuxt 3 or 4

1. Create a Nuxt Project

npm create nuxt@latest <project-name>

If you want to use Nuxt 3 instead of 4, add -- -t v3 at the end of the create command.

2. Install Required Dependencies

npm install tailwindcss @tailwindcss/postcss tailwind-variants tailwind-merge @headlessui/vue toastify-js

3. Install ValkoUI Library

npm install @valko-ui/components

This is the core ValkoUI library. Make sure to install it!

4. Configure Nuxt

Add the ValkoUI module and TailwindCSS plugin to your nuxt.config.ts file:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  modules: [
    '@valko-ui/components/nuxt'
  ],
  postcss: {
    plugins: {
      '@tailwindcss/postcss': {}
    }
  }
})

If you use Nuxt 4 or newer

Nuxt 4 relies a lot more on Vite compiler so we need to add aliases to tsconfig.json for the library to work correctly.

{
  // ...other configs...
  "compilerOptions": {
    // ...existing compiler options...
    "paths": {
    // ...existing compiler options...
      "#valkoui/*": [
        "./node_modules/@valko-ui/components/dist/*"
      ],
      "#valkoui": [
        "./node_modules/@valko-ui/components/dist"
      ]
    }
  }
}

5. Create ValkoUI CSS

Create a CSS file (e.g. valko-ui.css) in your project and add the following:

@import "@valko-ui/components/styles";
@source "../../node_modules/@valko-ui/components/dist";
@custom-variant dark (&:where(.dark, .dark *));

This will import ValkoUI styles, source, and enable dark mode support. (The source is your relative path to the ValkoUI components CSS file, which is usually located in node_modules/@valko-ui/components/dist.)

If you want to override any styles check out the theme documentation .

6. Import ValkoUI CSS in app.vue

Import your valko-ui.css file in your app.vue script section:

import '@/valko-ui.css'

7. You're ready to build!

Now that everything is set up, you can start using ValkoUI components in your project. Here's a small example to get you started:

<script setup lang="ts">
import { ref } from 'vue'
import '@/valko-ui.css'

const counter = ref(0)
</script>

<template>
  <div class="min-h-screen flex flex-col items-center justify-center bg-gray-50 p-6">
    <h1 class="text-3xl font-bold text-center mb-4">
      Welcome to
      <span class="text-primary">ValkoUI</span>
    </h1>

    <p class="text-gray-700 text-center mb-6">
      A modern component library to build sleek and responsive user interfaces effortlessly.
    </p>

    <div class="flex flex-col items-center gap-4 bg-white shadow-lg p-6 rounded-lg">
      <span class="text-xl font-semibold">
        Counter: <span class="text-primary">{{ counter }}</span>
      </span>
      <vk-button
        color="primary"
        size="md"
        @click="() => counter++"
      >
        Increment Counter
      </vk-button>
    </div>
  </div>
</template>

Want to see more? Check out our templates for ready-to-use UI examples!