What is TekiVex UI?
TekiVex UI is a comprehensive, open-source React component library built for teams that take accessibility, performance, and security seriously. Components target WCAG 2.1 AA with WAI-ARIA APG patterns (an internal APG audit with all 35 findings fixed is published in the repo), and every component is fully keyboard navigable with complete WAI-ARIA 1.2 support.
The library ships 78 components covering everything from basic primitives (Button, Input, Badge, Progress) to complex interactive widgets (DataGrid, DatePicker, RichTextDisplay, Command, Carousel, VideoPlayer) to real-time streaming components (LiveFeed, LiveMetrics, RealTimeChart, LiveLog) and AI-native components (TkxAIConfidenceBar, TkxAIChatBubble, TkxAIThinking).
Install with: npm install tekivex-ui
78 Production-Ready React Components
Every component in TekiVex UI is written in TypeScript with full prop typing, designed with a zero-trust security model, and tested against WCAG 2.1 AA criteria. Components are tree-shakeable, zero-dependency (React is the only peer dep), and work in both client-rendered and React Server Component environments.
Core UI Components
Button, Card, Input, Badge, Progress, Toggle, Alert, Modal, Tabs, Tooltip, Skeleton, Avatar, Table, Divider, Select, Checkbox, Radio, Toast, Accordion, Drawer, DatePicker, Slider, Pagination, Image, FileUpload, Rating, Chat, Tag, Timeline, Menu, Clock, VideoPlayer, Stepper, ColorPicker, NumberInput, OTPInput, Command, Carousel, Icon, Breadcrumb, Popover, Autocomplete, TreeView, Toolbar, TransferList, SpeedDial, AppBar, BottomNav, Snackbar, DataGrid, Masonry, RichText, Form, Layout, Typography, Spin, Empty, Statistic, ConfigProvider, Affix, Anchor, Cascader, Mentions, QRCode, Result, Segmented, Tour, Watermark
AI-Native Components
TkxAIConfidenceBar renders a colour-coded meter (0–100) for AI model confidence scores, with smooth animation and full screen reader support via role="meter". TkxAIChatBubble handles user and assistant messages with streaming typewriter animation, XSS sanitization, and a copy button. TkxAIThinking shows AI processing states in four variants: dots, pulse, wave, and orbit.
Real-Time Components
LiveFeed streams live data entries with auto-scroll. LiveMetrics displays real-time KPI cards. RealTimeChart renders a live-updating line chart. LiveLog tails log output with level-based colour coding. DataGridInfinite handles infinite-scroll data tables with server-side pagination.
Charts
TekiVex UI includes TkxLineChart, TkxBarChart, TkxAreaChart, TkxPieChart, TkxDonutChart, TkxScatterChart, and TkxRadarChart — all responsive, accessible, and built without recharts or d3 dependencies.
Accessibility: WCAG 2.1 AA target, APG patterns throughout
WCAG 2.1 AAA is the highest level of web accessibility conformance defined by the W3C Web Accessibility Initiative. It encompasses all Level A and AA criteria plus additional requirements including: 7:1 colour contrast ratio for text, 44x44 pixel minimum touch targets, focus indicators at least 2px thick, full keyboard operability for all interactive elements, error prevention for forms, and animation controls for users with vestibular disorders.
TekiVex UI targets WCAG 2.1 AA across all 116 components — verified by an internal WAI-ARIA APG audit (all 35 confirmed findings fixed with regression tests); AAA remains a tracked aspiration, not a claim. Every component uses semantic HTML, appropriate ARIA roles and properties, keyboard event handlers, visible focus indicators with 2px outline, and respects prefers-reduced-motion.
Zero-Trust Security Model
TekiVex UI's security engine sanitizes all user-provided string content before rendering. The built-in sanitizeString() function strips HTML tags, removes javascript: and data: URL schemes, and encodes special characters. This prevents cross-site scripting (XSS) attacks even when rendering user-generated content. The library ships with zero production runtime dependencies, reducing supply chain attack surface to a minimum.
React Server Components Support
13 of TekiVex UI's 78 components are fully compatible with React Server Components (RSC): TkxBadge, TkxAvatar, TkxDivider, TkxTypography, TkxSkeleton, TkxSpin, TkxEmpty, TkxStatistic, TkxTag, TkxCard, TkxAlert, TkxProgress, TkxTimeline. These components use no hooks or browser APIs and can render on the server in Next.js App Router, Remix, or any RSC-compatible framework.
TKX Atomic CSS Engine
TekiVex UI ships with TKX, a zero-runtime atomic CSS engine that generates optimized class names at build time. Unlike Tailwind CSS which requires a large utility CSS file, TKX generates only the styles your components actually use, resulting in minimal CSS bundle sizes.
Bundler Integration — Vite, Webpack, Next.js, Remix, Parcel, Astro
TekiVex UI works with every major React bundler and meta-framework. Drop-in integration recipes are available at /bundlers.
Vite (recommended)
npm install tekivex-ui — then import 'tekivex-ui/styles' and wrap your app in ThemeProvider. No special vite.config.ts changes required. Optionally add tekivex-ui to optimizeDeps.include for faster dev cold-starts.
Next.js App Router
Add 'tekivex-ui' to transpilePackages and optimizePackageImports in next.config.js. Create a client-component Providers wrapper for ThemeProvider. 13 RSC-compatible components (TkxBadge, TkxAvatar, TkxCard, TkxAlert, TkxProgress, TkxTimeline, etc.) render on the server without 'use client'.
Next.js Pages Router
Same as App Router but mount ThemeProvider in pages/_app.tsx. transpilePackages required.
Webpack 5
Configure style-loader and css-loader for the CSS import. Set resolve.conditionNames to ['import', 'require', 'default'] for export-map resolution. Tree-shaking works automatically via the sideEffects field.
Remix / React Router 7
Load the stylesheet via the route module's links() function: import tekivexStyles from 'tekivex-ui/dist/style.css?url'.
Parcel, Rollup, Astro, CRA
Parcel 2 is zero-config. Rollup library consumers should externalise tekivex-ui as a peer. Astro works via React islands with client:load. Create React App is supported but we recommend migrating to Vite for faster builds.
Getting Started
Install TekiVex UI from npm: npm install tekivex-ui
Import the ThemeProvider and wrap your app: import { ThemeProvider, quantumDark } from 'tekivex-ui';
Then import and use any component: import { TkxButton, TkxCard, TkxInput } from 'tekivex-ui';
TekiVex UI version 3.0.3 is available now on npm. The library is MIT licensed and free for personal and commercial use. v3.0 ships 99 components, a built-in security kernel, and 1034 passing tests.
Templates
TekiVex UI includes seven complete page templates: Dashboard (analytics with charts and KPIs), Portfolio (personal/agency showcase), E-commerce (product catalogue and shopping cart), Supply Chain (logistics and warehouse management), Blog/CMS (article listing and reading), Admin Settings (tabbed configuration panel), Landing Page (marketing page with hero, features, pricing, and FAQ).
Blog
The TekiVex UI blog publishes in-depth technical articles on React development, accessibility, security, and AI-powered UIs. Recent articles: Building Accessible React Components: A Complete WCAG + APG Guide, Why Zero-Trust Security Matters in UI Component Libraries, React Server Components: What Every Developer Needs to Know in 2026, Building AI-Powered UIs: Confidence Bars, Chat Bubbles and Thinking Indicators.
Open Source
TekiVex UI is fully open source under the MIT license. Source code is available on GitHub at www.tekivex.com/ui. The package is published to npm as tekivex-ui and can be installed with npm install tekivex-ui or yarn add tekivex-ui. TekiVex UI was created by 007krcs and is free for all personal and commercial projects.