getting-started.mdx

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

<Nextra.Tabs items={['NPM', 'Yarn']} defaultIndex={1}> <Nextra.Tab>

```bash
npm install @adaptui/react-tailwind
```

</Nextra.Tab> <Nextra.Tab>

```bash
yarn add @adaptui/react-tailwind
```

</Nextra.Tab> </Nextra.Tabs>

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

<Nextra.Callout> Checkout our integration guides for CRA & Next.js </Nextra.Callout>

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