DocsGuideInstallation

Installation

How to install dependencies and structure your app.

HTML

Create a boilerplate

Start by creating a basic HTML template.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>LuxeyUI Project</title>
    </head>
    <body></body>
</html>

Add the CDNs

Add the necessary CDNs in your project. I'd recommend to use TailwindCSS to make your life a lot easier.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luxeyui@0.6.4/dist/all.min.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/luxeyui@0.6.4/dist/all.min.js" defer></script>

Configure TailwindCSS

Create a tailwind.config.js file and copy & paste this code in that file.

tailwind.config = {
    darkMode: "class",
    // ...
}

Now, you must link this script in your index.html file.

<script src="./tailwind.config.js"></script>

That's it

Now you can start your designing using components with full functionality.

<button class="button primary">Button</button>

Vite

Create a VITE project

Start by creating a new project using Vite.

npm create vite@latest luxeyui-project
cd luxeyui-project

Install TailwindCSS and LuxeyUI

Install tailwindcss and its peer dependencies, then generate your tailwind.config.js and postcss.config.js file and configure them as needed along with the library itself:

npm i -D tailwindcss postcss autoprefixer luxeyui@latest
npx tailwindcss init -p

Configure TailwindCSS & PostCSS

Add the following code to your tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
	darkMode: "class",
	content: [
		"./index.html",
		"./node_modules/luxeyui/dist/all.min.js"
	]
	// ...
}

postcss.config.js file:

module.exports {
	plugins: {
		tailwindcss: {},
		autoprefixer: {}
	}
}

In your index.html file, copy & paste the following code in your <head> tag.

<link rel="stylesheet" href="./node_modules/luxeyui/dist/all.min.css" />

Import the JavaScript file

In your index.js file, import the script form node_modules/.

import "./node_modules/luxeyui/dist/index.js"

Now that's it

Now you can start your designing using components with full functionality.

<button class="button primary">Button</button>

Astro

Create an Astro project

Start by creating a new project using Astro.

npm create astro@latest luxeyui-project
cd luxeyui-project

install Tailwind CSS and LuxeyUI

Run the astro add command to install both tailwindcss and @astro/tailwind as well as generate a tailwind.config.cjs file.

npx astro add tailwind

And then install LuxeyUI:

npm i luxeyui@latest

Import the files provided by LuxeyUI

In your main layout file, src/layouts/Layout.astro, import the css file at the top of the file:

import "./node_modules/luxeyui/dist/index.css";

Now you'll also need to import the js file before the end of the body tag with the client:only directive.

<script client:only>
    import "./node_modules/luxeyui/dist/index.js";
</script>

That is it

Now you can start your designing using components with full functionality. Also you can use other libraries or frameworks like react with it. For instance:

export const Button = ({ className, children, ...props }) => {
  return (
    <button className={`button ${className}`} {...props}>{children}</button>
  )
}