Signature

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add signature

Usage#

import { Signature } from "@/components/ui/signature"

export function Example() {
  return (
    <Signature viewBox="0 0 166 70" aria-label="The Atelier team">
      <path d="M2 55.7C15 43.7 …" />
      <path d="M21.5 33.7C36.2 30.7 …" />
    </Signature>
  )
}

One <path> per pen stroke, in the order they were written: the word, the bar across the t, the dot on the i, the underline. The pen is the component's, so a path needs nothing but its d; ink, weight and round ends override whatever an SVG export wrote on it.

Draw your own#

Sign the pad, pick a speed and a size, and the Signature beside it writes your hand back. Every stroke you add plays the whole signature again, and the snippet under it is that exact drawing, ready to paste. Clear the pad to start from a blank page.

<Signature viewBox="47.2 34.1 197.9 126.4" aria-label="Your name">
  <path d="M51.2 119.7C67.2 94.1 82.4 58.9 92.8 42.9C95.5 38.1 98.4 39.7 96.8 46.1C94.4 62.1 92 84.5 93.6 97.3C102.4 81.3 112.8 58.9 122.7 44.5C125.6 39.7 128.3 41.3 126.7 47.7C120.8 71.7 114.4 97.3 112.8 116.5C112.8 122.9 121.6 119.7 128.8 110.1C136 100.5 144 94.1 146.7 95.7C141.1 92.5 129.6 100.5 128.3 111.7C127.7 121.3 137.9 118.1 146.4 103.7C144.8 110.1 143.5 114.9 146.2 117.3C148.8 119.7 154.7 114.9 159.5 108.5C162.4 103.7 160 113.3 164 116.5C168 119.7 175.2 110.1 180.8 94.1C176 113.3 170.4 135.7 162.4 148.5C157.3 156.5 149.6 154.9 153.6 145.3C157.6 135.7 171.2 126.1 183.2 116.5C188.8 106.9 197.6 97.3 202.7 95.7C198.7 92.5 187.2 100.5 185.9 111.7C185.3 121.3 195.5 118.1 202.4 103.7C200.8 110.1 199.5 114.9 202.2 117.3C206.4 119.7 216 113.3 224.8 103.7" />
  <path d="M56.8 135.7C106.4 129.3 187.2 126.1 241.1 114.9" />
</Signature>

Speeds#

The whole signature takes the same time at a given speed however long the hand is, each stroke getting its share by length, so the pen keeps one pace and a short dot never crawls. base is a person signing without hurry; fast is for a small mark that should not hold up the page; slow is for a hero moment where the writing is the show. delay holds the pen for that many ms once the signature is on screen, so it can wait for whatever enters before it.

Sizes#

size sets the height and the nib together: a small signature writes with a finer pen, so it keeps the weight of handwriting instead of turning into a marker line. The width follows the drawing. For any other height, pass an h-* class; the nib keeps its weight on screen however far the drawing is scaled.

In a testimonial#

The signature is an image with a name, so it drops into any stack: between a Testimonial's quote and its byline, under a founder's letter, or as the last line of a Hero's sign-off. It hugs its drawing and follows its parent's alignment, so it sits left in a left-aligned card and centred in a centred one.

Already signed#

static renders the finished signature with no writing: a signed document in a list, a receipt, anywhere the moment of signing has passed. It is also what everyone sees under prefers-reduced-motion, with or without the prop.

API reference#

FAQ#