import {TabProvider, TabContent, TabList, TabTrigger} from "@components/Tabs";
import {Code} from "@/components/LoadedCode";

# Installation

<TabProvider defaultName="cli">
  <TabList>
    <TabTrigger name="cli">Using CLI</TabTrigger>
    <TabTrigger name="manual">Manual Install</TabTrigger>
  </TabList>
  <TabContent name="cli">
    1. Install [TailwindCSS](https://tailwindcss.com/docs/installation) and [tailwind-merge](https://github.com/dhiwise/tailwind-merge) and configure it yourself.
    2. Add import alias for `@pswui-lib` in your `tsconfig.json` file.
       <Code language={"json"}>
         {`{\n  "compilerOptions": {\n    "paths": {\n      "@pswui-lib": ["./pswui/lib.tsx"]\n    }\n  }\n}`}
       </Code>
    3. Install [@psw-ui/cli](https://www.npmjs.com/package/@psw-ui/cli).
       <Code language={"plaintext"}>
         {`$ npm install \@psw-ui/cli\n$ yarn add @psw-ui/cli\n$ pnpm add @psw-ui/cli`}
       </Code>
    4. Run CLI to add components
       <Code language={"plaintext"}>
         {`$ npx pswui add <component>\n$ yarn pswui add <component>\n$ pnpm pswui add <component>`}
       </Code>
    5. Import component, and use it.
  </TabContent>
  <TabContent name="manual">
    1. Install [TailwindCSS](https://tailwindcss.com/docs/installation) and [tailwind-merge](https://github.com/dhiwise/tailwind-merge) and configure it yourself.
    2. Add import alias for `@pswui-lib` in your `tsconfig.json` file.
       <Code language={"json"}>
         {`{\n  "compilerOptions": {\n    "paths": {\n      "@pswui-lib": ["<your library file>"]\n    }\n  }\n}`}
       </Code>
    3. Grab the library file from [here](https://raw.githubusercontent.com/pswui/ui/main/packages/react/lib.tsx) and put it in the library file path in the tsconfig.
    4. Now you can copy & paste your component in your project.
  </TabContent>
</TabProvider>