Potidev - React Vulpix Pack

Description

TODO...

Setup

Setup Shadcn/ui in Vulpix Pack

1. Install Shadcn/ui dependencies:

npm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react @potidev/react-vulpix-pack

npm install -D tailwindcss postcss autoprefixer

2. Configure the path aliases in your tsconfig.json file.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

3. Configure tailwind.config.js. Here's what ours file looks like: tailwind.config.js.

4. Configure postcss.config.js. Here's what ours file looks like: postcss.config.js.

5. Add the following to your global.css file and import. You can learn more about using CSS variables for theming in the theming section of shadcn ui doc.

6. Add this line in your global.css to tailwind detect the classes from vulpix like this documentation:

@source "../node_modules/@potidev/react-vulpix-pack";
@source "../node_modules/@potidev/layouts-vulpix-pack";

6. If you are on a NextJS project, add these lines in your next.config.js:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {

  transpilePackages: ["@potidev/react-vulpix-pack", "@potidev/layouts-vulpix-pack"],
  // Other settings...
};

export default nextConfig;

7. To use dark-mode, follow the shadcn-ui documentation.

8. In the original shadcn-ui documentation, there are other steps that are not necessary when using the vulpix pack. That's it.