Caps

Accessible, themed React components and blocks for app interfaces: buttons, forms, dialogs, menus, chat and game HUD pieces.

Quickstart API reference

@fungi.computer/caps
v0.4.0
MIT

Fastest path

Install

Add it to your project with npm, pnpm, Yarn or Bun.

npm install @fungi.computer/caps react react-dom @tanstack/react-form effect

Compose a save bar

Caps parts are plain React components. This renders a status bead and a button to HTML; in an app, mount it and load the Caps stylesheet once.

import { renderToStaticMarkup } from "react-dom/server";
import { Button } from "@fungi.computer/caps/components/button";
import { Status } from "@fungi.computer/caps/components/status";

function SaveBar({ saved }: { saved: boolean }) {
  return (
    <div className="flex items-center gap-md">
      <Status
        label={saved ? "Saved" : "Unsaved"}
        tone={saved ? "success" : "warning"}
      />
      <Button size="sm" disabled={saved}>
        Save
      </Button>
    </div>
  );
}

// In an app, import "@fungi.computer/caps/styles.css" once and mount <SaveBar />.
console.log(renderToStaticMarkup(<SaveBar saved={false} />));