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 can be done in three steps

1. Installation#

You can either install with NPM or Yarn

yarn add @adaptui/react-tailwind

2. Modifying tailwind.config.js#

Once you're done with the above steps @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/**/*",
  ],
});

3. Wrap your entire app with AdaptUIProvider#

AdaptUI needs to pass down all the neccesary styling for the components. So you just have to wrap your entire app inside the provider.

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 based on your project setup.

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

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