> ## 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.

# Quickstart

> Add your first Pictum assets with React.

This quickstart uses React. If you use another framework or language, choose its page from the Integrations section.

<Steps>
  <Step title="Install Pictum">
    Add 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>
  </Step>

  <Step title="Render an icon">
    Import `Icon` and identify an icon with its collection and name.

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

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

  <Step title="Render an avatar">
    Import `Avatar`, then choose a seed, style, and output format.

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

  <Step title="Render a QR code">
    Import `QrCode` and provide the text or URL to encode.

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

  <Step title="Render a placeholder">
    Import `Placeholder` and provide a square size. Use width and height when you need a custom aspect ratio.

    ```tsx 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"
        />
      );
    }
    ```
  </Step>
</Steps>

<Check>
  Your application now renders icons, deterministic avatars, QR codes, and placeholders through Pictum components.
</Check>

## Other integrations

Use the same asset concepts with [Vue](/integrations/vue), [Laravel](/integrations/laravel), [Svelte](/integrations/svelte), [Astro](/integrations/astro), [PHP](/integrations/php), or [Web Components](/integrations/web-components).

## Next steps

* Learn how to [choose and render icons](/guides/icons).
* Choose an [avatar style and format](/guides/avatars).
* Create and configure [QR codes](/guides/qr-codes).
* Create custom-size [placeholders](/guides/placeholders).
* Review the [OpenAPI reference](/api-reference/overview) for direct HTTP access.