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 devfor development. - Internationalization — Uses i18next with LanguageDetector, offering English (us) and French (fr) locale files under
./internationalization/locales/, a fallback language ofus, and detection order of localStorage then navigator. - SEO built in — Integrates
next-seofor per-page OpenGraph/Twitter meta tags andnext-sitemapfor sitemap and robots.txt generation; thePageLayoutcomponent wrapsNextSeowith a default configuration. - Customizable theme — Chakra-UI theme files located in
./src/theme/allow you to customize colors, fonts, and component styles; aThemeButtoncomponent toggles dark and light modes. - Included components — Three ready-to-use components:
ThemeButton,LanguagesButton, andPageLayout, each with a dedicated folder under./src/components/. - Useful pre-installed dependencies —
react-usev17.4.0,react-intersection-observerv9.4.1,@react-iconsv4.7.1,prettierv2.8.1,eslintv8.31.0, plus fonts from fontsource.org. - Custom path aliases — Imports can use
@/components,@/types,@/utils,@/data,@/providers,@/internationalization, and@/themeinstead 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
PageLayoutfor consistent SEO, theThemeButtonfor 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-observerdependency 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 withnpm 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/.
