Monogram

TS

import { … } from "@fungi.computer/caps/components/monogram";

Identity

TSX

import { Monogram } from "@fungi.computer/caps/components/monogram";

export default function Identity() {
  return (
    <div className="flex items-center gap-2">
      <Monogram name="Spore" size="lg" />
      <span>Spore, your grow assistant</span>
    </div>
  );
}

Sizes and subjects

TSX

import { Monogram } from "@fungi.computer/caps/components/monogram";

export default function SizesAndSubjects() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Monogram name="Rowan" size="default" />
      <Monogram name="Sedge" size="lg" />
      <Monogram name="Bramble" size="xl" />
      <Monogram name="Grow Tent" subject="app" size="lg" />
    </div>
  );
}

Specimen

TSX

import { Monogram } from "@fungi.computer/caps/components/monogram";

export default function Specimen() {
  return (
    <div className="flex flex-wrap gap-3">
      <Monogram name="Lion's mane" variant="specimen" size="xl" />
      <Monogram name="Shiitake" variant="specimen" size="xl" />
      <Monogram name="Oyster" variant="specimen" size="xl" />
    </div>
  );
}

Props

MonogramProps

Prop	Type	Description
name	string	The name whose first letter is shown.
seed?	string	Stable identity that picks the tone; defaults to the name.
size?	"default" | "lg" | "xl"
subject?	"actor" | "app"
variant?	"initial" | "specimen"

• namestring

  The name whose first letter is shown.

• seed?string

  Stable identity that picks the tone; defaults to the name.

• size?"default" | "lg" | "xl"
• subject?"actor" | "app"
• variant?"initial" | "specimen"

Full types: API reference.