p-sw
35603cadaf
Update the installation guide in React docs, transforming it into a tabbed interface separating CLI and Manual Installation methods for better readability and ease of understanding.
37 lines
1.8 KiB
Plaintext
37 lines
1.8 KiB
Plaintext
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>
|