1. Docs
  3. installation
  5. Next.js

Next.js

Install and configure Next.js.

Create project

Start by creating a new Next.js project using create-next-app:

npx create-next-app@latest --tailwind --ts --empty --app --src-dir --turbopack

You will be asked a few questions to create the project:

? What is your project named? » my-app
? Would you like to use ESLint? » No / Yes
? Would you like to customize the default import alias (@/*)? » No / Yes

Currently, I prefer to use Biome.js instead of ESLint. You can use ESLint if you prefer. Also I prefer to use ~ as the alias. You can use @ or any other alias if you prefer.

Run the CLI

Run the kanpeki-ui init command to setup your project:

npx kanpeki-ui@latest init

Fonts

I use Geist as the default font. You can use any font you like.

Here's how I configure Inter for Next.js:

1. Create a font.ts file inside src/config:

import { Geist } from "next/font/google";
 
const sans = Geist({
  variable: "--font-family-sans",
  subsets: ["latin"],
});
 
export const fonts = {
  sans,
};

2. Import the font in the root layout:

import "~/styles/globals.css";
 
import type { Metadata, Viewport } from "next";
import { fonts } from "~/config/fonts";
import { cx } from "~/lib/cva";
 
export const metadata: Metadata = {
  title: {
    default: "Next.js app",
    template: "%s | Next.js app",
  },
};
 
export const viewport: Viewport = {
  themeColor: [
    { media: "(prefers-color-scheme: light)", color: "white" },
    { media: "(prefers-color-scheme: dark)", color: "black" },
  ],
};
 
interface LayoutProps {
  children: React.ReactNode;
}
 
export default function Layout({ children }: LayoutProps) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body
        className={cx(
          "min-h-dvh bg-bg font-sans text-fg antialiased",
          fonts.sans.variable
        )}
      >
        {children}
      </body>
    </html>
  );
}

3. Configure --font-sans in globals.css

globals.css
@import "tailwindcss";
 
@plugin "tailwindcss-react-aria-components";
@plugin "tailwindcss-motion";
 
@custom-variant dark (&:where(.dark, .dark *));
 
@theme {
  --font-sans: var(--font-family-sans), ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
  ...
}
 
...

App structure

Here's how I structure my Next.js apps. You can use this as a reference:

kanpeki.json
next.config.ts
package.json
postcss.config.js
tsconfig.json
  • I place the UI components in the src/components/ui folder.
  • The lib folder contains configuration for external libraries.
  • The styles folder contains the global CSS.

That's it ✨

You can now start adding components to your project.

npx kanpeki-ui@latest add button

The command above will add the Button component to your project. You can then import it like this:

import { Button } from "~/components/ui/button";
 
export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}