Installation

Get started by installing the package and setting up your project. Follow the steps below to add mokri UI to your Next.js application.

Prerequisites

Before installing mokri UI, make sure you have the following:

Node.js 18.0 or later
React 18.0 or later
Next.js 13.0 or later (recommended)
Tailwind CSS 4.1.0 or later (required)

Installation

Install the mokri UI package and required dependencies.

1. Install the package

<> bash

npm install mokri-ui

2. Install peer dependencies

Install Tailwind CSS v4 and all required dependencies:

<> bash

npm install tailwindcss@^4.1.0 @tailwindcss/postcss@^4.1.16 tailwindcss-animate@^1.0.7 clsx@^2.1.1 tailwind-merge@^3.3.1 framer-motion@^12.23.24 react-slick@^0.31.0 slick-carousel@^1.8.1

Configuration

Configure Tailwind CSS and set up your project structure.

1. Configure PostCSS

Tailwind CSS v4 uses PostCSS for processing. Create or update your postcss.config.mjs file:

<> postcss.config.mjs

// postcss.config.mjs
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

Note: Tailwind CSS v4 does not require a tailwind.config.ts file. Configuration is done directly in CSS.

2. Configure Tailwind CSS in globals.css

Add the following to your app/globals.css file. Tailwind v4 uses @import instead of @tailwind directives. With mokri-ui you can now import a single helper file that registers Tailwind sources for the package:

<> app/globals.css

// app/globals.css
@import "tailwindcss";
@plugin "tailwindcss-animate";
@import "mokri-ui/tailwind.css"; // NEW: auto-scan mokri-ui, no @source needed

/* CSS variables for theming */
:root {
  --background: #ffffff;
  --foreground: #171717;
  --secondary: #262626;
  --destructive: #9E4042;
  --muted: #F3F4F6;
  --border: #E5E5E5;
  --focusborder: #c2bfbf;
  --ring: #cbd5e1;
  --accent: #f1f5f9;
  --glow: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] {
  --background: #ffffff;
  --foreground: #171717;
  --secondary: #E5E5E5;
  --destructive: #9E4042;
  --muted: #f5f6f7;
  --border: #E5E5E5;
  --focusborder: #c2bfbf;
  --ring: #e1e2e2;
  --accent: #f1f5f9;
  --glow: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] {
  --background: #0A0A0A;
  --foreground: #E5E5E5;
  --secondary: #262626;
  --destructive: #9E4042;
  --muted: #1e1e1e;
  --border: #262626;
  --focusborder: #252525;
  --ring: #3d3e3f;
  --accent: #1e293b;
  --glow: rgba(255, 255, 255, 0.1);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-secondary: var(--secondary);
  --color-destructive: var(--destructive);
  --color-muted: var(--muted);
  --color-border: var(--border);
  --color-focusborder: var(--focusborder);
  --color-ring: var(--ring);
  --color-accent: var(--accent);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Prevent horizontal overflow on mobile */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Make media naturally responsive */
img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

Important: Make sure to import this CSS file in your app/layout.tsx file:

<> app/layout.tsx

// app/layout.tsx
import "./globals.css";
// ... rest of your layout code

3. Configure TypeScript paths (optional)

Update your tsconfig.json for path aliases:

<> tsconfig.json

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts"
  ],
  "exclude": ["node_modules"]
}

4. Create utility function (recommended)

Create a lib/utils.ts file for className merging. This is used by many components:

<> lib/utils.ts

// lib/utils.ts
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Project Structure

Organize your components in the following structure:

<> project structure

your-project/
├── app/
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   └── ui/
│       ├── button.tsx
│       ├── card.tsx
│       └── ...
├── lib/
│   └── utils.ts
├── postcss.config.mjs
└── tsconfig.json

Usage

Import and use components in your application:

<> app/page.tsx

// app/page.tsx
import { Button } from 'mokri-ui'
import { Card } from 'mokri-ui'

export default function Page() {
  return (
    <div className="p-8">
      <Card>
        <h1 className="text-2xl font-bold mb-4">Welcome</h1>
        <Button>Get Started</Button>
      </Card>
    </div>
  )
}

Required Dependencies

Make sure these packages are installed in your project. These are the exact versions used in this project:

<> package.json

// package.json dependencies
{
  "dependencies": {
    "mokri-ui": "latest",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "tailwindcss": "^4.1.0",
    "@tailwindcss/postcss": "^4.1.16",
    "tailwindcss-animate": "^1.0.7",
    "clsx": "^2.1.1",
    "tailwind-merge": "^3.3.1",
    "framer-motion": "^12.23.24",
    "react-slick": "^0.31.0",
    "slick-carousel": "^1.8.1"
  },
  "devDependencies": {
    "@types/react-slick": "^0.23.13",
    "autoprefixer": "^10.4.20",
    "postcss": "^8.4.35",
    "typescript": "^5.3.3"
  }
}

Note: Tailwind CSS v4 requires @tailwindcss/postcss for PostCSS integration. Make sure to install it along with Tailwind CSS v4.

Next Steps

Now that you have mokri UI installed, you can:

Browse the components to see what's available
Learn about theming and customization
Set up dark mode for your application
Check component documentation for usage examples and API references