react-fancy
@particle-academy/react-fancy
Tailwind v4 + React component library — 94 components.
Part of Fancy Core — 5 packages, one productSee the familyUI surface
94 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
94 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.ActivityLightOpen →
Genie and Tynn12
Genie and Weaver3
Genie and Prism0
Genie and Civi
Activity on an edge between two parties - recency ramp, direction and an optional count.
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.
DrawerOpen →
Panel that slides in from any edge — viewport-level, or attached inside a Card or layout pane.
FauxClientOpen →
ui.particle.academy/packages
The page inside the chrome.
Browser / device / window chrome rendering real, interactive UI inside (with scale-to-fit).
FieldOpen →
Visible to collaborators
Accessible label, description and validation shell for custom form controls.
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.
FullScreenOpen →
Quarterly report
Controlled full-screen surface: viewport overlay by default, optional native Fullscreen API, Escape exits with focus and scroll restored.
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.
PastePillsOpen →
SummarisePasted text · 4,812 charactersPasted image 1
The paste-pill core Composer, PromptInput and Input share: hold a long paste or a pasted image as a pill, and post pasted files with the form.
PullQuoteOpen →
The component itself is the agent's affordance, not an external target.
Editorial pull quote with optional attribution.
QrCodeOpen →
SN-4829-13
A QR code as an SVG, dependency-free - versions 1-40, L/M/Q/H, numeric/alphanumeric/byte selected automatically.
ReorderableGridOpen →
Amount
Stage
Owner
Close
Press Space or Enter to pick up. Use the arrow keys to move, Space or Enter to drop, Escape to cancel.
Reorder grid cells in place by pointer or keyboard: controlled id order, row-major columns, locked cells, aria-live announcements and an agent-friendly moveItem().
ResizablePanelsOpen →
Sidebar
Content
Two panels with an accessible, draggable separator: a percentage split, keyboard steps, and a commit event to persist the size.
VirtualListOpen →
1event 1 committed
2event 2 committed
3event 3 committed
4event 4 committed
5event 5 committed
6event 6 committed
7event 7 committed
8event 8 committed
9event 9 committed
10event 10 committed
11event 11 committed
12event 12 committed
13event 13 committed
Windowed list for tens of thousands of rows - measured variable heights, deep links by row id, tail-follow.