react-fancy
@particle-academy/react-fancy
Tailwind v4 + React component library — about 70 primitives.
$
npm install @particle-academy/react-fancyAuthoring surface
Humans compose it
Controlled value + onChange, JSON-friendly props, terse defaults — so people (and agents) build it fast.
Inhabited surface
Agents drive it over MCP
A bridge in @particle-academy/agent-integrations exposes typed tools — agents read and mutate state through stable handles, never DOM scraping.
form_set_fieldform_submit
Why
Building a full UI kit from scratch means reinventing the same foundation every time — button states, form validation, modals, dropdowns, floating tooltips. React ecosystems offer bloated alternatives (Material-UI, shadcn) that pull in heavy dependencies or expose only internal state, leaving agents to parse DOM.
@particle-academy/react-fancy fills the gap: a lightweight, Tailwind-native component suite where every interactive primitive is controlled — value + onChange — and bridgeable to MCP tools without Playwright.What
A constellation of 50+ React components spanning form inputs (
Input, Select, DatePicker, Autocomplete), display primitives (Badge, Avatar, Card, Timeline), interactive surfaces (Table, Kanban, TreeNav, Menu), overlays (Modal, Popover, Toast, Command palette), and specialized affordances for Human+ UX like ReasonTag, MoodMeter, PromptInput, and MagicWand. Every stateful component embraces the Human+ contract: controlled state, stable data-react-fancy-* handles, JSON-friendly props, and optional AgentActivity event broadcasting for presence and undo layers.How
Install
npm install @particle-academy/react-fancy (peer deps: React 18+, React DOM 18+, Tailwind v4). Add @source to your CSS to let Tailwind scan the package: @source "../node_modules/@particle-academy/react-fancy/dist/**/*.js". Import and use: import { Button, Input, Modal, Table } from "@particle-academy/react-fancy"; import "@particle-academy/react-fancy/styles.css"; All components export a *Props interface; form fields support value, onChange, and validation via a wrapping <Field> component. With Inertia? Pair it with @particle-academy/fancy-inertia for one-line form integration.Components
67 components · click any tile for a full demo, source, and install snippet.
AccordionPanelOpen →
Shipping & returns
Free returns within 30 days. One panel, fully controlled via
open.ButtonOpen →
The workhorse button — colors, states, icons, emoji, avatar, badge, loading. (formerly Action)
CodeViewOpen →
CodeView
Live preview coming soon
Lightweight syntax-highlighted source view (HTML highlighted; fills height). Powers the Editor Source toggle.
FauxClientOpen →
ui.particle.academy/packages
The page inside the chrome.
Browser / device / window chrome rendering real, interactive UI inside (with scale-to-fit).
FileBrowserOpen →
FileBrowser
Live preview coming soon
Remote-capable file/folder browser + directory picker — lazy async provider or streamed JSON snapshots, controlled selection, breadcrumb + editable path, ARIA tree keyboard nav.
MarqueeOpen →
Auto-scrolling ticker strip — seamless wrap, px/s speed, opposing directions, fade edges, reduced-motion safe.
MediaViewerOpen →
Picks the right viewer (image / video / audio / PDF) from a mime or src; download fallback. Exports resolveMediaType.