🐼 PandaCSS preset for React Aria Components

A 🐼 PandaCSS preset for React Aria Components inspired by the React Aria Components TailwindCSS plugin

Installation

npm install --save-dev pandacss-preset-react-aria-components

pnpm add -D pandacss-preset-react-aria-components

yarn add -D pandacss-preset-react-aria-components

bun add -D pandacss-preset-react-aria-components

Usage

Add the preset to your PandaCSS configuration (panda.config.ts)

// file: panda.config.ts
import { defineConfig } from "@pandacss/dev";

// Import the preset. The name can be anything you want
import { RACPreset } from "pandacss-preset-react-aria-components";

export default defineConfig({
  presets: [
    RACPreset(),
    // Re-add the panda presets if you want to keep
    // the default keyframes, breakpoints, tokens
    // and textStyles provided by PandaCSS
    "@pandacss/dev/presets",
  ],
});

Now you get access access to all new conditions provided by the plugin. It does not override any existing conditions but alters the default to be more specific for "React Aria" components.

// file: Tooltip.tsx
import { Tooltip as RACTooltip, OverlayArrow, type TooltipProps } from "react-aria-components";
import { css } from "../../styled-system/css";

const styles = css({
  bgColor: "slate.700",
  _placementBottom: {
    backgroundColor: "slate.700",
  },
  _placementTop: {
    backgroundColor: "slate.700",
  },
  _groupPressed: {
    backgroundColor: "slate.800",
  },
});

export function Tooltip({ children, ...props }: TooltipProps) {
  return (
    <RACTooltip data-group {...props} offset={10} className={styles}>
      <OverlayArrow>
        <svg
          width={8}
          height={8}
          viewBox="0 0 8 8"
          className={css({
            fill: "slate.700",
            _dark: { fill: "slate.600", stroke: "white/10" },
            stroke: "gray.800",
          })}
        >
          <path d="M0 0 L4 4 L8 0" />
        </svg>
      </OverlayArrow>
      {children}
    </RACTooltip>
  );
}

Attributions

• Chakra team for creating 🐼 PandaCSS
• React Aria Components team for creating the components
• PandaCSS typography plugin team for the plugin boilerplate