What is TekiVex UI?
TekiVex UI is a comprehensive, open-source React component library built for teams that take accessibility, performance, and security seriously. Every component targets WCAG 2.1 AAA — the highest level of web accessibility conformance — and 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 for WCAG 2.1 AAA compliance. 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.
WCAG 2.1 AAA Accessibility
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 meets every WCAG 2.1 AAA criterion across all 78 components. 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.
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 2.6.0 is available now. The library is MIT licensed and free for personal and commercial use.
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 Guide to WCAG 2.1 AAA, 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 github.com/007krcs/tekivex-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.