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 card opens its full page, with per-component demos.

98 packages55 listings231 componentsMIT licensed
UI surfaces29 listings

React components you can preview right now — every card opens a page with a live demo and source.

ButtonlivebetaCardRK
Ship ✨Review
Show UI surfaces only
Backend & headless34 listings

PHP / Node packages that render nothing. One install line, a typed API, and MCP tools.

$composer require particle-academy/holy-sheet$npm install @particle-academy/fancy-query
Show Backend & headless only
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.

UI+ BackendReact

Surfaces

18 18 UI 3 backend

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

UI surfaceReact
F3

Fancy 3D

TS3 packages · one product

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 UI · 10 previews
Docs
UI surface
FA

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.

GitHub →
UI surface
GhStSl
FB

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.

GitHub →
UI+ BackendPHP · React
FC

Fancy CMS

Poly2 packages · one product

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

1 UI · 3 previews1 backend
Docs
UI surface
const x = 42;
// fancy-code
FC

fancy-code

TS

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

GitHub →
UI surface
- old line
+ new line
FD

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.

GitHub →
UI surface
FE

fancy-echarts

TS

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

GitHub →
UI+ BackendNode / TypeScript · PHP · Python
FF

Fancy Flow

Poly3 packages · one product

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.

1 UI · 6 previews2 backend
Docs
UI surface
FG

fancy-grid

TS

Data grid for Human+ UX -- TanStack Table (and optionally TanStack Virtual) under a controlled, JSON-serializable, agent-bridgeable Fancy surface. State is JSON and every element carries a stable handle, so an agent reads and writes the grid through the same surface a person sees rather than through the DOM. The engines stay PEERS: the grid never bundles them, so you pin the TanStack version.

GitHub →
UI surface
FM

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.

GitHub →
UI surface
FM

fancy-motion

TS

Timeline / animation primitives — a headless keyframe engine plus a React MotionStage + TimelineDock for scrubbing and orchestrating motion. (preview — 0.0.x)

GitHub →
UI surface
FS

fancy-screens

TS

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

GitHub →
UI surface
FS

fancy-sheets

TS

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

GitHub →
UI surface
FS

fancy-slides

TS

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

GitHub →
UI+ BackendReact · Node / TypeScript
$ fancy --help
FT

Fancy Term

Poly2 packages · one product

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

1 UI · 1 previews1 backend
Docs
UI surface
FT

fancy-trading-ui

TS

Trading surfaces -- order ticket, price ladder/DOM, book, depth, tape, blotter, positions, watchlist, alerts, and a session-aware candlestick / OHLC chart on lightweight-charts. Controlled, agent-bridgeable, and built around a safety floor a prop cannot switch off.

GitHub →
UI surface
? Pick a kit ›
❯ Human+ inbox
  Push workflow
FT

fancy-tui

TS

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

GitHub →
UI surface
Ship ✨Review
FW

fancy-whiteboard

TS

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

GitHub →

Documents

5 5 backend

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

Backend · renders no UIPHP · Python · Node / TypeScript
$Dark Slide
DS

Dark Slide

Poly3 packages · one product

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

3 backend
Docs
Backend · renders no UI
$npm install @particle-academy/fancy-doc-commons
FD

fancy-doc-commons

TS

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.

GitHub →
Backend · renders no UI
$npm install @particle-academy/fancy-file-commons
FF

fancy-file-commons

TS

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.

GitHub →
Backend · renders no UIPHP · Python · Node / TypeScript
$Holy Sheet
HS

Holy Sheet

Poly3 packages · one product

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

3 backend
Docs
Backend · renders no UIPHP · Python · Node / TypeScript
$Last Word
LW

Last Word

Poly3 packages · one product

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

3 backend
Docs

Commerce & growth

5 2 UI 4 backend

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

UI surface
$29
/month
$99
/month
C+

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.

Docs
UI+ BackendPHP · Node / TypeScript · React
+150 pts · L1
FM

Fancy MLM

Poly3 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.

1 UI · 3 previews2 backend
Docs
Backend · renders no UI
$npm install @particle-academy/fancy-trading
FT

fancy-trading

TS

HEADLESS plumbing for stock / futures / crypto / event trading apps -- market data, order and position models, decimal-safe maths. No UI: the chart, order ticket and depth surfaces are `fancy-trading-ui`. Deliberately unopinionated about how you build a strategy.

GitHub →
Backend · renders no UIPHP · Python · Node / TypeScript
$Fancy Catalog
FC

Fancy Catalog

Poly3 packages · one product

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

3 backend
Docs
Backend · renders no UI
$composer require particle-academy/laravel-fun-lab
LF

laravel-fun-lab

PHP

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

GitHub →

Web platform

16 6 UI 12 backend

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

UI surface
Module 3 · Lesson 2
CL

classroom

TS

The learner surface for laravel-courses: browse a curriculum, work through a course, sit a graded test, collect a certificate. This is what the Fancy UI Curriculum at /learn runs on.

GitHub →
Backend · renders no UI
$npm install @particle-academy/fancy-connector-core
FC

fancy-connector-core

TS

The connector runtime: typed delivery, failure classification (unreachable / refused / ambiguous / rejected), retries, and sandbox-vs-live selection. Every connector is built on it.

GitHub →
Backend · renders no UI
$npm install @particle-academy/fancy-connectors
FC

fancy-connectors

TS

Installable connectors for third-party APIs -- triggers, actions, sandbox endpoints where a provider offers one, and a faker for every connector regardless.

GitHub →
Backend · renders no UIPHP · Node / TypeScript
$Fancy Heuristics
FH

Fancy Heuristics

Poly2 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.

2 backend
Docs
UI+ BackendPHP · Node / TypeScript · React
Sign in with a passkey
FP

Fancy Passkeys

Poly3 packages · one product

Passkey (WebAuthn) sign-in as a drop-in capability — a mirrored PHP + Node backend speaking one wire contract, and React surfaces for signing in and managing credentials. No cryptography of our own: web-auth/webauthn-lib and @simplewebauthn/server do it, as peers.

1 UI · 3 previews2 backend
Docs
UI surface
Verified
FP

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().

GitHub →
Backend · renders no UI
$npm install @particle-academy/fancy-pwa
FP

fancy-pwa

TS

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

GitHub →
Backend · renders no UI
$composer require particle-academy/fancy-seo
FS

fancy-seo

PHP

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>.

GitHub →
UI+ BackendPHP · Node / TypeScript · React
# robots.txt
User-agent: *
Disallow: /admin
FX

Fancy X-Files

Poly3 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.

1 UI · 8 previews2 backend
Docs
UI surface
Senior EngineerApply
Design LeadApply
JB

job-board

TS

The React surface for laravel-jobs — a public board, employer posting management, and candidate applications. The UI is never the authorization: the backend gates deny-by-default, so assume every action a component renders will also be attempted directly against the API.

GitHub →
Backend · renders no UI
$composer require particle-academy/laravel-courses
LC

laravel-courses

PHP

Curriculums, courses, modules, lessons, tests, enrollments, attempts and certificates for Laravel. API-only — the host owns the user model and the UI. Writes are deny-by-default behind AuthorizesCourseAdmin; reading the catalogue and verifying a certificate stay public.

GitHub →
Backend · renders no UIPHP · Python · Node / TypeScript
$Fancy Features
FF

Fancy Features

Poly3 packages · one product

Headless feature and access gating for ANY app — gate / registry / config / group strategies plus metered quotas. Owns the FeatureSource contract; catalog plugs into it, not the other way round.

3 backend
Docs
Backend · renders no UI
$composer require particle-academy/laravel-jobs
LJ

laravel-jobs

PHP

Job postings and applications for Laravel. The host owns the user and employer models; two deny-by-default contracts mean removing a binding switches the feature off rather than opening it up. Publish denials carry a code and meta so your own UI can react.

GitHub →
Backend · renders no UIPHP
$Prism
PR

Prism

PHP9 packages · one product

The Laravel LLM layer the kit builds on, and what makes it an agent platform: durable agent sessions, MCP tools, memory, a guarded browser, sandboxed workspaces, Human+ presence, tracing, and the rest of the Perplexity API.

9 backend
Docs
Backend · renders no UI
$composer require particle-academy/teachers-aid
TA

teachers-aid

PHP

The TAC authoring agent: reads course material and PROPOSES curriculum, course and test changes. Propose-then-apply is structural — the tools hold no repository or connection, so there is no code path from a tool call to a write, and a prompt injection inside an uploaded handbook still cannot change anything. LLM-library agnostic behind one ChatDriver seam.

GitHub →
UI surface
Proposal · 4 changes
AcceptReject
TA

teachers-aid-ui

TS

The React surface for the TAC authoring agent — chat transcript, a composer with file drop for handbooks and decks, and the plan-review approval surface where a human turns a proposal into a change. Transport-agnostic: no router, no HTTP client.

GitHub →

Agents & tooling

10 2 UI 9 backend

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

Backend · renders no UI
$npm install @particle-academy/docs-mcp
DM

docs-mcp

TS

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.

GitHub →
Backend · renders no UI
$npm install @particle-academy/fancy-auto-common
FA

fancy-auto-common

TS

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

GitHub →
Backend · renders no UI
$npm install @particle-academy/fancy-cf-relay
FC

fancy-cf-relay

TS

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.

GitHub →
Backend · renders no UI
$npm install fancy-cli
FC

fancy-cli

TS

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).

GitHub →
Backend · renders no UI
$npm install @particle-academy/fancy-conformance
FC

fancy-conformance

Poly

Shared cross-language fixture tables, so parity between a PHP twin and its Node/Python siblings is a TEST RESULT rather than a claim in a README.

GitHub →
UI surface
FD

fancy-devtools

TS

Suite-aware React diagnostics — structured runtime problems, query and Human+ timelines, redacted exports, and one shared snapshot for humans and agents.

GitHub →
Backend · renders no UI
$composer require particle-academy/fancy-flow-mcp
FF

fancy-flow-mcp

PHP

A Laravel MCP server that lets an agent build fancy-flow workflows HEADLESSLY -- list node kinds, add and connect nodes, configure them, validate and export a WorkflowSchema, without a canvas. Wraps fancy-flow-php, so the graph an agent composes here is the same document <FlowEditor> opens and the same one the PHP, TypeScript and Python runtimes execute.

GitHub →
Backend · renders no UI
$npm install @particle-academy/fancy-flow-mcp-js
FF

fancy-flow-mcp-js

TS

The Node twin of fancy-flow-mcp -- an MCP server that lets an agent build fancy-flow workflows HEADLESSLY on a TypeScript host: list node kinds, add and connect nodes, configure them, validate and export a WorkflowSchema, without a canvas. Same 15 tools as the PHP twin, name for name, asserted by a test that reads them out of the PHP source rather than mirroring them.

GitHub →
UI+ BackendPHP · Node / TypeScript · React
feat/human-plus
+12
−3
FG

Fancy Git

Poly9 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.

1 UI · 8 previews8 backend
Docs
Backend · renders no UI
$npm install mcp-relay-client
MR

mcp-relay-client

Poly

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.

GitHub →