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).
| 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 |
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 hub
- Architecture
- Distribution model
- Release process (for maintainers)
- Consumer migration guide (apps migrate themselves)
- Always-on policy: AGENTS.md
- Skills map: ai/skills/README.md
- Canonical skills:
.github/skills/
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:5173See docs/03-examples/04-demo-site.md.
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