# ilinxa/pro-ui registry Production-ready React components distributed via the shadcn-registry model. Source files copy into the consumer's repo on `pnpm dlx shadcn@latest add` — you own the code. This is NOT an npm package. Do NOT try `pnpm add ilinxa-pro-ui` or `npm install ilinxa-pro-ui` — they don't exist. - Demo site: https://ui.ilinxa.com - Catalog: https://ui.ilinxa.com/r/registry.json - Per-item URL pattern: https://ui.ilinxa.com/r/.json - GitHub: https://github.com/ilinxa/pro-ui ## Consumer install (the one you usually want) Prerequisites — all three must hold: 1. **Any React 19 host** — components are pure React and never import `next/*`. Works in Next.js (14/15/16, App Router or Pages), Vite, Remix, Astro, RSPack, etc. A leading `"use client"` directive in some files is load-bearing in Next App Router and a harmless no-op everywhere else. 2. **Tailwind CSS v4 + the canonical shadcn token set** — components render against semantic Tailwind classes (`bg-card`, `text-foreground`, `border-border`, `bg-primary`, `text-muted-foreground`, `ring-ring`, …). Those classes only exist when v4's `@theme inline` block maps the shadcn CSS variables (`--background`, `--foreground`, `--card`, `--popover`, `--primary`, `--secondary`, `--muted`, `--accent`, `--destructive`, `--border`, `--input`, `--ring`, `--radius`) onto `--color-*` / `--radius-*` tokens. `shadcn init` against a v4 project sets this up. v3 + JS config will NOT compile the classes. 3. **`shadcn init` already run in the consumer project** — seeds `lib/utils.ts` (the `cn` helper every primitive imports). Without this step installs succeed but the build fails with `Cannot find module '@/lib/utils'`. Extra tokens some components also need: `--chart-1..5` (chart-shell, stat-card, rich-text-editor), `--sidebar*` (sidebar surfaces), `--warning` + `--warning-foreground` (warning surfaces). Consumers don't need to adopt the ilinxa brand *values* — every component reads tokens by name, so the host's palette wins. Step 1 — add the namespace to the consumer's `components.json` (merge with their existing config): ```json "registries": { "@ilinxa": "https://ui.ilinxa.com/r/{name}.json" } ``` The `{name}` placeholder is mandatory — the CLI rejects registries without it. Step 2 — install a component: ```bash pnpm dlx shadcn@latest add @ilinxa/ ``` Step 3 — optionally install fixtures (dummy data for a working example): ```bash pnpm dlx shadcn@latest add @ilinxa/-fixtures ``` The fixtures item declares the base as a registryDependency, so installing the fixtures sibling automatically pulls the base. There is no `--with-fixtures` flag — the dual-item pattern is the equivalent. The CLI auto-installs shadcn primitives (button, popover, etc.) and npm peer deps (lucide-react, @dnd-kit/*, @codemirror/*, marked, @radix-ui/*). Files land relative to the consumer's source root: `components//` at the project root, or `src/components//` when the project has a `src/` directory. A custom `aliases.components` does NOT relocate these files (registry items ship explicit target paths; only alias-resolved shadcn primitives like `ui/*` follow custom aliases) — imports are rewritten to the consumer's aliases either way, so installs compile without moving anything. Verified empirically on shadcn CLI 4.17.0 across root-layout, src-layout, and custom-alias consumers. ## Available items (130 total — 64 base + 64 fixtures + 2 feature slices) 64 components across 9 categories. Every item installs as `@ilinxa/`; each has a sibling `-fixtures` item that adds `dummy-data.ts` only (fixtures depend on the base — installing fixtures pulls the base automatically). Some components additionally offer optional feature slices — install `@ilinxa/` on top of the base for opt-in heavier capability. ### code - `@ilinxa/code-block` — Code surface with view, edit, and terminal modes — Shiki highlighting, dual-theme CSS variables, and chrome presets for docs, chat, and terminal UIs. ### data - `@ilinxa/article-meta` — Icon-and-value metadata strip for article headers — author, date, read time, view count, or any custom pairs. - `@ilinxa/blackboard` — Chalkboard-style team notes board — handwritten ink notes with pens, widths, pins, @mentions, auto-save, and lazy history loading. - `@ilinxa/card-tree` — JSON-driven recursive card tree with a full structural editor — drag and drop, multi-select, permissions, search, validation, and undo. - `@ilinxa/card-tree-node` — Card-tree renderer for flow canvas nodes — read-only viewer, a consumer-owned edit dialog pattern, and a typed port editor strip. - `@ilinxa/comment-thread` — Recursive comment thread with composer, optimistic add, like, and delete, inline expansion past max depth, and realtime subscription hooks. - `@ilinxa/data-table` — A typed, composable table primitive with column accessors and per-cell rendering. - `@ilinxa/engagement-bar` — Social action row — like, comment, share, bookmark, custom actions, and a multi-reaction picker with realtime counts and burst animation. - `@ilinxa/event-calendar` — Editable event calendar with month, week, day, and agenda views — multi-day spans, drag and resize editing, clipboard support, and keyboard navigation. ↳ optional slice: `@ilinxa/event-calendar-editing` — Drag-and-resize editing, quick-compose creation, keyboard mutations, cross-surface clipboard, and permission-gated actions for the event calendar. - `@ilinxa/event-card` — Event preview card with six status states and four layouts — capacity-aware badges, overlay links, and soft-failure item handling. - `@ilinxa/expandable-text` — Truncating text block that only shows its toggle when text actually overflows — configurable line clamp, controlled or uncontrolled. - `@ilinxa/flow-canvas` — Node-and-edge canvas with typed ports, pluggable node renderers, edge and port-type registries, and JSON save and load — built on React Flow. - `@ilinxa/gantt-timeline` — Editable Gantt timeline — per-task bars, collapsible summary rows, milestone diamonds, continuous zoom from hours to quarters, and a today line. - `@ilinxa/info-list` — Card-framed list of icon-prefixed rows — primary and secondary text, optional actions, per-row links, comfortable and compact variants. - `@ilinxa/kanban-board` — Drag-and-drop kanban board with swimlanes, tinted columns, per-column rules, and a renderer registry that hosts any card type. - `@ilinxa/news-card` — Magazine-style news card in five sizes — role-aware editor and viewer modes, permissions matrix, badges, paywall and sensitivity gates. - `@ilinxa/people-grid` — Responsive grid of person cards — avatar with initials fallback, name, title, per-card links, and a custom item renderer. - `@ilinxa/post-card` — Social post composite in four layouts — text expansion, media carousel, engagement bar, and comment thread wired together. - `@ilinxa/progress-timeline` — Horizontal progress bar with a current-position marker and start, state-aware center, and end captions — derives its state from three dates. - `@ilinxa/project-card` — Project and case-study card with editorial status states and grid or feature layouts — overlay links and soft-failure item handling. - `@ilinxa/registration-card` — Event registration status card — capacity progress, spots-left counter, status-aware call to action, and a share slot. - `@ilinxa/rich-text-editor` — Plate-powered WYSIWYG editor and read-only viewer for long-form articles — code blocks, captioned images, floating toolbar, HTML export. - `@ilinxa/schedule-list` — Time-anchored agenda list — time or range, title, optional description and icons, per-row links, framed or bare. - `@ilinxa/stat-card` — Single-metric dashboard card — value, label, delta, and a dependency-free SVG sparkline with polarity-aware coloring. - `@ilinxa/story-rail` — Horizontal story rail with unread gradient rings, drag-free skim scrolling, an add-story tile, and edge-fade gradients. - `@ilinxa/task-card` — Schema-driven task card with time-aware color coding, popup and inline editing, clipboard and drag-drop payloads, and permission predicates. - `@ilinxa/task-tree` — Hierarchical task outline with multi-select, bulk operations, search and filter toolbar, dual drag-and-drop, and virtualization. - `@ilinxa/thumbnail-list` — Linked thumbnail list — small image, title, and meta line per row, each row one link target. ### feedback - `@ilinxa/detail-panel` — Selection-aware detail container with read and edit modes, lifecycle states, sticky header and footer actions, and a slot-based body. - `@ilinxa/empty-state` — The designed answer for empty surfaces — icon or illustration, title, description, capability-gated actions, and a hint, across 6 variants and 3 sizes. ### forms - `@ilinxa/category-cloud` — Flex-wrapped cloud of clickable category chips with optional counts — single-select, toggleable, controlled or uncontrolled. - `@ilinxa/entity-picker` — Searchable picker for typed entities — single or multi select, kind badges, chip cluster with removal, and custom render slots. - `@ilinxa/filter-bar` — Composite filter bar — search, category pills, date-range picker, and results count, each independently controlled or hidden. - `@ilinxa/filter-panel` — Schema-driven filter panel — checkbox lists, toggles, text, and custom filter types with AND composition and debounced input. - `@ilinxa/json-form` — Schema-driven form engine — a field DSL compiled to Zod, 25 field types including rich text, conditional and computed fields, on React Hook Form. - `@ilinxa/markdown-editor` — CodeMirror 6 markdown editor with GFM, wikilink autocomplete, a slot-able toolbar, and edit, split, and preview modes. - `@ilinxa/properties-form` — Schema-driven read and edit form for typed records — six field types, per-field permissions, sync validation, and a custom renderer slot. - `@ilinxa/signup-form` — Email and password signup with optional profile step, OAuth row, password strength meter, magic-link variant, consent gate, and honeypot. ### gamification - `@ilinxa/team-challenge` — Cooperative team challenge card — one shared goal, collective progress, a whole-team reward, and penalty-free opt-in. - `@ilinxa/team-feedback-loop` — Non-blocking celebration layer — a brief skippable overlay when team progress advances, plus a gentle dismissible next-task nudge. - `@ilinxa/team-progress-bar` — Read-only team progress bar showing milestone completion — optional ticks and numeric readout, cooperative by design. - `@ilinxa/team-quest-log` — Team quest overlay — an editable skippable quest name plus a milestone chapter timeline with done, current, and upcoming beats. - `@ilinxa/team-task-claim` — Task autonomy control — an open-for-anyone toggle, a volunteer claim button, and an assignee chip with neutral release and reassign. - `@ilinxa/team-trophy-shelf` — Gallery of earned team badges with honest locked slots, an optional count header, and a brief skippable reveal for new badges. ### layout - `@ilinxa/magazine-layout` — Slot-based magazine layout — hero, filter bar, sidebar, and a mixed-size article grid with infinite scroll and a filter hook. - `@ilinxa/split-workspace` — Splittable, mergeable canvas of editor areas — a dynamic layout primitive for dashboards, dev tools, and data apps. ### marketing - `@ilinxa/author-card` — Person identity card — avatar, name, role, optional bio, optionally clickable. - `@ilinxa/newsletter-signup` — Newsletter signup card — inline email form or CTA-only variant, async status tracking, three tones, full i18n. - `@ilinxa/page-hero` — Full-bleed gradient hero band — badge, title, highlight, description, stats row, and a reveal-on-mount animation. - `@ilinxa/pricing-table` — Pricing tiers side by side — monthly and annual toggle, highlighted tier, per-feature tooltips, and a comparison layout. - `@ilinxa/share-bar` — Social share button row — nine built-in platforms, custom targets, and copy-link with success feedback. ### media - `@ilinxa/carousel-composer` — Multi-item media post composer — drag in photos and videos, reorder them on a rail, and edit each through a shared editor panel. - `@ilinxa/content-composer` — Multi-step content authoring shell — each content type is a JSON config composing form, rich text, and media editing steps. - `@ilinxa/media-carousel` — Embla image and video carousel — gallery or linear variants, coordinated video pause for inactive slides. - `@ilinxa/media-editor` — Media capture and edit surface for photo, video, and text — capability dials and an Instagram-style chrome model. ↳ optional slice: `@ilinxa/media-editor-capture` — Camera photo/video capture for Media Editor — permission flows, shutter control, multi-instance guard. - `@ilinxa/media-library` — Drive-style media library — folders and files, lazy loading, drag-drop upload, drag-to-move, context menus, and multi-type preview. - `@ilinxa/pdf-viewer` — Drop-in PDF reader — toolbar, zoom, selectable text, drag-drop, and a themed context menu. - `@ilinxa/story-composer` — Instagram-style story creation surface — a locked 9:16 wrapper around the media editor. - `@ilinxa/story-viewer` — Full-screen story viewer — segmented progress, 3D cube transitions, finger-following swipe, tap zones, and an engagement overlay. - `@ilinxa/video-player` — Video element wrapper — autoplay-friendly defaults, slot-based controls, carousel-coordinated pause, and double-tap gestures. ### navigation - `@ilinxa/account-switcher` — Popover account and context switcher — active label trigger, switchable context list, and a footer slot for create or request actions. - `@ilinxa/app-sidebar` — App-shell sidebar with mobile drawer mode, twelve composition slots, prefab nav parts, and a headless state hook. - `@ilinxa/file-manager` — Finder-style file browser — grid and list views, marquee multi-select, cut copy paste, drag-and-drop, and a shared clipboard primitive. - `@ilinxa/file-tree` — VS Code-style file tree — format-aware icons, full CRUD, drag-and-drop, lazy children, and multi-select. Do not invent slugs or deps. This list is generated from registry.json at build time — re-fetch this llms.txt for updates. ## Updating an installed component ```bash pnpm dlx shadcn@latest add @ilinxa/ --overwrite ``` Diff the changes (use `--dry-run` first if unsure), merge any local modifications, ship. shadcn-registry has no semver — content is addressed by URL. ## Compatibility - **Host framework** — any React 19 host (Next.js 14/15/16 App Router or Pages, Vite, Remix, Astro, RSPack, etc.). Components never import `next/*`. - **React** — 19 (or 18 with graceful primitive variants). - **Tailwind CSS** — v4 REQUIRED. CSS-vars-only config; no `tailwind.config.*`. Components are written against semantic Tailwind tokens registered through `@theme inline`. v3 + JS config will not compile the class names. - **Design tokens** — canonical shadcn token set required (see Prerequisites above for the full list). Extras: `--chart-*`, `--sidebar*`, `--warning*` for the components that use them. - **Package managers** — pnpm / bun / yarn / npm. npm + React 19 needs `--legacy-peer-deps`. ## Common gotchas - `Cannot find module '@/lib/utils'` after install → consumer didn't run `shadcn init`. The `add` command does NOT seed the `cn` helper; `init` does. - Re-running `add` didn't pull upstream changes → without `--overwrite`, locally-modified files are skipped: non-interactive runs print the overwrite prompt, auto-answer "no", and exit 0 with no failure summary — exit-code checks can't detect the skip. Add `--overwrite` to update; the CLI diffs per file and only rewrites files that actually changed. - `npm ERESOLVE` on React 19 peer deps → `--legacy-peer-deps`, or recommend pnpm. - Stale install after upstream update → CDN edge cache. Wait out the 5-min TTL or append `?v=` to the URL once. ## Distribution model (one-line) shadcn-registry over static JSON on Vercel — the CLI fetches `/r/.json`, inlines source from the per-item `files[].content` strings, runs `pnpm add` for declared deps, and writes files at the `target` paths. Server-side fetch (no CORS). ## Per-component reference https://ui.ilinxa.com/components/ renders preview, usage, and dependencies for each component. The `/components` index lists the full catalog. ## For AI agents specifically When a user asks to install a component from this registry: 1. Verify the consumer has run `shadcn init` (check for `components.json` AND `lib/utils.ts`). If not, run init first. 2. Add the namespace map to `components.json` if missing. 3. Run `pnpm dlx shadcn@latest add @ilinxa/`. 4. If they want example data: run the `-fixtures` variant (registryDependencies pulls the base automatically — no need to install both). 5. Verify by reading `components//index.ts` for the exposed API. Do not invent slugs or deps. The list above is the complete set of available items as of this writing — re-fetch this `llms.txt` for updates.