Chakra ui

                                https://chakra-ui.com/docs/get-started/installation

npm i @chakra-ui/react @emotion/react
npx @chakra-ui/cli snippet add

1 единица chakra => 4px

const breakpoints = {
	base: "0rem", // 0px
	sm: "30rem", // ~480px
	md: "48rem", // ~768px
	lg: "62rem", // ~992px
	xl: "80rem", // ~1280px
	"2xl": "96rem", // ~1536px
}

layout.tsx:
import { Provider } from "@/components/ui/provider"
export default function RootLayout(props: { children: React.ReactNode }) {
    const { children } = props
    return (
        <html suppressHydrationWarning lang='ru'>
        <body>
        <Provider>{children}</Provider>
        </body>
        </html>
    )
}

page.tsx:
import { Button } from '@chakra-ui/react'
const Home = () => {
    return (
        <div>
            <h1>Добро пожаловать в мой проект Next.js с Chakra UI!</h1>
            <Button colorScheme="blue">Нажми меня</Button>
        </div>
    )
}
export default Home

package.json remove --turbopack:
"scripts": {
	"dev": "next dev",
	"build": "next build",
	"start": "next start",
	"lint": "eslint"
},

components/ui/theme.ts:
import { createSystem, defaultConfig, defineConfig } from '@chakra-ui/react'

const config = defineConfig({
    theme: {
        tokens: {
            colors: {
                blue: {
                    '600': { value: '#40c4ff' },
                },
            },
        },
    },
})

export const system = createSystem(defaultConfig, config)


components/ui/provider.tsx:
'use client'

import { ChakraProvider } from '@chakra-ui/react'
import { ThemeProvider } from 'next-themes'
import { system } from './theme'

export function Provider(props: { children: React.ReactNode }) {
  return (
    <ChakraProvider value={system}>
        <ThemeProvider attribute="class">{props.children}</ThemeProvider>
    </ChakraProvider>
  )
}
Список