Styling

The React components ship unbranded. They inherit your page’s font and colors, so they look like your app from the start. Use one of three levels of control, depending on how much you want to change.

1. Inherit (default)

Import the structural stylesheet once:

import "@photon-rx/react/styles.css";

It sets layout only. Its rules have zero specificity, so your own CSS always wins.

2. Tune with CSS variables

:root {
  --prx-accent: #4f46e5;
  --prx-on-accent: #ffffff;
  --prx-radius: 0.5rem;
  --prx-surface: #ffffff;
  --prx-border: #e5e7eb;
}

The stylesheet also reads --prx-success, --prx-warning, --prx-critical and --prx-info for status colors.

3. Use your own components

The cards draw everything through a small set of building blocks: Stack, Card, Button, Input, Select, Alert, Badge and a few more. Map any of them to your design system’s components with components. The ones you leave out fall back to the defaults.

import { PhotonProvider } from "@photon-rx/react";
import { Button, Input } from "./design-system";

<PhotonProvider
  clientId="YOUR_CLIENT_ID"
  environment="neutron"
  components={{
    Button: ({ variant, loading, ...props }) => <Button kind={variant} busy={loading} {...props} />,
    Input: (props) => <Input {...props} />,
  }}
>

The PhotonComponents type lists every building block and its props.

Tailwind

If your app uses Tailwind, use the stock Tailwind set:

import { tailwindComponents } from "@photon-rx/react/tailwind";

<PhotonProvider clientId="YOUR_CLIENT_ID" environment="neutron" components={tailwindComponents}>

These are class strings only, using the default theme. Add the package to Tailwind’s sources so the classes are generated:

@source "../node_modules/@photon-rx/react/dist";

Prescribe

App

Embed

1. Inherit (default)

2. Tune with CSS variables

3. Use your own components

Tailwind

​1. Inherit (default)

​2. Tune with CSS variables

​3. Use your own components

​Tailwind

1. Inherit (default)

2. Tune with CSS variables

3. Use your own components

Tailwind