Installation

Kuma UI is compatible with React 18 and above. If you're using an older version of React, you'll need to upgrade first (opens in a new tab).

Install packages

To install Kuma UI in your project, run one of the following commands in your terminal:

npm install @kuma-ui/core

Once the @kuma-ui/core package is successfully installed, you can proceed to install a plugin for your specific framework (Next.js or Vite) as below.

pnpm install -D @kuma-ui/next-plugin

Setting Up Kuma UI

Once you've installed the plugin, you need to configure it in your configuration file.

next.config.js

const { withKumaUI } = require("@kuma-ui/next-plugin");
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};
 
module.exports = withKumaUI(nextConfig);

Server Side Rendering

If you are using Kuma UI with Next.js, setting up Server Side Rendering (SSR) isn't mandatory. However, without this setup, you may experience a Flash Of Unstyled Content (FOUC). We highly recommend setting up SSR to prevent this from happening.

app/layout.tsx

import { KumaRegistry } from "@kuma-ui/next-plugin/registry"
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <KumaRegistry>{children}</KumaRegistry>
      </body>
    </html>
  );
}

Overview Utility First