react-fancy
@particle-academy/react-fancy
Tailwind v4 + React component library — about 70 primitives.
Part of Fancy Core — 5 packages, one productSee the familyUI surface
77 components, each with a live demo, props table, and source.
ButtonlivebetaCardRK
$
npm install @particle-academy/react-fancyOne handler, two operatorsHuman+ contract
Human — keystroke
<Accordion value={value} onChange={setValue} />
Agent — MCP tool call
tools.call( "form_set_field", { … } )
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
77 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 →
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 →
src
README.md1 KB
Remote-capable file/folder browser + directory picker — lazy async provider or streamed JSON snapshots, controlled selection, breadcrumb + editable path, ARIA tree keyboard nav.
IndexListOpen →
- 01Fieldwork20 styles
- 02Mom-n-Pops20 styles
- 03Dashboards20 styles
Numbered index list for directories and tables of contents.
JsonEditorOpen →
retries
3
integer
active
On
boolean
tier
pro
enum
Key/value editing for nested JSON, where a keyMap imposes a declared data type on chosen paths — driving both how a value displays and which input edits it.
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.
PullQuoteOpen →
The component itself is the agent's affordance, not an external target.
Editorial pull quote with optional attribution.