Quickstart

A small notes form with a Caps button, the Composer block and a status bead. Mount NoteComposer from any React root.

import { useState, type FormEvent } from "react";
import { Button } from "@fungi.computer/caps/components/button";
import { Status } from "@fungi.computer/caps/components/status";
import { Composer } from "@fungi.computer/caps/blocks/composer";
import "@fungi.computer/caps/styles.css";

export function NoteComposer() {
  const [draft, setDraft] = useState("");
  const [notes, setNotes] = useState<string[]>([]);

  function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const note = draft.trim();
    if (!note) return;
    setNotes((current) => [...current, note]);
    setDraft("");
  }

  return (
    <form onSubmit={onSubmit} className="flex flex-col gap-md p-lg">
      <Status
        label={`${notes.length} notes`}
        tone={notes.length > 0 ? "success" : "neutral"}
      />
      <Composer
        input={
          <input
            className="input join-item w-full"
            value={draft}
            onChange={(event) => setDraft(event.target.value)}
            aria-label="Note"
          />
        }
        action={
          <Button type="submit" size="sm" disabled={!draft.trim()}>
            Add
          </Button>
        }
      />
      <ul>
        {notes.map((note, index) => (
          <li key={index}>{note}</li>
        ))}
      </ul>
    </form>
  );
}

Set a theme on the page root, for example <html data-theme="mocha">. Without one, the page follows the reader’s light or dark setting.