Packages

Every Fancy UI package — UI surfaces with a live preview, headless backends with a one-line install. Related packages are grouped as one family; each tile opens its full page, with per-component demos.

64 packages37 listings199 componentsMIT licensed
ButtonlivebetaCardRK
Start here

Fancy Core

The stack every Fancy app starts from — the React primitives, the Inertia bridge (any Inertia backend, not just Laravel), server-state, a new-build detector, and the agent backbone that makes the whole UI agent-driveable.

react-fancyfancy-inertiafancy-queryfancy-app-updateagent-integrations
5 packages2Explore Fancy Core →

Surfaces

15

Rich, controlled UI humans and agents inhabit together — whiteboard, flow, sheets, slides, code, terminal, charts, maps, 3D — driven over MCP bridges, never DOM scraping.

Fancy 3D

TS

Engine-agnostic 3D — JSON-friendly Scene types and a pluggable <Canvas> with a built-in DOM/CSS-3D renderer (no WebGL dependency), plus optional Babylon.js and three.js adapters.

3 packages2Explore family →

fancy-artboard

TS

Figma-style design canvas for Human+ UX — a pan/zoom board of image / HTML / live-JSX frames grouped into sections, with focus mode, drag-reorder, sticky notes, and PNG/HTML export.

4 componentsExplore →

fancy-brand-icons

TS

Brand-icon addendum for react-fancy — your logos + curated CC0 third-party marks (GitHub, X, Slack, Stripe, …) layered on top of any active icon set, so bare <Icon name="github"/> resolves the brand mark. Zero runtime deps; tree-shakeable.

surfaceExplore →

Fancy CMS

Poly

The Stages document model — a PHP host + page renderer (node tree → HTML with island hydration) paired with a WYSIWYG React editor. Early-release beta.

2 packagesExplore family →
const x = 42;
// fancy-code

fancy-code

TS

Lightweight embedded code editor — custom engine, no Monaco / CodeMirror / Shiki.

3 componentsExplore →
- old line
+ new line

fancy-diff

TS

Human+ side-by-side document diff with hunk acceptance — a client-side, zero-dep diff engine or a git unified-diff datasource.

1 componentExplore →

fancy-echarts

TS

Typed React wrapper around Apache ECharts — every chart type from a single <EChart> component, lazy module registration, four built-in themes.

3 components1Explore →

Fancy Flow

Poly

Workflow graphs humans and agents author together — a headless topological engine plus an optional React Flow editor. The editor designs; the engine runs anywhere, including a PHP backend with queued durable runs.

2 packages3Explore family →

fancy-map

TS

Engine-agnostic Map — one <Map> API over OpenStreetMap (Leaflet) + Google Maps, live position tracking, and a Human+ MCP bridge for cohabited human/agent maps.

1 componentExplore →

fancy-screens

TS

Multi-screen application shell with cross-screen agent presence.

2 components1Explore →

fancy-sheets

TS

Full spreadsheet with formulas, multi-sheet workbooks, clipboard, CSV import/export.

2 components1Explore →

fancy-slides

TS

Presentation editor + web viewer — Google-Slides-style deck authoring with JSON-friendly schema, full keyboard viewer, and an agent bridge.

7 components1Explore →
$ fancy --help

Fancy Term

Poly

A controlled, themeable <Terminal> over xterm.js, plus the headless Node backend that owns the PTYs and the snapshot/replay persistence engine behind it.

2 packages1Explore family →

fancy-tui

TS

Ink components for Human+ terminal apps — consistent layout, controlled inputs, scrollback-safe conversations, and durable push + inbox MCP workflows.

52 components1Explore →
Ship ✨Review

fancy-whiteboard

TS

Transport-agnostic collaborative board — sticky notes, freeform pen, connectors, presence cursors.

6 componentsExplore →

Documents

5

Read and write real office files from an agent — xlsx, pptx, docx — plus the shared document and file cores they are built on.

DA

Dark Slide

Poly
PHPTS2 packages · one product

Headless pptx deck writer/reader — markdown headings, highlighted code, tables, gradients, and a high-fidelity reader.

FD

fancy-doc-commons

TS
$npm install @particle-academy/fancy-doc-commons

Shared pure core for the Fancy document/surface packages — the model an agent or human emits and edits. Flat node-tree + collab-safe fractional ordering, a typed op-spine contract (reduce + invert), an infinite-canvas primitive, and a surface-agnostic staged-write (accept/reject) model. Zero dependencies, no React.

FF

fancy-file-commons

TS
$npm install @particle-academy/fancy-file-commons

Shared pure core for the file-focused packages (editors / viewers / writers / diff surfaces) — the structured diff engine + model, git unified-diff parser, merge resolution, per-line gutter annotations, path helpers, and filename→language. Zero deps, no React; fancy-diff re-exports it and the fancy-code diff gutter runs on it.

HO

Holy Sheet

Poly
PHPTS2 packages · one product

Headless xlsx spreadsheet writer/reader with a formula engine — one Agent write / describe / lint API, mirrored across languages.

LA

Last Word

Poly
PHPTS2 packages · one product

Headless docx writer/reader on one JSON Doc model — headings, styled runs, lists, tables, code — with markdown bridges both ways.

Commerce & growth

5

Sell, gate, and grow — Stripe catalog, feature management and quotas, gamification, and multi-level referral engines.

$29
/month
$99
/month

Catalog + FMS

TS

Storefront + admin UI for subscriptions and metered features — pricing tables, a plan-comparison matrix, feature gating, and a plan/perks editor. Vendor the React block, or grab the Shop-n-Sub starter kit.

4 componentsExplore →
FA

Fancy MLM

Poly
PHPTSTS3 packages · one product

Multi-level referral / network-marketing engine — configurable unilevel / binary / matrix downlines from one CompensationPlan JSON, with identical rewards across languages and a React surface for trees and statements.

FA

Fancy Catalog

Poly
PHPTS2 packages · one product

Headless Stripe catalog — products / prices / plans + checkout — adapter-based with an injected Stripe client.

FA

Fancy Features

Poly
PHPTS2 packages · one product

Headless feature management — gate / registry / config / group strategies plus metered quotas. Owns the FeatureSource contract catalog plugs into.

LF

laravel-fun-lab

PHP
$composer require particle-academy/laravel-fun-lab

Analytics-driven gamification — XP, achievements, prizes, and leaderboards. Powers the sandbox's engagement economy.

Web platform

5

How your app meets the web and its crawlers — SEO on the first byte, well-known + agent-facing files, interaction analytics, verification, and installability.

FA

Fancy Heuristics

Poly
PHPTS2 packages · one product

End-user (not search-engine) optimization — human + agent interaction analytics: event ingestion, focus heatmaps, and session / actor rollups, with a browser collector.

Verified

fancy-pixel

TS

Embeddable Showcase verification badge + liveness/collection beacon — Badge / Mark / Beacon styles, placed or floating, Shadow-DOM isolated. Drops in via a <script> tag or mountPixel().

1 componentExplore →
FP

fancy-pwa

TS
$npm install @particle-academy/fancy-pwa

Installable + offline PWA layer — manifest, lean service worker, install/offline/update hooks, and a fancyPwa() Vite plugin. Framework-agnostic, SSR-safe.

FS

fancy-seo

PHP
$composer require particle-academy/fancy-seo

Server-rendered SEO + crawlability for Laravel + Inertia — per-route meta / Open Graph / Twitter / JSON-LD on the first byte, dynamic sitemap.xml / robots.txt / llms.txt, and per-page Markdown. The PHP baseline that pairs with @particle-academy/fancy-inertia's <Seo>.

FF

Fancy X-Files

Poly
PHPTSTS3 packages · one product

Well-known + agent-facing files from one declarative registry — robots.txt, security.txt, humans, llms, sitemap, AGENTS — with a leak-safe protect() guard, plus an admin UI to edit them.

Agents & tooling

6

The workbench — Git as an agent-driveable surface, MCP servers and relays, the source-vendoring CLI, and the shared plumbing underneath.

DM

docs-mcp

TS
$npm install @particle-academy/docs-mcp

MCP docs server — serves the Fancy UI documentation to agents over MCP, so an assistant can answer questions and pull usage straight from the source.

FA

fancy-auto-common

TS
$npm install @particle-academy/fancy-auto-common

Shared Human+ primitives — AgentActivity events, presence, undo stacks, and effect helpers. Low-level plumbing reused across the kit; usually installed transitively.

FC

fancy-cf-relay

TS
$npm install @particle-academy/fancy-cf-relay

CDN-safe browser relay channel for agent-integrations' RelayTransport. Adaptive SSE↔long-poll with Cloudflare detection, so the MCP relay survives a Cloudflare/HTTP-3 edge that resets long-lived SSE streams. Zero runtime deps.

FC

fancy-cli

TS
$npm install fancy-cli

Source-vendoring CLI — `npx fancy-cli@latest add <component>` copies component source from the registry into your project (the shadcn-style own-the-source path).

FA

Fancy Git

Poly
PHPTSTS9 packages · one product

Git as a first-class, agent-driveable surface — a headless engine with proposal-first mutations, normalized provider adapters for GitHub / GitLab / Bitbucket, and a React UI. Mirrored in PHP and Node.

MR

mcp-relay-client

Poly
$npm install mcp-relay-client

Super-lite, single-file MCP client (bash / Python / TS / Go) for connecting an agent to a session-based relay — drive any agent-integrations-hosted app (e.g. the Agent Playground) from your terminal. Download one file, or run the zero-install npx CLI; point it at a session URL.