Getting Started

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

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>
  );
}