Chakra Next

screenshot of Chakra Next

Chakra Next

Opinionated design system for React, based on Chakra UI + Next.js, written in TypeScript.


This product is a theme designed for Next.js apps. It provides a default theme with semantic tokens and is 100% TypeScript, transpiled to ESM (requires Next.js 12+). It includes various components such as links, cards, SVG, redirects, and NoSSR. The theme also offers installation instructions and customization options.


  • Default theme with semantic tokens
  • 100% TypeScript, transpiled to ESM (requires Next.js 12+)
  • Components:
    • Links
    • Cards
    • SVG
    • Redirect
    • NoSSR
    • More to come


To install the theme in your Next.js app, follow these steps:

  1. In your Next.js app, run the following command to install the theme:

    npm install nextjs-theme
  2. Use the theme tools to resolve theme tokens across color modes. You can use the useColorModeToken function for this:

    import { useColorModeToken } from "nextjs-theme";
    // Usage example
    const [bgColor, textColor] = useColorModeToken("colors:body", "text:dim");
  3. The theme provides the following semantic tokens:

    • colors:
      • body (follows the html/body/__next background color)
      • text.dim
      • text.dimmer
      • text.dimmest
    • shadows:
      • card.shadow (make card shadow darker in dark mode to stand out)


The Next.js theme is a customizable and feature-rich theme for use in Next.js apps. It provides a default theme with semantic tokens, TypeScript support, and various components such as links, cards, SVG, redirects, and NoSSR. The theme can be easily installed and customized to fit the needs of your app.


Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.


React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

Chakra UI

Chakra UI is a popular open-source React component library that provides a set of accessible and customizable UI components to help developers create modern web applications.

Framer Motion

Alpine.js is a lightweight JavaScript framework that simplifies the process of creating dynamic, reactive user interfaces on the web. It uses a declarative syntax that offers a higher level of abstraction compared to vanilla JavaScript, while being more performant and easier to use than jQuery.


MDX is a format that allows developers to write JSX within Markdown documents, combining the power of React with the simplicity of Markdown. This allows for the creation of dynamic and interactive content that can be easily shared and consumed across different platforms and devices.


TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.