# @pandacss/eslint-plugin

> ESLint rules for Panda CSS

Latest version **0.3.2** (published 2026-03-09) · MIT license · 18.7K weekly downloads

## Install

```sh
npm install @pandacss/eslint-plugin
pnpm add @pandacss/eslint-plugin
yarn add @pandacss/eslint-plugin
bun add @pandacss/eslint-plugin
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: no vulnerabilities; high maintenance score.

Warnings: no types; no esm support; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.3.2 |
| Published | 2026-03-09 |
| First published | 2024-01-27 |
| Weekly downloads | 18.7K |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6197 |
| Author | Segun Adebayo <joseshegs@gmail.com> |
| Maintainers | segunadebayo |
| Keywords | eslint, eslintplugin, eslint-plugin, panda, pandacss, css-in-js |

## Links

- npm: https://www.npmjs.com/package/@pandacss/eslint-plugin
- Repository: https://github.com/chakra-ui/panda
- Homepage: https://panda-css.com
- npm.io page: https://npm.io/package/@pandacss/eslint-plugin

## Alternatives

- [eslint-plugin-sonarjs](https://npm.io/package/eslint-plugin-sonarjs.md) — 2.9M weekly downloads
- [eslint-config-expo](https://npm.io/package/eslint-config-expo.md) — 1.5M weekly downloads
- [@matter/protocol](https://npm.io/package/@matter/protocol.md) — 63.5K weekly downloads
- [@eventcatalog/linter](https://npm.io/package/@eventcatalog/linter.md) — 24.8K weekly downloads
- [@inrupt/eslint-config-base](https://npm.io/package/@inrupt/eslint-config-base.md) — 4.5K weekly downloads

## Recent versions

- 0.3.2 (latest) — 2026-03-09
- 2.0.0-beta.20 (beta) — 2026-09-29
- 0.0.0-dev-20260309061924 (dev) — 2026-03-09
- 2.0.0-beta.19 — 2026-09-27
- 2.0.0-beta.18 — 2026-09-17
- 2.0.0-beta.17 — 2026-09-11
- 2.0.0-beta.16 — 2026-09-08
- 2.0.0-beta.15 — 2026-08-28
- 2.0.0-beta.14 — 2026-08-15
- 2.0.0-beta.13 — 2026-08-11
- 2.0.0-beta.12 — 2026-08-03
- 2.0.0-beta.11 — 2026-07-24
- 2.0.0-beta.10 — 2026-07-23
- 2.0.0-beta.9 — 2026-07-17
- 2.0.0-beta.8 — 2026-07-01
- … 111 more at https://npm.io/package/@pandacss/eslint-plugin/versions

## README

![Write typesafe styles with Panda](.github/assets/banner.png 'Write typesafe styles with Panda')

<p align="center">
  <br/>
  <a href="https://panda-css.com">Panda</a> is a universal styling solution for the modern web &mdash;
  <br/>
  build time, type safe, and scalable CSS-in-JS
  <br/><br/>
  <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/%40pandacss%2Fdev"> <img alt="NPM Version" src="https://img.shields.io/npm/v/%40pandacss%2Fdev"> <img alt="X (formerly Twitter) Follow" src="https://img.shields.io/twitter/follow/panda__css">
  
  <br/><br/>
</p>

## Features

- ⚡️ Write style objects or style props, extract them at build time
- ✨ Modern CSS output — cascade layers `@layer`, css variables and more
- 🦄 Works with most JavaScript frameworks
- 🚀 Recipes and Variants - Just like Stitches™️ ✨
- 🎨 High-level design tokens support for simultaneous themes
- 💪 Type-safe styles and autocomplete (via codegen)

<br/>

---

<p align="center">
<b>
🐼 Get a taste of Panda. Try it out for yourself in&nbsp;
 <a href="https://stackblitz.com/edit/vitejs-vite-lfwyue?file=src%2FApp.tsx&terminal=dev">StackBlitz</a>
</b>
</p>

---

<br/>

## 🐼 Panda v2

Panda v2 rewrites the compiler in Rust on the Oxc engine. Upgrading from v1? Follow the
**[upgrade guide](https://panda-css.com/docs/get-started/upgrading-to-v2)**.

## Documentation

Visit our [official documentation](https://panda-css.com/).

## Install

The **recommended** way to install the latest version of Panda is by running the command below:

```bash
npm i -D @pandacss/dev
```

To scaffold the panda config and postcss

```bash
npx panda init -p
```

Setup and import the entry CSS file

```css
@layer reset, base, tokens, recipes, utilities;
```

```jsx
import 'path/to/entry.css'
```

Start the dev server of your project

```bash
npm run dev
```

Start using panda

```jsx
import { css } from '../styled-system/css'
import { stack, vstack, hstack } from '../styled-system/patterns'

function Example() {
  return (
    <div>
      <div className={hstack({ gap: '30px', color: 'pink.300' })}>Box 1</div>
      <div className={css({ fontSize: 'lg', color: 'red.400' })}>Box 2</div>
    </div>
  )
}
```

## Directory Structure

| Package                                       | Description                                                 |
| --------------------------------------------- | ----------------------------------------------------------- |
| [cli](packages/cli)                           | CLI package installed by the end user                       |
| [core](packages/core)                         | Contains core features of Panda (utility, recipes, etc)     |
| [config](packages/config)                     | Contains functions for reading and merging the panda config |
| [extractor](packages/extractor)               | Contains code for fast AST parsing and scanning             |
| [generator](packages/generator)               | Contains codegen artifacts (js, css, jsx)                   |
| [parser](packages/parser)                     | Contains code for parsing a source code                     |
| [is-valid-prop](packages/is-valid-prop)       | Contains code for checking if a prop is a valid css prop    |
| [node](packages/node)                         | Contains the Node.js API of Panda's features                |
| [token-dictionary](packages/token-dictionary) | Contains code used to process tokens and semantic tokens    |
| [shared](packages/shared)                     | Contains shared TS functions                                |

## Contributing

Feel like contributing? That's awesome! We have a
[contributing guide](https://github.com/chakra-ui/panda/blob/main/CONTRIBUTING.md) to help guide you.

### Want to help improve the docs?

Our docsite lives in the [monorepo](./website/pages/docs/).

If you're interested in contributing to the documentation, check out the
[contributing guide](https://github.com/chakra-ui/panda/blob/main/CONTRIBUTING.md).

## Support

Having trouble? Get help in the official [Panda Discord](https://discord.gg/VQrkpsgSx7).

## Acknowledgement

The development of Panda was only possible due to the inspiration and ideas from these amazing projects.

- [Chakra UI](https://chakra-ui.com/) - where it all started
- [Vanilla Extract](https://vanilla-extract.style/) - for inspiring the utilities API
- [Stitches](https://stitches.dev/) - for inspiring the recipes and variants API
- [Tailwind CSS](https://tailwindcss.com/) - for inspiring the JIT compiler and strategy
- [Class Variance Authority](https://cva.style/) - for inspiring the `cva` name
- [Styled System](https://github.com/styled-system/styled-system) - for the initial idea of Styled Props
- [Linaria](https://linaria.dev/) - for inspiring the initial atomic css strategy
- [Uno CSS](https://unocss.dev) - for inspiring the studio and astro integration
- [Goober](https://goober.rocks/) - for tiny and performant js functions in template literal styles

## License

MIT License © 2023-Present [Segun Adebayo](https://github.com/segunadebayo)

---
_Source: https://npm.io/package/@pandacss/eslint-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._