Using UI Components

IndoUI provides a collection of professionally designed components that you can copy and paste directly into your project. No library installation required.

1Create Next.js Project

Start by creating a new Next.js project using the official CLI.

npx create-next-app@latest my-app

2Install Tailwind CSS

Install tailwindcss and its companion peer dependencies.

Terminal

npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

Update tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add directives to globals.css:

@tailwind base; @tailwind components; @tailwind utilities;

3Run Project

npm run dev

Use IndoUI Components

IndoUI components are copy-paste components. They are not part of an npm library. This gives you absolute control over the code.

Browse the components on the IndoUI website
Copy the source code directly from the component page
Paste it into your project folder (e.g., @/components/ui/)
Import and use it normally in your views

Copy → Paste → Use. It's that simple. Customize the code as much as you want!