Installation

Guide to install nidexingg-ui on your awesome web application.

Installation Guide

Install XingUI package

npm
bun
pnpm
yarn
npm install nidexingg-ui

Install TailwindCSS

XingUI is primarily built upon Nuxt utilizing TailwindCSS for styling. If you already installed it, you can just skip all of these below instruction and you're good to go nut with Components.

npm
bun
pnpm
npx nuxi@latest module add tailwindcss

or add @nuxtjs/tailwindcss using your dependency manager

npm
bun
pnpm
yarn
npm install --save-dev @nuxtjs/tailwindcss

and then to the modules section of nuxt.config.{ts,js}

nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss'
  ]
})

then, run this command to initialize tailwind.config.ts file.

terminal
npx tailwindcss init

or manually create tailwind.config.ts file by your own at the root directory then copy and paste this code to the file.

tailwind.config.ts
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

🥳 That's it

You can now enjoy the beautifully crafted components by XingUI. Let's hop in to Components.

Introduction
XingUI - Elegant and Beautiful UI Components.
Xing Alert
Beautiful and customizable alert card components.