pandacss-react-aria-components

A Panda preset for React Aria Components (RAC) to make styling states of components easier, with autocompleting conditions courtesy of Panda.

Installation

1npm i -D pandacss-react-aria-components
2# or
3yarn add -D pandacss-react-aria-components
4# or
5pnpm add -D pandacss-react-aria-components

Usage

Add the preset to your panda.config.js file.

1import { defineConfig } from "@pandacss/dev";
2import racPreset from "pandacss-react-aria-components";
3
4export default defineConfig({
5  presets: [racPreset()],
6});

With the preset added, you can now access all states easily.

1<div className={css({
2  _selected: {
3    background: "blue.500"
4  },
5  _disabled: {
6    background: "gray.100"
7  }
8})}>

Options

1// default config
2export default defineConfig({
3  presets: [
4    racPreset({
5      includePandaPresetBase: true,
6      prefix: "",
7      includeCombinators: true,
8    }),
9  ],
10});

Panda Preset Base (includePandaPresetBase)

By default, Panda provides conditions of their own within @pandacss/preset-base that overlap with RAC. These conditions can be merged gracefully with RAC, applying conditionally based on whether the element belongs to a RAC component.

Prefix (prefix)

Assign a prefix for the conditions. This will disable merging with @pandacss/preset-base conditions as it is no longer necessary.

Combinators (includeCombinators)

Add new variants for Tailwind-like group and peer combinators, such as _groupFocusWithin and _peerSelected. @pandacss/preset-base provides a few that won't be overridden to support RAC if this is set to false.

Acknowledgements

• tailwindcss-react-aria-components - forms the basis of this project
• @pandacss/preset-base - source of conditions provided by the preset

License

BSD Zero Clause License

Please note the other licenses present within the NOTICE file.