Skip to content
Guides
Usage With Next.js

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/**/*",
  ],
});
💡

presets merges your taiwind config with adaptui's internal tailwind configs and enables certain plugins

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.

Last updated on June 8, 2023