Getting Started

Introduction

Backend AI UI is a collection of UI components built on top with shadcn/ui and Tailwind CSS v3.

Add in this monorepo

To usage Backend AI UI components in this monorepo, you need to install the @backend-ai/ui package:

npm install @backend-ai/ui

and check if the package.json file has the following entry:

"dependencies": {
  "@backend-ai/ui": "*"
}

Tailwind CSS v3

This library export a default tailwind.config preset that you can use in your project:

1. Add backend-ai/tailwind-config to your project dependencies:

npm install @backend-ai/tailwind-config -D

2. Check if the package.json file has the following entry:

"devDependencies": {
  "@backend-ai/tailwind-config": "*"
}

3. Create a tailwind.config.ts file in your project root directory and import the tailwind.config preset from @backend-ai/tailwind-config:

import type { Config } from "tailwindcss";

import sharedConfig from "@backend-ai/tailwind-config/tailwind.config";

const tailwindConfig: Pick<Config, "presets"> = {
  presets: [
    {
      ...sharedConfig,
      content: ["./app/**/*.tsx", "./src/**/*.tsx"],
      //...
    },
  ],
};

export default tailwindConfig;

PostCSS

If you want to use the postcss.config.js file, you need to use the shared postcss.config from @backend-ai/ui package:

import postCSSConfig from "@backend-ai/ui/postcss.config";

export default postCSSConfig;