Setting up Next.js with AdaptUI

First let's create a new Nextjs project.

npx create-next-app my-website

Setup TailwindCSS#

To get started with AdaptUI 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("@adaptui/react-tailwind/preset")],
  purge: [
    // Make sure to add this purge to generate the component's default styling
    "node_modules/@adaptui/react-tailwind/**/*",
  ],
});

AdaptUI Setup#

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

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.