Next.js

Guide to install Deluxe UI in a Next.js application

sDeluxe UI components are built with the 'use client' directive, allowing for both server-side and client-side usage, and compatibility with both the App Router and Pages Router.

Using create-next-app

You can scaffold a new Next.js project by using the create-next-app command and providing the repository URL of the template that you want to use.

npx create-next-app -e https://github.com/nohaxito/deluxe-ui-nextjs-app-template

Manual Installation

Install Deluxe UI

npm install @sihaxito/deluxe-ui

Tailwind CSS Setup

Deluxe UI requires Tailwind CSS to be used. If you don't have it installed, you can follow the instructions in the official Tailwind CSS installation guide.

Once you have installed Tailwind CSS you will need to update your tailwind.config file.

tailwind.config.ts

import type { Config } from "tailwindcss";
import { deluxeTW } from "@sihaxito/deluxe-ui/plugin";
 
const config: Config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "node_modules/@sihaxito/deluxe-ui/dist/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [deluxeTW()],
};
export default config;

Trying Deluxe UI

Now that the installation and configuration of Deluxe UI has been successfully completed, you are ready to use the components in your application.

import { Badge } from "@sihaxito/deluxe-ui";
 
export function Example() {
  return <Badge>Deluxe UI</Badge>;
}

Customization Vite