A Panda preset for React Aria Components
npm install pandacss-react-aria-componentsA Panda preset for React Aria Components (RAC) to make styling states of components easier, with autocompleting conditions courtesy of Panda.
``bash`
npm i -D pandacss-react-aria-componentsor
yarn add -D pandacss-react-aria-componentsor
pnpm add -D pandacss-react-aria-components
Add the preset to your panda.config.js file.
`js
import { defineConfig } from "@pandacss/dev";
import racPreset from "pandacss-react-aria-components";
export default defineConfig({
presets: [racPreset()],
});
`
With the preset added, you can now access all states easily.
`jsx`
_selected: {
background: "blue.500"
},
_disabled: {
background: "gray.100"
}
})}>
`js`
// default config
export default defineConfig({
presets: [
racPreset({
includePandaPresetBase: true,
prefix: "",
includeCombinators: true,
}),
],
});
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.
Assign a prefix for the conditions. This will disable merging with @pandacss/preset-base conditions as it is no longer necessary.
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`.
- tailwindcss-react-aria-components - forms the basis of this project
- @pandacss/preset-base - source of conditions provided by the preset
BSD Zero Clause License
Please note the other licenses present within the NOTICE file.