Developer Guide

Learn how to create and style components for inclusion in UI Kit React.

Style Variants

To style your component based on the props, you can use the cva function from the class-variance-authority package. This function allows you to define styles for different variants of your component and then apply them based on the props passed to the component.

Here is an example of how you can use cva to style a link component. This example assumes that the imported style sheets has .base, .danger, .primary, and .secondary classes. The base class will always be applied, and the other classes will be selectively applied based on the value of the color prop. For example, given <Link color="primary" />, the styles.primary class will be applied to the rendered element.

import { type VariantProps, csv } from "class-variance-authority";
import { type LinkProps as RACLinkProps } from "react-aria-components";

import styles from "./link.module.css";

const linkStyles = cva(styles.base, {
  variants: {
    color: {
      danger: styles.danger,
      primary: styles.primary,
      secondary: styles.secondary,
    },
  },
});

export type LinkVariantProps = VariantProps<typeof linkStyles>;

Be sure to define the LinkProps interface in the component file to include the custom props used for the style variants. This will allow the custom props to be picked up by the build process and included in the documentation.

// Continued from previous example...

export interface LinkProps extends RACLinkProps {
  /** Changes the color of the link to signal the intent of its action. */
  color?: LinkVariantProps["color"];
}