Setting up Next.js with Renderlesskit

First let's create a new Nextjs project.

npx create-next-app my-website

Setup TailwindCSS#

To get started with renderlesskit first step is to setup Tailwind CSS in your CRA project. Refer to tailwind documentation for Setting up Tailwind CSS in a Next.js project

After setting up tailwind in your project, all you need to do inside your tailwind.config.js is import our preset function and use it.

module.exports = preset({
  presets: [require("@renderlesskit/react-tailwind/preset")],
  purge: [
    // Make sure to add this purge to generate the component's default styling
    "node_modules/@renderlesskit/react-tailwind/**/*",
  ],
});

Renderlesskit Setup#

After following all the steps and correctly setting up tailwind, now let's add the RenderlesskitProvider

Follow Setting Up Provider to setup the provider for your app.

Follow Extending Theme Tokens to extend your theme tokens with your own custom tokens.

Follow TypeScript Guide for more information on how to use along with TypeScript in your app.