# Installation

Source: https://plumeria.dev/docs/installation





<Steps>
  <Step>
    ## One command [#one-command]

    `npx @plumeria/init` reads the project, asks what it cannot read, and writes the
    rest: the packages, the bundler plugin, `plumeria.d.ts` and the ESLint config.

    ```sh title="Terminal"
    npx @plumeria/init
    ```

    It shows the plan before it writes anything, and `--dry-run` stops at the plan.
    See [@plumeria/init](/docs/api-reference/tools/init) for every question it asks and
    every file it touches. The rest of this page is the same setup by hand.
  </Step>

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

    The core package is type definitions only. No bundle or runtime is included.

    <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>

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

    `@plumeria/core` ships no prop declaration of its own. At the application root, reference the one for the default `classStyle` prop:

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

    To use another name, see [Declaring the styling prop](/docs/api-reference/types/Style#declaring-the-styling-prop).

    ESLint is optional. Skip to your bundler: [Next.js](/docs/installation#nextjs) / [Vite](/docs/installation#vite)
  </Step>

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

    [`@plumeria/eslint-plugin`](/docs/api-reference/plugins/eslint-plugin) sorts and formats style properties and reports invalid values and selectors.
    The [plugin reference](/docs/api-reference/plugins/eslint-plugin) lists every rule.

    ```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.configs.recommended,
    );
    ```

    The bundler plugins lint the build with these rules by default, so a style error stops it with no setup. On esbuild and Bun, put `plumeria-lint --` in front of the build command instead, and add `--style-prop` if the styling prop was renamed.

    Install the plugin, plus `rimraf` for Next.js:

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

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

      {/* prettier-ignore */}

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

      {/* prettier-ignore */}

      <Tab>
        ```sh title="Terminal"
        pnpm i -D @plumeria/eslint-plugin rimraf
        ```
      </Tab>
    </Tabs>

    On Next.js, clearing the build cache before `dev` and `build` keeps a version change from being read as a compile error:

    ```json title="package.json"
      "scripts": {
        "predev": "rimraf .next",
        "prebuild": "rimraf .next",
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
      },
    ```
  </Step>

  <Step>
    ## Integration [#integration]

    Add the plugin for your bundler.

    ### 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>

    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>

    ```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>
  </Step>
</Steps>