Skip to content
Install

Install

Product-neutral React primitives and blocks for Fungi interfaces

For a published npm release:

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

pnpm, Yarn and Bun work the same way.

Bring your own react, react-dom, @tanstack/react-form, effect. @fungi.computer/caps lists them as peer dependencies so your app keeps one copy.

  • @fungi.computer/caps/components/copy-field
  • @fungi.computer/caps/components/technonomicon
  • @fungi.computer/caps/components/field-guide
  • @fungi.computer/caps/enhance/sketch
  • @fungi.computer/caps/enhance/cigarette-card
  • @fungi.computer/caps/components/wizard
  • @fungi.computer/caps/components/surface
  • @fungi.computer/caps/components/rough
  • @fungi.computer/caps/components/rough-drawing
  • @fungi.computer/caps/components/resize-handle
  • @fungi.computer/caps/components/code-input
  • @fungi.computer/caps/components/presence
  • @fungi.computer/caps/components/generation-frame
  • @fungi.computer/caps/components/send-action
  • @fungi.computer/caps/components/toaster
  • @fungi.computer/caps/components/scroll-area
  • @fungi.computer/caps/lib/cn
  • @fungi.computer/caps/lib/format-money
  • @fungi.computer/caps/lib/seed-hash
  • @fungi.computer/caps/lib/reorder-motion
  • @fungi.computer/caps/components/button
  • @fungi.computer/caps/components/action-row
  • @fungi.computer/caps/components/cover-pattern
  • @fungi.computer/caps/components/chat-bubble
  • @fungi.computer/caps/components/icon-button
  • @fungi.computer/caps/components/window
  • @fungi.computer/caps/components/keycap
  • @fungi.computer/caps/components/pixel-number
  • @fungi.computer/caps/components/item-grid
  • @fungi.computer/caps/components/game-feedback
  • @fungi.computer/caps/molecules/store-card
  • @fungi.computer/caps/molecules/price-tag
  • @fungi.computer/caps/components/game-hud
  • @fungi.computer/caps/components/input
  • @fungi.computer/caps/components/textarea
  • @fungi.computer/caps/components/label
  • @fungi.computer/caps/components/field
  • @fungi.computer/caps/components/dialog
  • @fungi.computer/caps/components/combobox
  • @fungi.computer/caps/components/tabs
  • @fungi.computer/caps/components/listbox
  • @fungi.computer/caps/components/dropdown-menu
  • @fungi.computer/caps/components/popover
  • @fungi.computer/caps/components/tooltip
  • @fungi.computer/caps/components/input-group
  • @fungi.computer/caps/components/select
  • @fungi.computer/caps/components/slider
  • @fungi.computer/caps/components/checkbox
  • @fungi.computer/caps/components/radio-group
  • @fungi.computer/caps/components/switch
  • @fungi.computer/caps/components/card
  • @fungi.computer/caps/components/trading-card
  • @fungi.computer/caps/components/separator
  • @fungi.computer/caps/components/visually-hidden
  • @fungi.computer/caps/components/prose
  • @fungi.computer/caps/components/markdown
  • @fungi.computer/caps/components/badge
  • @fungi.computer/caps/components/alert
  • @fungi.computer/caps/components/status
  • @fungi.computer/caps/components/inline-code
  • @fungi.computer/caps/components/navigation-rail
  • @fungi.computer/caps/components/disclosure
  • @fungi.computer/caps/components/diff-view
  • @fungi.computer/caps/components/scroll-to-bottom-blob
  • @fungi.computer/caps/components/count-badge
  • @fungi.computer/caps/components/monogram
  • @fungi.computer/caps/components/progress
  • @fungi.computer/caps/components/stat
  • @fungi.computer/caps/components/quota-meter
  • @fungi.computer/caps/components/data-list
  • @fungi.computer/caps/components/loader
  • @fungi.computer/caps/components/skeleton
  • @fungi.computer/caps/blocks/mosaic
  • @fungi.computer/caps/blocks/app-bar
  • @fungi.computer/caps/blocks/spec-sheet
  • @fungi.computer/caps/blocks/faq-chat
  • @fungi.computer/caps/blocks/composer
  • @fungi.computer/caps/blocks/permission-grid
  • @fungi.computer/caps/blocks/upload-queue
  • @fungi.computer/caps/blocks/command-menu
  • @fungi.computer/caps/blocks/resource-select
  • @fungi.computer/caps/blocks/async-state
  • @fungi.computer/caps/blocks/loading-state
  • @fungi.computer/caps/blocks/empty-state
  • @fungi.computer/caps/blocks/release-tag
  • @fungi.computer/caps/blocks/result-state
  • @fungi.computer/caps/blocks/section-card
  • @fungi.computer/caps/blocks/launcher-grid
  • @fungi.computer/caps/blocks/pricing-card
  • @fungi.computer/caps/blocks/card-grid
  • @fungi.computer/caps/blocks/section-heading
  • @fungi.computer/caps/blocks/listing-detail
  • @fungi.computer/caps/lib/ime
  • @fungi.computer/caps/blocks/app-status-bar
  • @fungi.computer/caps/blocks/status-tray
  • @fungi.computer/caps/lib/motion
  • @fungi.computer/caps/components/icon-checkbox
  • @fungi.computer/caps/components/icon-lamp
  • @fungi.computer/caps/components/icon-radio
  • @fungi.computer/caps/lib/motion-spring
  • @fungi.computer/caps/form
  • @fungi.computer/caps/components/overlay-root
  • @fungi.computer/caps/blocks/game-share-card
  • @fungi.computer/caps/components/activity-line
  • @fungi.computer/caps/components/tool-call-chip
  • @fungi.computer/caps/components/hold-button
  • @fungi.computer/caps/components/undo-action
  • @fungi.computer/caps/components/undo-toast
  • @fungi.computer/caps/lib/tanstack-highlight
  • @fungi.computer/caps/components/confirm-action
  • @fungi.computer/caps/tailwind.css
  • @fungi.computer/caps/styles.css
  • @fungi.computer/caps/fonts.css
  • @fungi.computer/caps/fonts-sans.css
  • @fungi.computer/caps/fonts-display.css
  • @fungi.computer/caps/fonts-mono.css

Installing @fungi.computer/caps also installs @base-ui/react, @fungi.computer/stipe, @radix-ui/react-slot, @tailwindcss/typography, @tanstack/highlight, @tanstack/markdown, animejs, class-variance-authority, cn, gsap, lucide-react, roughjs, sonner, tailwindcss, zod.

TERMINAL
npm install @fungi.computer/caps react react-dom

Caps works with React 18 or 19 and ships as ESM. It brings @fungi.computer/stipe along as a dependency.

There is no root import. Import each component from its own subpath, for example @fungi.computer/caps/components/button or @fungi.computer/caps/blocks/composer. The exports map in package.json is the complete list.

Pick one stylesheet route:

  • @fungi.computer/caps/styles.css is precompiled CSS with Stipe’s themes and every class Caps uses. Import it once in your app entry. You do not need Tailwind for this route.
  • @fungi.computer/caps/tailwind.css is the Tailwind v4 source, for hosts that compile Tailwind themselves and want Caps classes and their own utilities in one build. Import it from your main stylesheet and point Tailwind at the compiled components, for example @source "../node_modules/@fungi.computer/caps/dist";.

With an asset bundler such as Vite, also import @fungi.computer/caps/fonts.css to load the bundled Nunito, Maple Mono and display fonts.