commit a6d92c8bbbeeedc1ea0901fad8b3771beeffca83 Author: admin Date: Sat Jul 26 22:02:49 2025 +0300 first commit diff --git a/globals.css b/globals.css new file mode 100644 index 0000000..7bd2424 --- /dev/null +++ b/globals.css @@ -0,0 +1,2 @@ +@import "tailwind-preset-mantine"; +@import "./theme.css"; \ No newline at end of file diff --git a/layout.tsx b/layout.tsx new file mode 100644 index 0000000..bac1a1f --- /dev/null +++ b/layout.tsx @@ -0,0 +1,41 @@ +import "@mantine/core/styles.css" +import "@mantine/dates/styles.css" +import "@mantine/notifications/styles.css" +import '@mantine/dropzone/styles.css'; + +import React from "react" +import { + ColorSchemeScript, + mantineHtmlProps, + MantineProvider, +} from "@mantine/core" +import { theme } from "./theme" +import "./globals.css" +import { Notifications } from "@mantine/notifications" +import { ModalsProvider } from "@mantine/modals" + +export const metadata = { + title: "Mantine Next.js template", + description: "I am using Mantine with Next.js!", +} + +export default function RootLayout({ children }: { children: any }) { + return ( + + + + + + + + + + {children} + + + + ) +} diff --git a/page.tsx b/page.tsx new file mode 100644 index 0000000..e196d3c --- /dev/null +++ b/page.tsx @@ -0,0 +1,52 @@ +import { ColorSchemesSwitcher } from "@/components/color-schemes-switcher" +import { + AppShell, + AppShellHeader, + AppShellMain, + Text, + Title, +} from "@mantine/core" + +export default function Home() { + return ( + + + + + Welcome to{" "} + <Text + inherit + variant="gradient" + component="span" + gradient={{ from: "pink", to: "yellow" }} + > + Mantine + </Text>{" "} + + + <Text + inherit + variant="gradient" + component="span" + gradient={{ from: "blue", to: "green" }} + > + TailwindCSS + </Text> + + + This starter Next.js project includes a minimal setup for + Mantine with TailwindCSS. To get started edit page.tsx file. + +
+ +
+ + + ) +} diff --git a/theme.css b/theme.css new file mode 100644 index 0000000..46ca8db --- /dev/null +++ b/theme.css @@ -0,0 +1,133 @@ +/** This file is autogenerated by the script. Do not edit it manually. */ + + +@theme { + + + /* colors - all */ + + + /* colors - variant specific */ + + + /* breakpoints */ + --breakpoint-*: initial; + --breakpoint-xs: 36em; + --breakpoint-sm: 48em; + --breakpoint-md: 62em; + --breakpoint-lg: 75em; + --breakpoint-xl: 88em; + + /* readd back tailwind's default containers vars to fix #24 */ + --size-3xs: 16rem; + --size-2xs: 18rem; + --size-xs: 20rem; + --size-sm: 24rem; + --size-md: 28rem; + --size-lg: 32rem; + --size-xl: 36rem; + --size-2xl: 42rem; + --size-3xl: 48rem; + --size-4xl: 56rem; + --size-5xl: 64rem; + --size-6xl: 72rem; + --size-7xl: 80rem; + + --container-3xs: var(--size-3xs); + --container-2xs: var(--size-2xs); + --container-xs: var(--size-xs); + --container-sm: var(--size-sm); + --container-md: var(--size-md); + --container-lg: var(--size-lg); + --container-xl: var(--size-xl); + --container-2xl: var(--size-2xl); + --container-3xl: var(--size-3xl); + --container-4xl: var(--size-4xl); + --container-5xl: var(--size-5xl); + --container-6xl: var(--size-6xl); + --container-7xl: var(--size-7xl); + + --width-3xs: var(--size-3xs); + --width-2xs: var(--size-2xs); + --width-xs: var(--size-xs); + --width-sm: var(--size-sm); + --width-md: var(--size-md); + --width-lg: var(--size-lg); + --width-xl: var(--size-xl); + --width-2xl: var(--size-2xl); + --width-3xl: var(--size-3xl); + --width-4xl: var(--size-4xl); + --width-5xl: var(--size-5xl); + --width-6xl: var(--size-6xl); + --width-7xl: var(--size-7xl); + + --min-width-3xs: var(--size-3xs); + --min-width-2xs: var(--size-2xs); + --min-width-xs: var(--size-xs); + --min-width-sm: var(--size-sm); + --min-width-md: var(--size-md); + --min-width-lg: var(--size-lg); + --min-width-xl: var(--size-xl); + --min-width-2xl: var(--size-2xl); + --min-width-3xl: var(--size-3xl); + --min-width-4xl: var(--size-4xl); + --min-width-5xl: var(--size-5xl); + --min-width-6xl: var(--size-6xl); + --min-width-7xl: var(--size-7xl); + + --max-width-3xs: var(--size-3xs); + --max-width-2xs: var(--size-2xs); + --max-width-xs: var(--size-xs); + --max-width-sm: var(--size-sm); + --max-width-md: var(--size-md); + --max-width-lg: var(--size-lg); + --max-width-xl: var(--size-xl); + --max-width-2xl: var(--size-2xl); + --max-width-3xl: var(--size-3xl); + --max-width-4xl: var(--size-4xl); + --max-width-5xl: var(--size-5xl); + --max-width-6xl: var(--size-6xl); + --max-width-7xl: var(--size-7xl); + + --height-3xs: var(--size-3xs); + --height-2xs: var(--size-2xs); + --height-xs: var(--size-xs); + --height-sm: var(--size-sm); + --height-md: var(--size-md); + --height-lg: var(--size-lg); + --height-xl: var(--size-xl); + --height-2xl: var(--size-2xl); + --height-3xl: var(--size-3xl); + --height-4xl: var(--size-4xl); + --height-5xl: var(--size-5xl); + --height-6xl: var(--size-6xl); + --height-7xl: var(--size-7xl); + + --min-height-3xs: var(--size-3xs); + --min-height-2xs: var(--size-2xs); + --min-height-xs: var(--size-xs); + --min-height-sm: var(--size-sm); + --min-height-md: var(--size-md); + --min-height-lg: var(--size-lg); + --min-height-xl: var(--size-xl); + --min-height-2xl: var(--size-2xl); + --min-height-3xl: var(--size-3xl); + --min-height-4xl: var(--size-4xl); + --min-height-5xl: var(--size-5xl); + --min-height-6xl: var(--size-6xl); + --min-height-7xl: var(--size-7xl); + + --max-height-3xs: var(--size-3xs); + --max-height-2xs: var(--size-2xs); + --max-height-xs: var(--size-xs); + --max-height-sm: var(--size-sm); + --max-height-md: var(--size-md); + --max-height-lg: var(--size-lg); + --max-height-xl: var(--size-xl); + --max-height-2xl: var(--size-2xl); + --max-height-3xl: var(--size-3xl); + --max-height-4xl: var(--size-4xl); + --max-height-5xl: var(--size-5xl); + --max-height-6xl: var(--size-6xl); + --max-height-7xl: var(--size-7xl); +} diff --git a/theme.ts b/theme.ts new file mode 100644 index 0000000..2232c77 --- /dev/null +++ b/theme.ts @@ -0,0 +1,15 @@ +"use client" + +import { createTheme } from "@mantine/core" + +export const theme = createTheme({ + breakpoints: { + xs: "36em", + sm: "48em", + md: "62em", + lg: "75em", + xl: "88em", + }, +}) + +export default theme