Ts Next Chakra Motion Kit

The Typescript Next.js Chakra-UI Framer-Motion Starter Kit is a boilerplate template for building Next.js applications with TypeScript, Chakra-UI, and Framer-Motion, bundling internationalization, SEO, and theme switching out of the box.

What is this starter kit?

This starter kit is a pre-configured Next.js project that combines the Chakra-UI component library with Framer-Motion animations and TypeScript. It is created and maintained by hakkaofdev (Alexandre Gossard) and is available as an open-source GitHub repository. The template takes a fresh Next.js app and adds a folder structure, custom path aliases, internationalization files, SEO components, theme customization, and a set of reusable React components, so you can start coding features instead of configuration. A live demo is available at https://ts-next-chakra-motion-kit.vercel.app/.

Key features

• Tech stack — Next.js with TypeScript, styled with Chakra-UI, and animated with Framer Motion; the template runs with npm, using npm run dev for development.
• Internationalization — Uses i18next with LanguageDetector, offering English (us) and French (fr) locale files under ./internationalization/locales/, a fallback language of us, and detection order of localStorage then navigator.
• SEO built in — Integrates next-seo for per-page OpenGraph/Twitter meta tags and next-sitemap for sitemap and robots.txt generation; the PageLayout component wraps NextSeo with a default configuration.
• Customizable theme — Chakra-UI theme files located in ./src/theme/ allow you to customize colors, fonts, and component styles; a ThemeButton component toggles dark and light modes.
• Included components — Three ready-to-use components: ThemeButton, LanguagesButton, and PageLayout, each with a dedicated folder under ./src/components/.
• Useful pre-installed dependencies — react-use v17.4.0, react-intersection-observer v9.4.1, @react-icons v4.7.1, prettier v2.8.1, eslint v8.31.0, plus fonts from fontsource.org.
• Custom path aliases — Imports can use @/components, @/types, @/utils, @/data, @/providers, @/internationalization, and @/theme instead of relative paths.

Who is this template for?

• Next.js developers who want a TypeScript project with a design system and animation library already wired together.
• Multilingual website builders who need a working i18next setup with English and French locales, plus a language switcher component to copy or extend.
• SEO-conscious front-end developers who want per-page SEO meta tags and sitemap generation configured out of the box without writing the boilerplate themselves.

Use cases

• Personal portfolio sites: Use the PageLayout for consistent SEO, the ThemeButton for dark/light mode, and Framer Motion variants for page entrance animations.
• Product landing pages: Start from the Chakra-UI responsive layout and add your own sections; the react-intersection-observer dependency supports scroll-triggered animations.
• Blog or documentation sites: Add pages to the pages/ folder, reuse the internationalization keys for multilingual content, and generate a sitemap with npm run postbuild.

How does the template work?

Clone the repository, run npm install, then npm run dev to launch the development server. To generate the sitemap and robots.txt, run npm run postbuild. The project structure separates pages under pages/, components under src/components/, locales under internationalization/locales/, and theme files under src/theme/.

FAQ

What languages are included?

The starter kit ships with English (us) and French (fr) translations. New languages are added by creating a resource entry in ./internationalization/i18n.ts and a corresponding locale folder.

Does the template include SEO setup?

Yes. It uses next-seo for per-page meta tags and next-sitemap for sitemap.xml and robots.txt generation. The PageLayout component provides a default NextSeo configuration you can override per page.

How do I customize the theme?

Chakra-UI theme files are in ./src/theme/. You can modify the existing token scales or follow the official Chakra-UI theming documentation to create your own component styles.

Can I use Framer Motion with Chakra-UI?

Yes, Framer Motion is installed as a dependency of Chakra-UI. The README shows a MotionContainer pattern that wraps Chakra-UI's Container with motion() and uses variants for enter/exit transitions.

Does this template support TypeScript?

Yes, the entire project is written in TypeScript, with a tsconfig.json and type definitions folder in ./src/types/.