title: "20230829-chakra-ui" date: "2023-08-29" tag: ["blog", "chakra ui"]

pnpm add @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion

// pages/_app.tsx
import type { AppProps } from 'next/app'
import { ChakraProvider } from '@chakra-ui/react'

export default function App({ Component, pageProps }: AppProps) {
return (
		<ChakraProvider>
			<Component {...pageProps} />
		</ChakraProvider>
	)
}

Ref

  • https://chakra-ui.com/getting-started/nextjs-guide