ilinxa pro-ui

Components

High-level, fully-composed components built on top of shadcn/ui and Tailwind. Each one is standalone, dynamic, and follows the shadcn customization model.

64 components9 categories

Data Display

Tables, charts, lists, stats, KPIs, and data dashboards.

27 items

A typed, composable table primitive with column accessors and per-cell rendering.

tabledatalisttyped

JSON-driven recursive card tree with a full structural editor — drag and drop, multi-select, permissions, search, validation, and undo.

card-treetreeoutlinejson

Magazine-style news card in five sizes — role-aware editor and viewer modes, permissions matrix, badges, paywall and sensitivity gates.

news-carddatacardnews

Linked thumbnail list — small image, title, and meta line per row, each row one link target.

thumbnail-listlistthumbnailsrelated

Single-metric dashboard card — value, label, delta, and a dependency-free SVG sparkline with polarity-aware coloring.

stat-cardmetrickpidashboard

Icon-and-value metadata strip for article headers — author, date, read time, view count, or any custom pairs.

article-metametabylinemetadata

Rich Text Editor

Plate-powered WYSIWYG editor and read-only viewer for long-form articles — code blocks, captioned images, floating toolbar, HTML export.

rich-text-editorrich-textwysiwygeditor

Event preview card with six status states and four layouts — capacity-aware badges, overlay links, and soft-failure item handling.

event-cardeventsstatuscapacity

Time-anchored agenda list — time or range, title, optional description and icons, per-row links, framed or bare.

schedule-listscheduleagendatimeline

Progress Timeline

Horizontal progress bar with a current-position marker and start, state-aware center, and end captions — derives its state from three dates.

progress-timelineprogresstimelinecountdown

Card-framed list of icon-prefixed rows — primary and secondary text, optional actions, per-row links, comfortable and compact variants.

info-listdetailsinfolist

Responsive grid of person cards — avatar with initials fallback, name, title, per-card links, and a custom item renderer.

people-gridteamspeakersgrid

Registration Card

Event registration status card — capacity progress, spots-left counter, status-aware call to action, and a share slot.

registration-cardregistrationsignuprsvp

Expandable Text

Truncating text block that only shows its toggle when text actually overflows — configurable line clamp, controlled or uncontrolled.

expandable-texttexttruncateline-clamp

Social action row — like, comment, share, bookmark, custom actions, and a multi-reaction picker with realtime counts and burst animation.

engagement-barsocialengagementlike

Recursive comment thread with composer, optimistic add, like, and delete, inline expansion past max depth, and realtime subscription hooks.

comment-threadsocialcommentsthread

Social post composite in four layouts — text expansion, media carousel, engagement bar, and comment thread wired together.

post-cardsocialposttier-2

Horizontal story rail with unread gradient rings, drag-free skim scrolling, an add-story tile, and edge-fade gradients.

story-railsocialstoriesrail

Project and case-study card with editorial status states and grid or feature layouts — overlay links and soft-failure item handling.

project-cardprojectsportfoliocase-study

Drag-and-drop kanban board with swimlanes, tinted columns, per-column rules, and a renderer registry that hosts any card type.

kanbanboarddrag-and-dropdnd-kit

Node-and-edge canvas with typed ports, pluggable node renderers, edge and port-type registries, and JSON save and load — built on React Flow.

flow-canvasflowcanvasnode-editor

Card-tree renderer for flow canvas nodes — read-only viewer, a consumer-owned edit dialog pattern, and a typed port editor strip.

card-tree-nodeflow-canvascard-treepopup-edit

Schema-driven task card with time-aware color coding, popup and inline editing, clipboard and drag-drop payloads, and permission predicates.

todotaskcard-treetime-aware

Hierarchical task outline with multi-select, bulk operations, search and filter toolbar, dual drag-and-drop, and virtualization.

task-treetodotreeoutline

Chalkboard-style team notes board — handwritten ink notes with pens, widths, pins, @mentions, auto-save, and lazy history loading.

blackboardchalkboardcollaborationnotes

Editable Gantt timeline — per-task bars, collapsible summary rows, milestone diamonds, continuous zoom from hours to quarters, and a today line.

gantt-timelinegantttimelineschedule

Editable event calendar with month, week, day, and agenda views — multi-day spans, drag and resize editing, clipboard support, and keyboard navigation.

event-calendarcalendarmonthweek

Forms

Inputs, builders, multi-step flows, validation patterns.

8 items

Properties Form

Schema-driven read and edit form for typed records — six field types, per-field permissions, sync validation, and a custom renderer slot.

properties-formformschemavalidation

Schema-driven filter panel — checkbox lists, toggles, text, and custom filter types with AND composition and debounced input.

filter-panelfilterfacetsgraph-system

Searchable picker for typed entities — single or multi select, kind badges, chip cluster with removal, and custom render slots.

entity-pickerpickercomboboxgraph-system

Markdown Editor

CodeMirror 6 markdown editor with GFM, wikilink autocomplete, a slot-able toolbar, and edit, split, and preview modes.

markdown-editorcodemirrorwikilinksgraph-system

Flex-wrapped cloud of clickable category chips with optional counts — single-select, toggleable, controlled or uncontrolled.

category-cloudformsfiltertags

Composite filter bar — search, category pills, date-range picker, and results count, each independently controlled or hidden.

filter-barformsfiltersearch

Schema-driven form engine — a field DSL compiled to Zod, 25 field types including rich text, conditional and computed fields, on React Hook Form.

json-formformschemareact-hook-form

Email and password signup with optional profile step, OAuth row, password strength meter, magic-link variant, consent gate, and honeypot.

signup-formformsignupauth

Navigation

Headers, sidebars, breadcrumbs, command palettes, tabs.

4 items

VS Code-style file tree — format-aware icons, full CRUD, drag-and-drop, lazy children, and multi-select.

treenavigationfilesystemexplorer

Finder-style file browser — grid and list views, marquee multi-select, cut copy paste, drag-and-drop, and a shared clipboard primitive.

filefoldermanagernavigation

App-shell sidebar with mobile drawer mode, twelve composition slots, prefab nav parts, and a headless state hook.

sidebarnavigationapp-shellcollapsible

Account Switcher

Popover account and context switcher — active label trigger, switchable context list, and a footer slot for create or request actions.

account-switcherworkspace-switchercontext-switcherpopover

Feedback

Toasts, alerts, empty states, loaders, progress.

2 items

Selection-aware detail container with read and edit modes, lifecycle states, sticky header and footer actions, and a slot-based body.

detail-panelfeedbackcompoundselection

The designed answer for empty surfaces — icon or illustration, title, description, capability-gated actions, and a hint, across 6 variants and 3 sizes.

empty-statefeedbackemptyno-results

Marketing

Heroes, pricing, testimonials, feature grids, CTAs.

5 items

Newsletter Signup

Newsletter signup card — inline email form or CTA-only variant, async status tracking, three tones, full i18n.

newsletter-signupmarketingctaform

Full-bleed gradient hero band — badge, title, highlight, description, stats row, and a reveal-on-mount animation.

page-heromarketingherolanding

Person identity card — avatar, name, role, optional bio, optionally clickable.

author-cardauthorbylineprofile

Social share button row — nine built-in platforms, custom targets, and copy-link with success feedback.

share-barsharesocialcopy-link

Pricing tiers side by side — monthly and annual toggle, highlighted tier, per-feature tooltips, and a comparison layout. RTL-safe, full i18n.

pricing-tablemarketingpricingconversion

Layout

Page shells, dashboard frames, splits, grids.

2 items

Split Workspace

Splittable, mergeable canvas of editor areas — a dynamic layout primitive for dashboards, dev tools, and data apps.

split-workspacelayoutsplitpanels

Magazine Layout

Slot-based magazine layout — hero, filter bar, sidebar, and a mixed-size article grid with infinite scroll and a filter hook.

magazine-layoutlayoutmagazinefeed

Media

Image galleries, video players, carousels, file viewers.

9 items

Video element wrapper — autoplay-friendly defaults, slot-based controls, carousel-coordinated pause, and double-tap gestures.

video-playervideomediaplayer

Embla image and video carousel — gallery or linear variants, coordinated video pause for inactive slides.

media-carouselcarouselmediaembla

Full-screen story viewer — segmented progress, 3D cube transitions, finger-following swipe, tap zones, and an engagement overlay.

story-viewerstoryviewermodal

Drop-in PDF reader — toolbar, zoom, selectable text, drag-drop, and a themed context menu. No commercial SDK.

pdfviewerdocumentreader

Instagram-style story creation surface — a locked 9:16 wrapper around the media editor.

story-composerstoriescameraimage-editor

Media capture and edit surface for photo, video, and text — capability dials and an Instagram-style chrome model.

media-editorimage-editorvideokonva

Content Composer

Multi-step content authoring shell — each content type is a JSON config composing form, rich text, and media editing steps.

content-composercomposercmsauthoring

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.

carousel-composercarouselgallerymedia

Drive-style media library — folders and files, lazy loading, drag-drop upload, drag-to-move, context menus, and multi-type preview.

medialibraryfilesdrive

Code

Code blocks, editors, diff views, terminals, syntax-highlighted surfaces.

1 item

Code surface with view, edit, and terminal modes — Shiki highlighting, dual-theme CSS variables, and chrome presets for docs, chat, and terminal UIs.

code-blocksyntax-highlightshikicodemirror

Gamification

Cooperative, team-scoped motivation surfaces — progress, badges, challenges, quests.

6 items

Team Progress Bar

Read-only team progress bar showing milestone completion — optional ticks and numeric readout, cooperative by design.

team-progress-bargamificationprogressmilestones

Team Trophy Shelf

Gallery of earned team badges with honest locked slots, an optional count header, and a brief skippable reveal for new badges.

team-trophy-shelfgamificationbadgesmilestones

Team Feedback Loop

Non-blocking celebration layer — a brief skippable overlay when team progress advances, plus a gentle dismissible next-task nudge.

team-feedback-loopgamificationcelebrationconfetti

Cooperative team challenge card — one shared goal, collective progress, a whole-team reward, and penalty-free opt-in.

team-challengegamificationchallengerelatedness

Team Task Claim

Task autonomy control — an open-for-anyone toggle, a volunteer claim button, and an assignee chip with neutral release and reassign.

team-task-claimgamificationautonomyassignment

Team quest overlay — an editable skippable quest name plus a milestone chapter timeline with done, current, and upcoming beats.

team-quest-loggamificationnarrativemilestones