React

SSR CSR

Installation

Install the React 19.2+ package with your preferred package manager.

npm install @pictum/react

pnpm add @pictum/react

bun add @pictum/react

yarn add @pictum/react

Agent skill

Install the React integration skill for coding agents that support Agent Skills:

npx skills add usepictum/skills@react

Icons

Render an icon with Icon.

import { Icon } from "@pictum/react";

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

import { useIcon } from "@pictum/react";

export function Example() {
  const asset = useIcon("devicon:react");

  return <img src={asset.url} alt="React" className="size-6" />;
}

Icon fetches and caches canonical SVG markup, then renders it inline. It contains its own Suspense boundary while that request is pending, allowing streaming SSR to emit the resolved SVG without a caller-provided boundary.

Avatars

Render a generated avatar or portrait with Avatar.

import { Avatar } from "@pictum/react";

export function Example() {
  return (
    <Avatar
      seed="customer-123"
      variant="portrait"
      gender="female"
      format="webp"
      size={256}
      alt="Customer"
      className="size-10"
    />
  );
}

import { useAvatar } from "@pictum/react";

export function Example() {
  const asset = useAvatar("customer-123", {
    variant: "monogram",
  });

  return <img src={asset.url} alt="Customer" className="size-10" />;
}

QR codes

Render scannable text or URLs with QrCode.

import { QrCode } from "@pictum/react";

export function Example() {
  return (
    <QrCode
      value="https://pictum.dev"
      format="svg"
      quietZone={false}
      foreground="#4c1d95ff"
      background="#ede9fe"
      aria-label="Open Pictum"
      className="size-32"
    />
  );
}

import { useQrCode } from "@pictum/react";

export function Example() {
  const asset = useQrCode("https://pictum.dev", {
    format: "svg",
    quietZone: false,
    foreground: "#4c1d95ff",
    background: "#ede9fe",
  });

  return <img src={asset.url} alt="Open Pictum" className="size-32" />;
}

Placeholders

Render square or custom-dimension images with Placeholder.

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"
    />
  );
}

import { usePlaceholder } from "@pictum/react";

export function Example() {
  const asset = usePlaceholder({
    size: 320,
    format: "webp",
    density: 2,
    text: "Coming soon",
  });

  return <img src={asset.url} alt="Coming soon" />;
}

Hooks return an asset immediately. Reading .url makes no request; .svg() fetches canonical SVG markup and is unavailable for portrait avatars.

Custom deployment

You do not need a provider to use Pictum’s production API. Components and hooks work immediately after installation. Only add PictumProvider when a subtree should use another Pictum deployment:

import { PictumProvider } from "@pictum/react";

export function App() {
  return (
    <PictumProvider options={{ baseUrl: "https://assets.example.com/v1" }}>
      <Dashboard />
    </PictumProvider>
  );
}

Pass options={{ baseUrl }} to one component or pass the options to a use* hook to override the provider.

Getting started

Assets

Integrations

Reference

Installation

Agent skill

Icons

Avatars

QR codes

Placeholders

Custom deployment

​Installation

​Agent skill

​Icons

​Avatars

​QR codes

​Placeholders

​Custom deployment

Installation

Agent skill

Icons

Avatars

QR codes

Placeholders

Custom deployment