# Installation

Source: https://plumeria.dev/docs/getting-started/installation





<Steps>
  <Step>
    ## Installing `core` [#installing-core]

    The core package is type definitions only. bundle and runtime are not included.\
    Skip to your bundler: [Next.js](/docs/getting-started/installation#nextjs) / [Vite](/docs/getting-started/installation#vite)

    <Tabs items="['npm', 'yarn', 'pnpm']">
      {/* prettier-ignore */}

      <Tab>
        ```sh title="Terminal"
        npm i -D @plumeria/core
        ```
      </Tab>

      {/* prettier-ignore */}

      <Tab>
        ```sh title="Terminal"
        yarn add -D @plumeria/core
        ```
      </Tab>

      {/* prettier-ignore */}

      <Tab>
        ```sh title="Terminal"
        pnpm i -D @plumeria/core
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    ## ESLint Setup [#eslint-setup]

    By implementing `ESLint`, you can automatically organize the order of CSS properties and format line breaks, creating a more efficient environment than manual maintenance.

    The plumerialint command installs [`@plumeria/eslint-plugin`](/docs/getting-started/editor-integration).\
    Setting `languageOptions.parserOptions.projectService` to `true` enables `"@plumeria/no-invalid-selector-nesting"` by utilizing TypeScript type information.

    ```ts
    import eslint from '@eslint/js';
    import tseslint from 'typescript-eslint';
    import { defineConfig } from 'eslint/config';
    import { plumeria } from '@plumeria/eslint-plugin';

    export default defineConfig(
      eslint.configs.recommended,
      tseslint.configs.recommended,
      plumeria.flatConfigs.recommended,
      {
        files: ['**/*.{ts,tsx}'],
        languageOptions: {
          parserOptions: { projectService: true },
        },
      }
    );
    ```

    `oxlint` is required to run the `plumerialint` command.\
    Integrating `plumerialint` into your build pipeline allows for proactive error detection.

    ```sh
    pnpm i -D oxlint rimraf
    ```

    For `Next`, we recommend running rimraf to clean up the cache to accommodate the differences between versions:

    <Tabs items="[&#x22;Next.js&#x22;, &#x22;Vite&#x22;]">
      <Tab>
        ```json title="package.json"
          "scripts": {
            "predev": "rimraf .next",
            "prebuild": "rimraf .next",
            "dev": "next dev",
            "build": "plumerialint -- next build",
            "start": "next start",
          },
        ```
      </Tab>

      <Tab>
        ```json title="package.json"
          "scripts": {
            "dev": "vite",
            "build": "plumerialint -- tsc -b && vite build", 
          },
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    ## Integration [#integration]
  </Step>

  ## Next.js [#nextjs]

  <Tabs items="[&#x22;npm&#x22;, &#x22;yarn&#x22;, &#x22;pnpm&#x22;]">
    {/* prettier-ignore */}

    <Tab>
      ```sh title="Terminal"
      npm i -D @plumeria/next-plugin
      ```
    </Tab>

    <Tab>
      ```sh title="Terminal"
      yarn add -D @plumeria/next-plugin
      ```
    </Tab>

    <Tab>
      ```sh title="Terminal"
      pnpm add -D @plumeria/next-plugin
      ```
    </Tab>
  </Tabs>

  ### plumeria.d.ts [#plumeriadts]

  `@plumeria/core` ships no prop declaration of its own, so name the styling prop your project compiles with.

  ```ts title="plumeria.d.ts"
  /* application root */
  /// <reference types="@plumeria/core/class-style" />
  ```

  ### next.config.ts [#nextconfigts]

  It works with both Turbopack and Webpack.

  ```ts title="next.config.ts"
  import type { NextConfig } from "next";
  import { withPlumeria } from "@plumeria/next-plugin";

  const nextConfig: NextConfig = {
    /* config options here */
  };

  export default withPlumeria(nextConfig);
  ```

  ***

  ## Vite [#vite]

  <Tabs items="[&#x22;npm&#x22;, &#x22;yarn&#x22;, &#x22;pnpm&#x22;]">
    <Tab>
      ```sh title="Terminal"
      npm i -D @plumeria/unplugin
      ```
    </Tab>

    <Tab>
      ```sh title="Terminal"
      yarn add -D @plumeria/unplugin
      ```
    </Tab>

    <Tab>
      ```sh title="Terminal"
      pnpm add -D @plumeria/unplugin
      ```
    </Tab>
  </Tabs>

  ### vite.config [#viteconfig]

  ```ts title="vite.config.ts"
  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react-swc';
  import plumeria from '@plumeria/unplugin';

  export default defineConfig({
    plugins: [react(), plumeria.vite()],
  });

  ```

  <Cards>
    <Card title="See more about @plumeria/unplugin package" href="/docs/integration/vite" />

    <Card title="See more about @plumeria/next-plugin package" href="/docs/integration/next" />
  </Cards>
</Steps>