nextjs-mantine-stack

📁 ray123fa/nextjs-mantine-stack 📅 4 days ago

总安装量

周安装量

#45723

全站排名

安装命令

npx skills add https://github.com/ray123fa/nextjs-mantine-stack --skill nextjs-mantine-stack

Agent 安装分布

amp 1

opencode 1

kimi-cli 1

codex 1

github-copilot 1

gemini-cli 1

Skill 文档

Next.js 16 + Tailwind v4 + Mantine UI v8 Stack

Tech Stack

Library	Version	Purpose
Next.js	16.x	React framework + Turbopack
Tailwind CSS	v4	Utility-first CSS
Mantine UI	v8.3.14	Component library
Zustand	v5	State management
TanStack Query	v5	Data fetching

Quick Start

# Create project (includes TypeScript, Tailwind, App Router, Turbopack)
npx create-next-app@latest my-app --yes && cd my-app

# Install all dependencies
npm install @mantine/core@8.3.14 @mantine/hooks@8.3.14 @mantine/form@8.3.14 @mantine/dates@8.3.14 dayjs zustand @tanstack/react-query @tanstack/react-query-devtools @tailwindcss/postcss

Project Structure

src/
âââ app/
â   âââ layout.tsx       # Root layout with providers
â   âââ page.tsx         # Home page
â   âââ globals.css      # Tailwind imports
âââ components/          # UI components
âââ providers/
â   âââ index.tsx        # Combined providers
â   âââ query-provider.tsx
âââ stores/              # Zustand stores
âââ hooks/               # Query hooks
âââ lib/                 # Utilities
âââ types/               # TypeScript types

Core Configuration

postcss.config.mjs

const config = {
  plugins: { "@tailwindcss/postcss": {} },
};
export default config;

src/app/globals.css

@import "tailwindcss";

@theme {
  --color-primary: #339af0;
  --color-secondary: #7950f2;
}

src/app/layout.tsx

import "@mantine/core/styles.css";
import "@mantine/dates/styles.css";
import "./globals.css";

import { ColorSchemeScript, mantineHtmlProps } from "@mantine/core";
import { Providers } from "@/providers";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" {...mantineHtmlProps}>
      <head><ColorSchemeScript /></head>
      <body><Providers>{children}</Providers></body>
    </html>
  );
}

src/providers/index.tsx

"use client";
import { MantineProvider, createTheme } from "@mantine/core";
import { QueryProvider } from "./query-provider";

const theme = createTheme({ primaryColor: "blue", defaultRadius: "md" });

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <QueryProvider>
      <MantineProvider theme={theme}>{children}</MantineProvider>
    </QueryProvider>
  );
}

src/providers/query-provider.tsx

"use client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { useState } from "react";

export function QueryProvider({ children }: { children: React.ReactNode }) {
  const [queryClient] = useState(() => new QueryClient({
    defaultOptions: { queries: { staleTime: 60 * 1000 } }
  }));
  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

References

For detailed patterns and examples:

Zustand store patterns: See references/zustand.md
TanStack Query hooks: See references/tanstack-query.md
Mantine components & forms: See references/mantine.md

Commands

npm run dev      # Development (Turbopack)
npm run build    # Production build
npm start        # Start production

GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台