KUIreact

A component library can mean many things. At its narrowest, it is a folder of buttons and inputs. At its broadest, it is a systematic answer to the question of how a product family should look and behave across every surface. This project sits firmly at the broader end of that spectrum — not a design system for a single product, but a structured collection of UI building blocks that spans fifteen distinct industry verticals, each with its own domain model, its own interaction patterns, and its own multi-page flow.

The goal was to build something that answers a real question for a full-stack SaaS developer: when starting a new product in a new domain, what can be reused and what needs to be built from scratch? The answer this project gives is: more than you might expect.

The Architecture

The project enforces a strict four-layer dependency direction — modules/ui → modules/app → modules/domains → modules/showcase — and does not allow layers to import upward.

modules/ui is the foundation. Around forty components covering every standard UI primitive: Button, Input, Select, Textarea, DataTable, AdvancedDataTable, ServerDataTable, Modal, Drawer, Toast, Tooltip, Popover, DropdownMenu, TabGroup, Stepper, DatePicker, DateRangePicker, MultiSelect, ComboBox, TagInput, TreeView, Slider, MapView, VideoPlayer, StatCard, Skeleton, and more. These components know nothing about any domain. They are generic, accessible, and variant-driven.

modules/app composes those primitives into application-level scaffolding: AppShell, AppSidebar, AppTopBar, AppCommandBar, AppDrawer, AppNav, FilterBar, GlobalSearch, Form, FormField, StepFlow, StepShell, NotificationSystem, ThemeSwitcher. This layer builds the frame that every domain experience sits inside.

modules/domains is where the project's real breadth lives. Each domain module contains typed entities, React components scoped to that domain's vocabulary, and the business-specific compositions that a product in that space would actually need.

modules/showcase is the documentation system that renders every component in every variant, with source code, layout switching, and a sidebar search.

Fifteen Domains

The domain coverage is the project's defining characteristic.

Landing provides the full SaaS marketing surface: hero section, announcement bar, mega menu, feature grid, how-it-works section, pricing plan cards, partner logo strip, stats bar, testimonials, team member cards, and FAQ accordion — everything needed to build a product landing page without starting from scratch.

Event is the most complete theme in the project. It has multi-page flows for event discovery, event detail with ticket purchase, seat map selection, artist pages, venue pages with Leaflet map integration, organizer profiles, order history, and shareable ticket URLs. The seat picker renders an interactive venue layout where sections and seats have individual state.

Fintech covers the dashboard surface of a digital wallet or trading app: portfolio donut chart, transaction volume chart, cryptocurrency price cards, currency exchange panel, wallet cards, and transaction tables with status and type badges.

Real Estate includes property listing grids, property detail pages, agent directory, agent profiles, listing type and status badges, and a mortgage calculator that computes monthly payments from principal, rate, and term.

Travel covers flight search results, seat picker for cabin selection, hotel listings, and a multi-step flight booking flow with booking status management.

Commerce handles product listings, product detail pages, cart, and order history with status tracking.

Blog covers post cards, post content rendering, post metadata, category badges, status badges, and a comment system.

Food provides restaurant discovery, restaurant detail, menu item cards, cart, and order management with delivery status tracking.

Forum includes category browsing, topic listings, topic detail, and reaction badges.

Jobs covers job listings with type, work mode, experience level, and status badges, company cards, and application status tracking.

Social handles profile pages, post feeds, notifications, marketplace listings, messages, and friends.

Media covers video listings, video detail with metadata, and channel pages.

AI provides the UI for an AI dashboard: model cards with provider and type badges, usage statistics, chat conversation interface with message bubbles, sidebar, and input bar, plus AI job status tracking.

API Documentation renders OpenAPI specs into a structured interface — endpoint rows, operation panels, parameter tables, response cards, schema viewer, HTTP method badges, status code badges, and security scheme display.

Common holds the cross-domain components that appear everywhere: auth flows (login, register, forgot password, 2FA, email verification), account management pages, cart and checkout, payment forms with credit card visualization, address management, currency selector, coupon input, SEO form with live preview, language switcher, direction provider for RTL, and user profile components.

Accessibility and Utilities

The libs/ layer contains infrastructure that every domain depends on. useFocusTrap constrains keyboard focus inside modals and drawers. useA11yCheck runs @axe-core/react in development and surfaces violations to the console. libs/a11y/announce.ts provides a programmatic API for ARIA live region announcements, used by the Toast system and form validation feedback. useBreakpoint gives components reactive access to the current Tailwind breakpoint without window.matchMedia coupling.

The polymorphic.ts utility implements a generic PolymorphicProps<C, OwnProps> type that lets components like Button render as <a>, <button>, or any other element based on an as prop, inheriting the correct native prop types at the TypeScript level.

The Parallel

This project was developed in parallel with an EJS Components Showcase that mirrors the same four-layer architecture and covers the same domain vocabulary — but server-rendered, with no React. The two share design token naming, component naming conventions, and CI philosophy. They are complementary answers to the same design system question across different runtimes.