Installation

Install the Package

pnpm i @mks2508/mks-ui

Peer Dependencies

The library requires React 19+ as a peer dependency:

pnpm i react react-dom

Tailwind CSS v4 Setup

This library ships compiled JS with Tailwind class strings. Tailwind v4's @tailwindcss/vite plugin does not scan node_modules by default, so you must add a @source directive.

Add this to your main CSS file after the Tailwind import:

@import 'tailwindcss';

/* CRITICAL: Tell Tailwind v4 to scan mks-ui component classes */
@source "../node_modules/@mks2508/mks-ui/dist";

Without this directive, component utility classes like bg-popover, border-input, and data-placeholder:text-muted-foreground will not be generated, and components will render unstyled.

Import Patterns

Barrel Import (Quick Start)

Import everything from the React entry point:

import { Button, Card, Dialog, cn, useAutoHeight } from '@mks2508/mks-ui/react';

Sub-Path Imports (Tree-Shaking)

For optimal bundle size, import individual components:

import { Button } from '@mks2508/mks-ui/react/ui/Button';
import { cn } from '@mks2508/mks-ui/react/lib/utils';
import { Check } from '@mks2508/mks-ui/react/icons/lucide-animated';
import { useAutoHeight } from '@mks2508/mks-ui/react/hooks/UseAutoHeight';

Core Types Only

For framework-agnostic type imports:

import type { StyleSlots, SlotOverrides, IBaseConfig } from '@mks2508/mks-ui';

TypeScript Configuration

If using path aliases, ensure your tsconfig.json can resolve the package:

{
  "compilerOptions": {
    "moduleResolution": "bundler"
  }
}

Motion (Optional)

Some components use spring-based animations via the motion package. It's included as a dependency of @mks2508/mks-ui, but if you need to use motion directly:

pnpm i motion

import { motion } from 'motion/react';

Terminal Block (Optional)

The Terminal block is an opt-in, browser-only module with its own peer dependencies. Install only what you need:

// Import from the dedicated entry point
import { TerminalPanel, LogParserService } from '@mks2508/mks-ui/react/blocks/Terminal';

xterm.js renderer

pnpm i @xterm/xterm @xterm/addon-fit @xterm/addon-web-links @xterm/addon-search @xterm/addon-unicode11

restty GPU renderer

pnpm i restty

Log viewer (React mode)

pnpm i @tanstack/react-virtual shiki

The Terminal block is not included in the main @mks2508/mks-ui/react barrel — it must be imported from @mks2508/mks-ui/react/blocks/Terminal and loaded client-side only (e.g. next/dynamic with { ssr: false }).