119 small packages covering the parts every real app needs and nobody wants to write twice — data grids, spreadsheets, workflow engines, xlsx/pptx/docx writers, Stripe catalogs, feature gating. Install one or take the whole stack; many server capabilities ship for PHP and Node. Agent-friendly throughout, so you can hand the boring half over and stay in flow.
36 small packages. Lift any one out.
Fancy UI is not a monolith. Each layer ships independently to npm and composes with the rest. Pick the ones you need — most apps reach for two or three.
rF
react-fancy
94 comps
Tailwind v4 + React component library — 94 components.
Wb
fancy-whiteboard
6 comps
Transport-agnostic collaborative board — sticky notes, freeform pen, connectors, presence cursors.
Ab
fancy-artboard
4 comps
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.
→
fancy-flow
6 comps
Headless workflow engine + an optional React Flow editor — built-in trigger, logic, data, AI, human-in-the-loop and terminal nodes, a topological executor, and a FlowRunnerUx flow→UX bridge. The editor designs graphs; `/engine` runs them with zero React on a server, worker, or CLI (runtime twins: fancy-flow-php, fancy-flow-py).
fx
fancy-sheets
2 comps
Full spreadsheet with formulas, multi-sheet workbooks, clipboard, CSV import/export.
FA
@particle-academy/fancy-docs
2 comps
A last-word document (docx) rendered the way Word renders it -- pages, running header and footer, run and paragraph styling, tables with fills, borders and spans -- in the FauxClient frame with zoom and full screen. The docx member of the file viewers.
▶
fancy-slides
7 comps
Presentation editor + web viewer — Google-Slides-style deck authoring with JSON-friendly schema, full keyboard viewer, and an agent bridge.
{ }
fancy-code
3 comps
Lightweight embedded code editor — custom engine, no Monaco / CodeMirror / Shiki.
CA
Catalog + FMS
4 comps
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.
>_
fancy-term
1 comp
Human+ Terminal — a controlled, themeable <Terminal> over xterm.js with hooks and an MCP-bridgeable surface agents read + drive.
FA
fancy-tui
52 comps
Ink components for Human+ terminal apps — consistent layout, controlled inputs, scrollback-safe conversations, and durable push + inbox MCP workflows.
FA
fancy-diff
1 comp
Human+ side-by-side document diff with hunk acceptance — a client-side, zero-dep diff engine or a git unified-diff datasource.
FA
fancy-pixel
1 comp
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().
∿
fancy-echarts
3 comps
Typed React wrapper around Apache ECharts — every chart type from a single <EChart> component, lazy module registration, four built-in themes.
FA
fancy-mlm-ui
3 comps
React surfaces for the fancy-mlm referral engine — a controlled DownlineTree (unilevel / binary / matrix), a CommissionStatement ledger, and RankProgress toward the next tier. Pairs with particle-academy/fancy-mlm (PHP) or @particle-academy/fancy-mlm (Node).
FA
fancy-passkeys-ui
3 comps
React surfaces for passkey (WebAuthn) sign-in and passkey management, plus a React-free /client subpath carrying the browser half of both ceremonies. Controlled, JSON-serializable, agent-bridgeable — and deliberately not agent-completable: no prop, export or MCP tool finishes a ceremony, because that needs a gesture and a biometric only the human has. Pairs with particle-academy/fancy-passkeys (PHP) or @particle-academy/fancy-passkeys (Node).
LA
laravel-courses
0 comps
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.
CL
classroom
6 comps
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.
TE
teachers-aid
0 comps
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.
TE
teachers-aid-ui
4 comps
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.
LA
laravel-jobs
0 comps
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.
JO
job-board
6 comps
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.
FA
fancy-git-ui
8 comps
Controlled Human+ React surfaces for repositories, working trees, diffs, commits, branches, and pull/merge requests.
FA
fancy-x-files-ui
8 comps
react-fancy editor suite for the well-known + agent-facing files — controlled, JSON-friendly editors for robots.txt / security.txt / llms.txt / humans.txt / sitemap.xml / AGENTS, each with a live preview, plus a combined XFilesManager. Pairs with particle-academy/fancy-x-files (PHP) / @particle-academy/fancy-x-files (Node).
▦
fancy-screens
2 comps
Multi-screen application shell with cross-screen agent presence.
3D
fancy-3d
2 comps
Engine-agnostic 3D core — Scene types, the <Canvas> surface, and a DOM/CSS-3D renderer. WebGL engines (Babylon, three.js, …) ship as sibling fancy-3d-* packages.
bJ
fancy-3d-babylon
4 comps
Babylon.js adapter for fancy-3d — WebGL renderer + the React components (Stage, Monitor, Card3D, Screen) that mount onto a Babylon Scene.
FA
fancy-3d-three
4 comps
three.js adapter for fancy-3d — WebGL renderer + the React components (Stage, Monitor, Card3D) that mount onto a three.js Scene. Mirrors fancy-3d-babylon, three.js underneath.
FA
fancy-map
1 comp
Engine-agnostic Map — one <Map> API over OpenStreetMap (Leaflet) + Google Maps, live position tracking, and a Human+ MCP bridge for cohabited human/agent maps.
mcp
agent-integrations
5 comps
MCP-driven agent presence — micro-MCP server, bridges, presence layer, share relay.
iN
fancy-inertia
3 comps
Inertia.js bridge — schema-driven pages, useFancyForm(), SSR boundaries. Works with ANY Inertia backend (zero Laravel/PHP runtime deps), not just Laravel.
FA
fancy-pwa
1 comp
Installable + offline PWA layer — manifest, lean service worker, install/offline/update hooks, and a fancyPwa() Vite plugin. Framework-agnostic, SSR-safe.
FA
fancy-whats-new
1 comp
Show these once, stacked, then remember they were seen: on the first load after a refresh or login, the groups of cards newer than what each person last saw (release notes, a welcome, new posts). localStorage or any store; a button re-opens the current cards.
FA
fancy-motion
2 comps
Timeline / animation primitives — a headless keyframe engine plus a React MotionStage + TimelineDock for scrubbing and orchestrating motion. (preview, pre-1.0)
FA
fancy-devtools
0 comps
Suite-aware React diagnostics — structured runtime problems, query and Human+ timelines, redacted exports, and one shared snapshot for humans and agents.
FA
fancy-cms-ui
3 comps
WYSIWYG CMS editor (React) for the Stages doc model: three-pane layers / canvas / inspector editing where every mutation is one PageOp through a pure reducer, plus the CmsPage / CmsRegion renderers with $bind data fields that name their live source. Pairs with the particle-academy/fancy-cms PHP renderer. Pre-1.0 — the API may still move between minors; issues at github.com/Particle-Academy/fancy-cms-ui/issues.
+ Composer companions
PHP packages — the agentic document writers and the sandbox's own Laravel infra:
Watch an agent work in the surface, not behind it.
When an agent moves a sticky, you see the cursor, the label, and the activity row — it's driving the real surface, not scraping a copy of it.
Real renders. Hover, click, type.
The actual @particle-academy/react-fancy — 252+ primitives, from a button to a full spreadsheet. 28 render live right here; pick any name on the left.
Button
The workhorse button — 18 colors, ghost / circle variants, loading, badge.
Three rules every component lives by.
Purely visual primitives owe only a great authoring surface. Anything stateful or interactive owes both — authorable and inhabitable.
Controlled, not captive
Anything an agent might read or write lives in value + onChange — no internal-only state. State is the contract; the UI just renders it.
Agents are participants
Every interactive surface exposes a register<Surface>Bridge that maps stable handles to MCP tools. Agents drive the component itself, not a DOM scrape of it.
Transport-agnostic
The kit ships zero networking. Your app wires the realtime + relay layer; mutations broadcast AgentActivity so presence, undo, and coaching compose for free.
Two ways to add a component.
npx fancy-cli@latest add and own the code. PHP packages install with composer require. Either way, point your coding agent at our hosted registry MCP — ui.particle.academy/mcp — and it'll search the registry and return the exact install commands.There's a plugin for Claude Code and one for Codex — either wires up the hosted registry MCP and bundles skills for architecture, components, design, realtime, SEO and SSR. Any other MCP client drops the hosted server into its config; no API key. Your agent then calls list-components, search-components, and install-instructions against the live registry — no guessing from memory.
Explore the site
More to poke at.
Starter Kits
templates
Vertical demos — clone, study, adapt.
Dreaming
speculative
Speculative components you can vote on.
Designer Showcase
community
Sites and repos built with Fancy UI.
Leaderboard
live
Top contributors by merged PRs and votes.
