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 --ts --tailwind --app --src-dir

We use the --ts flag to create a TypeScript project, --tailwind to add Tailwind CSS, --app to use the App Router, and --src-dir to use the src folder as the source directory.

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 Inter as the default font. Inter is not required. I also like to use the Geist font by Vercel. 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 { Inter } from "next/font/google";
 
const sans = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
});
 
export const fonts = {
  sans,
};

2. Import the font in the root layout:

import type { Metadata, Viewport } from "next";
import { fonts } from "~/config/fonts";
import { cn } from "~/utils/cn";
 
import "~/styles/globals.css";
 
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={cn(
          "min-h-dvh bg-background font-sans text-foreground antialiased",
          fonts.sans.variable
        )}
      >
        {children}
      </body>
    </html>
  );
}

3. Configure theme.extend.fontFamily in tailwind.config.ts

import type { Config } from "tailwindcss";
import { fontFamily } from "tailwindcss/defaultTheme";
 
export default {
  content: ["./src/**/*.{ts,tsx}"],
  darkMode: "class",
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-sans)", ...fontFamily.sans],
      },
    },
  },
  plugins: [],
  future: {
    hoverOnlyWhenSupported: true,
  },
} satisfies Config;

App structure

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

next.config.js
package.json
postcss.config.cjs
tailwind.config.ts
tsconfig.json
  • I place the UI components in the src/components/ui folder.
  • The utils folder contains all the utility functions. I have a cn.ts where I define the cn helper.
  • 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>
  );
}