v0.5 · React · PHP · Node · Python
Build the app, not the plumbing.

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.

119 packagesMIT licensedtailwindcss >= 4React 19 · PHP 8.4
resources/js/Pages/DesignReview.tsxUTF-8 · TSX
// One surface. Two participants. import { ArtBoard, ArtPiece } from "@particle-academy/fancy-artboard"; import { registerArtboardBridge } from "@particle-academy/agent-integrations"; export default function DesignReview() { const [board, setBoard] = useState(initialBoard); return ( <ArtBoard value={board} onChange={setBoard}> <ArtPiece id="hero-v3" kind="jsx" /> </ArtBoard> ); }
agent · fancy-ui.mcpartboard_add_piece ✓
The family

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.

typescript

npm

Wb

fancy-whiteboard

6 comps

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

typescript

npm

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.

typescript

npm

→

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

typescript

npm

fx

fancy-sheets

2 comps

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

typescript

npm

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.

typescript

npm

▶

fancy-slides

7 comps

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

typescript

npm

{ }

fancy-code

3 comps

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

typescript

npm

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.

typescript

composer

>_

fancy-term

1 comp

Human+ Terminal — a controlled, themeable <Terminal> over xterm.js with hooks and an MCP-bridgeable surface agents read + drive.

typescript

npm

FA

fancy-tui

52 comps

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

typescript

npm

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.

typescript

npm

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

typescript

npm

∿

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.

typescript

npm

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

typescript

npm

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

typescript

npm

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.

php

composer

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.

typescript

npm

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.

php

composer

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.

typescript

npm

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.

php

composer

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.

typescript

npm

FA

fancy-git-ui

8 comps

Controlled Human+ React surfaces for repositories, working trees, diffs, commits, branches, and pull/merge requests.

typescript

npm

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

typescript

npm

▦

fancy-screens

2 comps

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

typescript

npm

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.

typescript

npm

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.

typescript

npm

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.

typescript

npm

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.

typescript

npm

mcp

agent-integrations

5 comps

MCP-driven agent presence — micro-MCP server, bridges, presence layer, share relay.

typescript

npm

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.

typescript

npm

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.

typescript

npm

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.

typescript

npm

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)

typescript

npm

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.

typescript

npm

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.

typescript

npm

Human+ · live

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.

fancy.app · Human+ boardlive
GByouAIclaude
Cut the second CTA — it competes with the primary.
you · 12:04
Proposing a tighter hero grid. Confirm to apply?
claude · now
Brand gradient reads well in dark mode.
you · 12:01
claude
AI Agent activity
fancy-whiteboard · live tool calls this session
Proposed hero grid rework — awaiting confirmnow
Added note tighter hero grid0:03
Moved 2 stickies into the Hero cluster0:11
Read board state (3 clusters)0:18
whiteboard_*via micro-MCP server
Components

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.

Actions & control
Button01
Switch02
MultiSwitch03
Slider04
OtpInput05
Text & forms
Field + Input06
Textarea07
Select08
Autocomplete09
Pillbox10
Selection
Checkbox11
CheckboxGroup12
RadioGroup13
Feedback & status
Badge14
Callout15
Progress16
Skeleton17
Toast18
Tooltip19
Navigation
Tabs20
Breadcrumbs21
Pagination22
Data & people
Card23
Table24
Avatar25
Profile26
Separator27
StickyNote28

Button

The workhorse button — 18 colors, ghost / circle variants, loading, badge.

<Button />
Color
Ghost · circle · sizes
State · loading · disabled · badge
The Human+ contract

Three rules every component lives by.

Purely visual primitives owe only a great authoring surface. Anything stateful or interactive owes both — authorable and inhabitable.

01

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.

valueonChangejson-friendly
02

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.

mcpstable handlespresence
03

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.

relayAgentActivityundo
Quick start

Two ways to add a component.

Install the npm package and import it, or vendor the source with 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.
1
Install the package
npm / pnpm / yarn — version-pinned.
// 1 · Install the package — import the component. $ npm install @particle-academy/react-fancy import { Badge } from "@particle-academy/react-fancy"; <Badge color="green" dot>Live</Badge>
2
Vendor the source
Copy it in — yours to read and edit.
# 2 · Vendor the source — copy it into your repo, own it. $ npx fancy-ui@latest add badge # → src/components/fancy/badge/ import { Badge } from "@/components/fancy/badge";
Or let your agent do it

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.

# Claude Code — registry MCP + skills /plugin marketplace add Particle-Academy/fancy-ui-plugin /plugin install fancy-ui@fancy-ui # Codex — the same, for the Codex CLI codex plugin marketplace add Particle-Academy/fancy-ui-codex-plugin codex plugin add fancy-ui@fancy-ui // Any other MCP client — wire the hosted server (no API key) { "mcpServers": { "fancy-ui": { "type": "http", "url": "https://ui.particle.academy/mcp" } } }

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.