Skip to content
Docs
Getting Started

Getting Started

AdaptUI uses tailwind to provide better styling at one place, so you'll need to setup a tailwind project using their installation guide.

Installation

You can either install with NPM or Yarn

Tailwind setup

After setting up tailwind and installing @adaptui/react-tailwind , import our custom tailwind preset inside tailwind.config.js and use it.

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

Checkout our integration guides for CRA & Next.js

Setting up provider

AdaptUI needs a theme provider to pass down all the neccesary styling for the components.

Go to the root of your application and add the below code. Root of your app might be App.js or App.tsx or index.js.

import * as React from "react";
import { AdaptUIProvider } from "@adaptui/react-tailwind";

function App() {
  return (
    <AdaptUIProvider>
      <App />
    </AdaptUIProvider>
  );
}
Theming