# Vite
Source: https://plumeria.dev/docs/integration/vite
[`examples/vite-react`](https://github.com/zss-in-js/plumeria/tree/main/examples/example-vite-react) shows how to use [`@plumeria/unplugin`](https://www.npmjs.com/package/@plumeria/unplugin) in Vite.\
It compiles styles into CSS via AST parsing, with HMR support.
`npx @plumeria/init` detects Vite and writes this setup for you; see [@plumeria/init](/docs/init). The rest of this page is the same setup by hand.
## Installation [#installation]
```sh title="Terminal"
npm i -D @plumeria/unplugin
```
```sh title="Terminal"
yarn add -D @plumeria/unplugin
```
```sh title="Terminal"
pnpm i -D @plumeria/unplugin
```
## Usage [#usage]
```ts title="vite.config.ts"
import { defineConfig } from 'vite';
import plumeria from '@plumeria/unplugin';
export default defineConfig({
plugins: [plumeria.vite()],
});
```
`plumeria.vite()` accepts an options object:
```ts title="vite.config.ts"
export default defineConfig({
plugins: [
plumeria.vite({
include: ['./src/**/*.{ts,tsx}'],
exclude: ['**/node_modules/**'],
styleProp: 'sx',
}),
],
});
```
* `include` — The path to the file to be converted.
* `exclude` — The path to the file to be excluded from conversion.
* `styleProp` — The JSX prop that carries styles. The default is `'classStyle'`.
These are the options a project usually sets. `devEmitToDisk` writes the stylesheet to disk in development, and `withoutLogicalProperties` / `withoutPhysicalProperties` reject one spelling of a property that carries both names, so the pair cannot be written; see [@plumeria/unplugin](/docs/api-reference/plugins/unplugin) for every option and its type.
## plumeria.d.ts [#plumeriadts]
`@plumeria/core` ships no prop declaration of its own, so name the styling prop your project compiles with.
For the default name (`classStyle`), reference the declaration that ships with the package:
```ts title="plumeria.d.ts"
///
```
If you set a custom `styleProp` (such as `'sx'`), declare the same name for TypeScript instead:
```ts title="plumeria.d.ts"
import type { Style } from '@plumeria/core';
declare global {
namespace React {
interface HTMLAttributes {
sx?: Style;
}
interface SVGAttributes {
sx?: Style;
}
}
}
```
The `styleProp` in `next.config.ts` and the property name in `plumeria.d.ts` must match. If they disagree, the prop type-checks but is never compiled away.