Quickstart

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

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

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

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

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

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

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