> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pictum.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# React

> Use Pictum icon, avatar, QR code, and placeholder interfaces with React.

## Installation

Install the React package with your preferred package manager.

<CodeGroup>
  ```bash npm theme={null}
  npm install @pictum/react
  ```

  ```bash pnpm theme={null}
  pnpm add @pictum/react
  ```

  ```bash bun theme={null}
  bun add @pictum/react
  ```

  ```bash yarn theme={null}
  yarn add @pictum/react
  ```
</CodeGroup>

## Icons

Render an icon with `Icon`, or use `icon()` when you need its URL or SVG markup outside JSX.

<CodeGroup>
  ```tsx Component theme={null}
  import { Icon } from "@pictum/react";

  export function Example() {
    return (
      <Icon
        name="devicon:react"
        aria-label="React"
        className="size-6"
      />
    );
  }
  ```

  ```ts Helper theme={null}
  import { icon } from "@pictum/react";

  // Generate the URL without making a request.
  const url = icon("devicon:react").url;

  // Fetch canonical SVG markup.
  const svg = await icon("devicon:react").svg();
  ```
</CodeGroup>

## Avatars

Render a deterministic profile image with `Avatar`, or use `avatar()` to pass the selected image URL to another service or retrieve its canonical SVG.

<CodeGroup>
  ```tsx Component theme={null}
  import { Avatar } from "@pictum/react";

  export function Example() {
    return (
      <Avatar
        seed="ada-lovelace"
        variant="gradient"
        format="webp"
        alt="Ada Lovelace"
        className="size-10"
      />
    );
  }
  ```

  ```ts Helper theme={null}
  import { avatar } from "@pictum/react";

  // Generate the URL without making a request.
  const url = avatar("ada-lovelace", {
    variant: "gradient",
    format: "webp",
  }).url;

  // Fetch canonical SVG markup.
  const svg = await avatar("ada-lovelace", {
    variant: "gradient",
  }).svg();
  ```
</CodeGroup>

## QR codes

Render scannable text or URLs with `QrCode`, or use `qrCode()` when you need the image URL or canonical SVG outside JSX.

<CodeGroup>
  ```tsx Component theme={null}
  import { QrCode } from "@pictum/react";

  export function Example() {
    return (
      <QrCode
        value="https://pictum.dev"
        format="svg"
        aria-label="Open Pictum"
        className="size-32"
      />
    );
  }
  ```

  ```ts Helper theme={null}
  import { qrCode } from "@pictum/react";

  // Generate the URL without making a request.
  const url = qrCode("https://pictum.dev", {
    format: "png",
  }).url;

  // Fetch canonical SVG markup.
  const svg = await qrCode("https://pictum.dev").svg();
  ```
</CodeGroup>

## Placeholders

Render square or custom-dimension images with `Placeholder`, or use `placeholder()` when you need the selected image URL or SVG markup outside JSX.

<CodeGroup>
  ```tsx Component theme={null}
  import { Placeholder } from "@pictum/react";

  export function Example() {
    return (
      <Placeholder
        size={320}
        format="webp"
        density={2}
        background="#ffffff"
        color="#6d28d9"
        text="Coming soon"
        alt="Coming soon"
      />
    );
  }
  ```

  ```ts Helper theme={null}
  import { placeholder } from "@pictum/react";

  // Generate a custom-dimension URL without making a request.
  const url = placeholder({
    width: 640,
    height: 360,
    format: "webp",
    density: 3,
    text: "Coming soon",
  }).url;

  // Fetch a square as canonical SVG markup.
  const svg = await placeholder({
    size: 320,
    text: "Coming soon",
  }).svg();
  ```
</CodeGroup>

Helpers return the selected representation URL immediately. Calling `.svg()` retrieves canonical SVG markup for the same asset.