Rough

TS

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

Box and underline

TSX

import { Rough } from "@fungi.computer/caps/components/rough";

export default function BoxAndUnderline() {
  return (
    <div className="flex flex-col gap-4 p-lg text-lg">
      <p>
        Check the <Rough mark="box">moisture level</Rough> every morning.
      </p>
      <p>
        Harvest when the <Rough mark="underline">cap edges curl</Rough>.
      </p>
    </div>
  );
}

Circle highlight bubble

TSX

import { Rough } from "@fungi.computer/caps/components/rough";

export default function CircleHighlightBubble() {
  return (
    <div className="flex flex-wrap items-center gap-6 p-lg text-lg">
      <Rough mark="circle">3 days</Rough>
      <Rough mark="highlight">85% humidity</Rough>
      <Rough mark="bubble" tail="left">
        Ready!
      </Rough>
    </div>
  );
}

Tone and seed

TSX

import { Rough } from "@fungi.computer/caps/components/rough";

export default function ToneAndSeed() {
  return (
    <div className="flex flex-wrap gap-6 p-lg text-lg">
      <Rough mark="box" tone="primary">
        Primary ink
      </Rough>
      <Rough mark="box" seed={3}>
        Seed 3
      </Rough>
      <Rough mark="box" seed={99}>
        Seed 99
      </Rough>
    </div>
  );
}

Props

RoughProps

Prop	Type	Description
mark	RoughMark	The mark: a box, underline, circle, highlight, speech bubble or line.
tone?	RoughTone	Theme ink (the default) or the primary accent.
seed?	number	Fixes the wobble, so the mark looks the same on every render.
weight?	number	Stroke width in CSS pixels.
roughness?	number	0 is a ruler, 3 is a scribble.
fill?	"none" | "solid" | "hachure"	Fill inside a box, circle or bubble.
tail?	"left" | "right" | "none"	For bubble: the lower corner its tail leaves from.
points?	string	For line: percent points in the box, e.g. 0,100 100,0.
animate?	boolean	Draw the mark in once, stroke by stroke, after delay. Skipped for reduced motion.
delay?	number	Seconds to wait before an animate mark draws in (default 0.2).
block?	boolean	Render as a block (div) instead of inline (span).

• markRoughMark

  The mark: a box, underline, circle, highlight, speech bubble or line.

• tone?RoughTone

  Theme ink (the default) or the primary accent.

• seed?number

  Fixes the wobble, so the mark looks the same on every render.

• weight?number

  Stroke width in CSS pixels.

• roughness?number

  0 is a ruler, 3 is a scribble.

• fill?"none" | "solid" | "hachure"

  Fill inside a box, circle or bubble.

• tail?"left" | "right" | "none"

  For bubble: the lower corner its tail leaves from.

• points?string

  For line: percent points in the box, e.g. 0,100 100,0.

• animate?boolean

  Draw the mark in once, stroke by stroke, after delay. Skipped for reduced motion.

• delay?number

  Seconds to wait before an animate mark draws in (default 0.2).

• block?boolean

  Render as a block (div) instead of inline (span).

Full types: API reference.