JOOservices React Components

Shared React UI packages for the JOOservices ecosystem.

Status: current stable release v2.7.0 — install from git tag + path (not the public npm registry).

Packages

Package	Path	Description
@jooservices/react-ui	components/ui	Status, badges, inputs, loading, filters, pagination
@jooservices/react-config	components/config	Schema-driven configuration panel
@jooservices/react-layout	components/layout	App shell (top bar, sidebar, content)
@jooservices/react-table	components/table	DataTable (TanStack Table + themed UI)
@jooservices/react-content	components/content	Page layout shell (identity, toolbar, filters)
@jooservices/react-action-buttons	components/action-buttons	Action bars, menus, split buttons
@jooservices/react-card	components/card	BaseCard shell and StatCard metrics
@jooservices/react-modal	components/modal	Compound Modal (Header / Body / Footer)
@jooservices/react-toast	components/toast	Global toast stack (toast API + Toaster)
@jooservices/react-notifications	components/notifications	Presentational notification bell + dropdown
@jooservices/react-ai-waiting	components/ai-waiting	AI wait overlay (AiWaiting + estimated progress)
@jooservices/react-login	components/login	Login page shells + form (host owns auth API)
@jooservices/react-media	components/media	MediaGrid (masonry/grid), MediaItem, MediaLightbox
@jooservices/react-form	components/form	Form chrome: Form, FormHeader, FormContent, FormFooter, Field, FormSection, FormStatus

Install

pnpm add "github:jooservices/react#v2.7.0&path:components/table"

{
  "dependencies": {
    "@jooservices/react-table": "github:jooservices/react#v2.7.0&path:components/table"
  }
}

Peer dependencies: react, react-dom (>=18), lucide-react (>=0.400), tailwindcss (^4).

Host Tailwind must @source package dist (no package styles.css):

@import "tailwindcss";
@source "../node_modules/@jooservices/react-*/dist/**/*.{js,mjs}";

See docs/01-getting-started/01-installation.md and styles and theming.

Documentation

• Documentation hub
• Architecture
• Distribution model
• Release process (for maintainers)
• Consumer migration guide (apps migrate themselves)

AI Support

• Always-on policy: AGENTS.md
• Skills map: ai/skills/README.md
• Canonical skills: .github/skills/

Live demo

XCrawlerII-style Vite SPA under apps/demo that consumes all packages (Tailwind + composition).

npm run build          # build packages first (dist/)
cd apps/demo && npm install && cd ../..
npm run demo           # http://localhost:5173

See docs/03-examples/04-demo-site.md.

Development

npm run lint       # TypeScript strictness (alias of typecheck)
npm run typecheck
npm run test
npm run build      # build all packages (writes dist/)

Or per package:

cd components/table && npm install && npm run build && npm test

License

MIT