first commit
This commit is contained in:
2
globals.css
Normal file
2
globals.css
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
@import "tailwind-preset-mantine";
|
||||||
|
@import "./theme.css";
|
||||||
41
layout.tsx
Normal file
41
layout.tsx
Normal file
@ -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 (
|
||||||
|
<html lang="en" {...mantineHtmlProps}>
|
||||||
|
<head>
|
||||||
|
<ColorSchemeScript />
|
||||||
|
<link rel="shortcut icon" href="/favicon.svg" />
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
|
||||||
|
/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<MantineProvider theme={theme}>
|
||||||
|
<Notifications />
|
||||||
|
<ModalsProvider>{children}</ModalsProvider>
|
||||||
|
</MantineProvider>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
)
|
||||||
|
}
|
||||||
52
page.tsx
Normal file
52
page.tsx
Normal file
@ -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 (
|
||||||
|
<AppShell header={{ height: 60 }} padding="md">
|
||||||
|
<AppShellHeader></AppShellHeader>
|
||||||
|
<AppShellMain>
|
||||||
|
<Title className="text-center mt-20">
|
||||||
|
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>
|
||||||
|
</Title>
|
||||||
|
<Text
|
||||||
|
className="text-bold text-center text-gray-700 dark:text-gray-300 max-w-[500px] mx-auto mt-xl"
|
||||||
|
ta="center"
|
||||||
|
size="lg"
|
||||||
|
maw={580}
|
||||||
|
mx="auto"
|
||||||
|
mt="xl"
|
||||||
|
>
|
||||||
|
This starter Next.js project includes a minimal setup for
|
||||||
|
Mantine with TailwindCSS. To get started edit page.tsx file.
|
||||||
|
</Text>
|
||||||
|
<div className="flex justify-center mt-10">
|
||||||
|
<ColorSchemesSwitcher />
|
||||||
|
</div>
|
||||||
|
</AppShellMain>
|
||||||
|
</AppShell>
|
||||||
|
)
|
||||||
|
}
|
||||||
133
theme.css
Normal file
133
theme.css
Normal file
@ -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);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user