Chakra Next

Overview

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.

Features

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

Installation

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
     • card.bg
   • shadows:
     • card.shadow (make card shadow darker in dark mode to stand out)

Summary

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.