npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

tekivex-ui

v3.20.1

Published

Production-grade React component library — 116 components (plus 4 experimental, opt-in), WCAG 2.1 AAA, WAI-ARIA 1.2, built-in security kernel with published threat model, built-in charts, headless primitives, zero-runtime CSS engine, 44-locale i18n, India

Readme

⚡ TekiVex UI

The React component library that ships with a threat model.

WCAG 2.1 AAA target (third-party audit on roadmap, not yet completed) · WAI-ARIA 1.2 · SecurityCore (XSS · clickjacking · Trojan Source · CSP · PII · magic-byte MIME · Trusted Types) · 116 production components (+ 4 experimental, opt-in) · Zero runtime dependencies in core

📄 Security Threat Model — the only mainstream React UI library that publishes one. 15 STRIDE-mapped threats with CWE references.

npm version npm downloads License: MIT TypeScript React WCAG 2.1 AAA Tests SecurityCore Socket.dev SBOM

npm install tekivex-ui

📖 Docs · 🚀 Demo · 📦 npm · 🐛 Report Issue · ⭐ Star


The 14-package ecosystem at a glance

tekivex-ui is the main library, but the ecosystem ships 14 npm packages total. You typically need 1–3 of them, not 14. Map below groups by the question that makes you install each one. Full reference: ui.tekivex.com/ecosystem.

| If you're building… | npm install | |---|---| | A React UI (most people start here) | tekivex-ui | | A new React app from scratch | npm create tekivex-app@latest my-app | | A node / edge service that needs the security primitives | tekivex-security-core | | CI a11y + security audit step | npx tekivex-audit . | | An Indian KYC form (Aadhaar / PAN / Voter ID / DL / INR / Tithi) | tekivex-ui tekivex-india | | An address form with Country → State → District dropdowns | tekivex-ui tekivex-india-admin | | A fintech / banking product | tekivex-ui tekivex-finance | | A CMS / blog editor / document tool | tekivex-ui tekivex-content | | In-browser PDF generation (no Puppeteer) | tekivex-pdf | | Ready-made PDF templates (Invoice / Resume / Certificate / Biodata) | tekivex-pdf tekivex-templates | | 3D / 360° / VR / AR in React | tekivex-ui tekivex-3d (peer dep: three) | | Figma token + variant catalog for design handoff | tekivex-figma-kit | | Copy ONE component's source into your existing app (shadcn-style) | npx tekivex-add <component> | | Form primitives only (without the rest of tekivex-ui) | tekivex-form (already in tekivex-ui; install only if you're NOT using tekivex-ui) |

Why so many packages? Independent versioning, smaller bundles, opt-in peer deps. A consumer wanting tekivex-pdf shouldn't have to pull three.js. A consumer wanting tekivex-india-admin shouldn't wait for a tekivex-ui release when LGD data refreshes. Each package versions and ships on its own clock; this README always reflects the current install matrix.


Project status — read before adopting

TekiVex UI is pre-1.0 and currently maintained by a single developer (007krcs) on [email protected]. We ship a public CycloneDX SBOM, a security threat model (15 STRIDE threats with CWE refs), and 1,798 tests at the published version — but none of that substitutes for the human-scale risk of any pre-1.0, single-maintainer library.

When published from CI, releases carry npm provenance attestations. Local releases (currently the norm during pre-1.0) do not — verify provenance status with npm view tekivex-ui --json | jq '.dist.attestations' if it matters to your supply-chain policy.

Honest guidance:

  • Pin your version ("tekivex-ui": "3.18.0", not "^3.18.0") until v4.0
  • Read TROUBLESHOOTING.md before integrating — covers known Next.js / RSC / SSR / hydration issues
  • Audit the SBOM at ui.tekivex.com/security/sbom.json — verifies zero runtime deps
  • Verify the package with npm view tekivex-ui before installing if you're concerned about typosquats (the legitimate name is exactly tekivex-ui)
  • Check Socket.dev Socket.dev for supply-chain risk score
  • For regulated-industry teams: we're open to design-partner collaborations with regulated-industry teams — see docs/design-partners/README.md for the playbook. No reserved slots, no formal program in place yet; reach out if it fits your situation.

Expect breaking changes at v4.0 — see docs/ROADMAP.md. Until then, the API surface marked stable will not break in minor or patch releases.

Recent compatibility fixes (v3.18, published 2026-05-28):

  • Build no longer emits Vite's chunk runtime format — works in Next.js / RSC (was broken pre-v3.18)
  • ThemeProvider mode="auto" is now SSR-safe + themeInitScript() helper for FOUC-free initialisation
  • 'use client' directives on every hook-using component
  • isDisabled absorbed as a deprecated alias (no longer pollutes DOM)
  • background / backgroundImage shorthand conflict removed

Standalone template repos

The resume + biodata templates have moved into their own repos so apps that only need the templates don't have to pull the entire tekivex-ui install:

| Use case | Install | | ------------------------ | ------------------------------------------------------------------------------------------------------ | | Resume builder | tekivex-resume-templates — 12 templates + smart generator + paywall + browser-only PDF | | Marriage biodata builder | tekivex-biodata-templates — 12 templates with auto religious symbols + custom logo upload + 11 vendored biodata-app helpers |

Both repos ship the same generator pattern (form → A4 preview → 1-page print), the same locked-by-default policy, and the same image-upload UX as the original TkxTemplateGenerator in this repo (which is staying for backward compatibility).


What's new in v3.6 → v3.15

| Component | Lands in | Tests | Coverage | | ------------------------ | -------- | ----- | --------------------- | | TkxFormBuilder | v3.6 | 17 | (full unit) | | TkxMindMap | v3.7 | 12 | (full unit) | | TkxGantt | v3.8 | 14 | (full unit) | | TkxSpreadsheet | v3.9 | 29 | (full unit) | | TkxPivotTable | v3.10 | 12 | (full unit) | | TkxDataExplorer | v3.11 | 21 | (full unit) | | TkxHolographicAdvanced | v3.12 | 28 | 93 / 94 / 91 / 89 | | TkxCommandPalette | v3.13 | 16 | (full unit) | | TkxFormulaBar | v3.14 | 18 | 100 / 100 / 100 / 90 | | TkxFlowChart | v3.15 | 40 | 97 / 96 / 95 / 86 |

Coverage notation: lines / statements / functions / branches.

Pair tekivex-ui with tekivex-3d for the spatial UI toolkit (Scene, Panorama360, Hotspot, XRSession, Model3D, Logo3D, ParticleField, OrbitControls, Starfield, Planet, OrbitPath, Portal3D, Avatar3D — 14 primitives at source v0.7).


Why TekiVex UI?

| Feature | TekiVex UI | MUI | Ant Design | Mantine | shadcn/ui | |---|:---:|:---:|:---:|:---:|:---:| | WCAG AAA target (third-party audit on roadmap, not yet completed) | ✅ | ❌ | ❌ | ❌ | ❌ | | XSS — string props sanitised by default across all text components | ✅ | ❌ | ❌ | ❌ | ❌ | | ClickjackingisFramed() detection + frame-ancestors CSP | ✅ | ❌ | ❌ | ❌ | ❌ | | Trojan Source — bidi/zero-width stripped from text inputs | ✅ | ❌ | ❌ | ❌ | ❌ | | Prototype pollutionsanitizeJSON() safe parser | ✅ | ❌ | ❌ | ❌ | ❌ | | File upload — magic-byte MIME verification (real signatures) | ✅ | ❌ | ❌ | ❌ | ❌ | | CSP builder — one-line strict policy | ✅ | ❌ | ❌ | ❌ | ❌ | | Trusted Types — one-call policy install | ✅ | ❌ | ❌ | ❌ | ❌ | | PII redaction — regex + Luhn-validated CC, pre-LLM/pre-analytics | ✅ | ❌ | ❌ | ❌ | ❌ | | Rate limiter — client-side token-bucket DoS guard | ✅ | ❌ | ❌ | ❌ | ❌ | | Tamper-evident SHA-256 hash-chained audit trail | ✅ | ❌ | ❌ | ❌ | ❌ | | Published threat model | ✅ | ❌ | ❌ | ❌ | ❌ | | Full-featured DataGrid — free | ✅ | 💰 Pro | Partial | Partial | ❌ | | 116 production components — free | ✅ | ✅ | ✅ | ✅ | 30 | | Hooks layer (a11y, theme, i18n) | ✅ | ❌ | ❌ | ✅ | ✅ | | i18n — 44 locales incl. RTL | ✅ | ✅ | ✅ | Partial | ❌ | | Plugin-extensible CSS engine | ✅ | ❌ | ❌ | ❌ | ❌ | | Zero runtime deps in core (recharts optional) | ✅ | ❌ | ❌ | ❌ | ✅ |


Installation

# npm
npm install tekivex-ui

# pnpm
pnpm add tekivex-ui

# yarn
yarn add tekivex-ui

Peer dependencies (already in most React projects):

npm install react@^18 react-dom@^18

Optional — for chart components:

npm install recharts

Quick Start

import { ThemeProvider, quantumDark, TkxButton, TkxCard } from 'tekivex-ui';
import 'tekivex-ui/styles';

export default function App() {
  return (
    <ThemeProvider theme={quantumDark}>
      <TkxCard variant="elevated">
        <h2>Hello TekiVex</h2>
        <TkxButton colorScheme="primary" size="md">
          Get Started
        </TkxButton>
      </TkxCard>
    </ThemeProvider>
  );
}

Package Exports

TekiVex UI ships tree-shakeable entry points — import only what you need:

// Core components + theme + engine  (~120 kB gzip)
import { TkxButton, ThemeProvider, useTheme } from 'tekivex-ui';

// 7 chart types built on Recharts  (~3 kB gzip on top of recharts)
import { TkxAreaChart, TkxBarChart, TkxLineChart, TkxPieChart } from 'tekivex-ui/charts';

// 10 headless hooks — zero styles, your UI  (~2.6 kB gzip)
import { useDisclosure, useFormState, useListSelection } from 'tekivex-ui/headless';

// Agent runtime — Anthropic/OpenAI/Gemini/Ollama, RAG, MCP, A2A, tools (~16 kB gzip)
import { createAgent, AnthropicProvider, useAgent } from 'tekivex-ui/agent';

📘 Full agent runtime reference → docs/AGENT.md


Components (115)

| Component | Description | |---|---| | TkxLayout | Full app shell — header, sidebar, content, footer | | TkxAppBar | Sticky top navigation bar with slots | | TkxSidebar | Collapsible sidebar navigation | | TkxBottomNav | Mobile bottom tab bar | | TkxBreadcrumb | Accessible breadcrumb trail | | TkxMenu | Nested dropdown menu with keyboard navigation | | TkxTabs | Tab panels with WAI-ARIA tabs pattern | | TkxAnchor | Scroll-spy anchor link list | | TkxAffix | Sticky positioning that activates on scroll | | TkxToolbar | Horizontal action bar | | TkxPagination | Page navigation with first/prev/next/last | | TkxStepper | Multi-step wizard — horizontal & vertical |

| Component | Description | |---|---| | TkxDataGrid | Full-featured grid — sort, filter, pagination, CSV export, row selection, ARIA | | TkxTable | Sortable, striped, bordered, responsive | | TkxList | Flexible list with icons and actions | | TkxCard | 5 variants, sub-components (Header/Body/Footer), hoverable | | TkxAvatar | Image + initials fallback, 4 statuses, group stacking | | TkxBadge | 7 variants, dot, pulse, outlined | | TkxTag | Dismissible tags with colour variants | | TkxStatistic | Metric display with trend indicator | | TkxTimeline | Vertical event timeline | | TkxProgress | Linear & circular, indeterminate | | TkxSkeleton | Text, circular, rectangular loading placeholders | | TkxResult | Success / error / 404 / 403 / 500 result pages | | TkxQRCode | QR code generator | | TkxImage | Lazy-load, lightbox, skeleton placeholder, aspect ratio | | TkxRichTextDisplay | Render structured rich-text blocks | | TkxWatermark | Canvas-based watermark overlay | | TkxEmpty | Empty state with custom illustration | | TkxOrgChart | Reingold–Tilford org-chart with pan/zoom, collapsible subtrees, custom renderer |

| Component | Description | |---|---| | TkxForm | Form context provider with field validation | | TkxInput | Text input — labels, error/hint, prefix/suffix | | TkxNumberInput | Numeric input with min/max, step, currency format | | TkxSelect | Single/multi select with search | | TkxCascader | Hierarchical multi-level select | | TkxAutocomplete | Searchable autocomplete | | TkxMentions | @mention textarea | | TkxCheckbox | Controlled + uncontrolled, indeterminate | | TkxRadio | Radio group with ARIA | | TkxToggle | Switch — 3 sizes, aria-checked | | TkxSlider | Range slider — single & dual thumb | | TkxRating | Star/custom-icon rating | | TkxDatePicker | Calendar date picker | | TkxColorPicker | HEX / RGB / HSL colour picker | | TkxOTP | One-time password input | | TkxFileUpload | Drag-and-drop file upload | | TkxSegmented | Segmented control / button group | | TkxTransferList | Dual-panel item transfer | | TkxCommand | Command palette (⌘K) |

| Component | Description | |---|---| | TkxModal | 4 sizes, focus trap, scroll lock, animated | | TkxDrawer | Side sheet — top/right/bottom/left | | TkxTooltip | 4 placements, portal rendering | | TkxPopover | Rich content popover | | TkxSnackbar | Toast notifications with action | | TkxAlert | 4 variants, dismissible, icon slot | | TkxSpin | Loading spinner | | TkxTour | Step-by-step product tour | | TkxSpeedDial | FAB with expandable actions |

| Component | Description | |---|---| | TkxVideoPlayer | Full-featured player — chapters, subtitles, PiP, download | | TkxCarousel | Touch/swipe carousel with thumbnails | | TkxClock | Analog / digital / dual clock | | TkxMasonry | Responsive masonry grid layout | | TkxTreeView | Expandable tree with keyboard navigation | | TkxIcon | 200+ built-in icons | | TkxDivider | Horizontal/vertical with optional label | | TkxTypography | Title, Text, Paragraph — semantic HTML |

These components live in-tree but are excluded from the public barrel — the API surface, prop names, and runtime behaviour MAY change in any minor release. They are not counted in the 115-component headline number.

Import path: import { TkxQuantumForm } from 'tekivex-ui/experimental';

| Component | Notes | |---|---| | TkxQuantumForm | "Quantum-AI" form inference — research-grade, unverified accuracy claims | | TkxAIConfidenceBar | Display widget for model-confidence values | | TkxAIThinking | Animated "thinking" dots for chat surfaces | | TkxAIChatBubble | Single chat-message bubble — overlaps TkxChat; prefer TkxChat for new code |


Charts

Seven production-ready chart types via the tekivex-ui/charts sub-package:

import {
  TkxAreaChart, TkxBarChart, TkxLineChart,
  TkxPieChart, TkxDonutChart,
  TkxScatterChart, TkxRadarChart,
} from 'tekivex-ui/charts';

const data = [
  { month: 'Jan', revenue: 42000, cost: 28000 },
  { month: 'Feb', revenue: 51000, cost: 31000 },
  { month: 'Mar', revenue: 63000, cost: 34000 },
];

<TkxAreaChart
  data={data}
  xKey="month"
  series={[
    { key: 'revenue', label: 'Revenue' },
    { key: 'cost', label: 'Cost' },
  ]}
  height={300}
  showGrid
  showLegend
  smooth
  ariaLabel="Monthly revenue vs cost"
/>

| Chart | Props | |---|---| | TkxAreaChart | data, series, xKey, smooth, showGrid, showLegend | | TkxBarChart | data, series, xKey, layout (horizontal/vertical), gradient | | TkxLineChart | data, series, xKey, referenceLines, connectNulls | | TkxPieChart | data, showLabels, outerRadius, startAngle | | TkxDonutChart | data, centerLabel, centerSublabel, innerRadius | | TkxScatterChart | series, xLabel, yLabel, zRange (bubble sizing) | | TkxRadarChart | data, series, angleKey, outerRadius |


Headless Primitives

Zero-style hooks from tekivex-ui/headless — bring your own UI:

import {
  useDisclosure,     // open/closed state
  useDebounce,       // debounce any value
  useThrottle,       // throttle any value
  useControllable,   // unify controlled/uncontrolled (Radix pattern)
  useListSelection,  // multi-select with selectAll / toggleAll
  useLocalStorage,   // SSR-safe persisted state
  useMediaQuery,     // reactive media query
  useBreakpoint,     // sm/md/lg/xl/xxl/isMobile/isTablet/isDesktop
  useFormState,      // headless form with validation + dirty tracking
  useRovingTabIndex, // WAI-ARIA roving tabIndex keyboard navigation
  useIntersectionObserver, // viewport visibility
} from 'tekivex-ui/headless';

// Example — useDisclosure
const { isOpen, open, close, toggle } = useDisclosure(false);

// Example — useFormState
const { values, errors, touched, isValid, setValue, validate } = useFormState({
  initialValues: { name: '', email: '' },
  validate: (vals) => {
    const errs: Record<string, string> = {};
    if (!vals.name) errs.name = 'Required';
    if (!vals.email.includes('@')) errs.email = 'Invalid email';
    return errs;
  },
});

// Example — useControllable (works controlled or uncontrolled)
const [value, setValue2] = useControllable({
  value: externalValue,      // optional — if omitted, uses internal state
  onChange: onExternalChange, // optional
  defaultValue: 'default',
});

Theming

import { ThemeProvider, createTheme, quantumDark, auroraLight } from 'tekivex-ui';

// Built-in themes
<ThemeProvider theme={quantumDark}>...</ThemeProvider>   // dark
<ThemeProvider theme={auroraLight}>...</ThemeProvider>   // light

// Custom brand theme
const brandTheme = createTheme({
  primary:   '#6366f1',
  secondary: '#8b5cf6',
  bg:        '#0f0f23',
  surface:   '#1a1a3e',
  text:      '#f0f0ff',
});

// Read current theme tokens anywhere
function MyComponent() {
  const theme = useTheme();
  return <div style={{ color: theme.primary }}>Branded</div>;
}

CSS custom properties are injected automatically — no flash of unstyled content (FOUC).


Internationalisation (44 locales)

import { I18nProvider, zhCN, arSA, jaJP, ptBR } from 'tekivex-ui';

<I18nProvider locale="zh-CN">  {/* RTL is detected automatically for ar-SA, he-IL, fa-IR */}
  <App />
</I18nProvider>

Supported locales:

| Region | Locales | |---|---| | English | en-US | | Romance | es-ES · pt-BR · pt-PT · fr-FR · it-IT · ro-RO | | Germanic | de-DE · nl-NL · sv-SE · da-DK | | Slavic | pl-PL · ru-RU · uk-UA · cs-CZ · hu-HU | | Middle East (RTL) | ar-SA · he-IL · fa-IR | | East Asia | ja-JP · ko-KR · zh-CN · zh-TW | | Southeast Asia | th-TH · vi-VN · id-ID | | Other | tr-TR |


TKX Atomic CSS Engine

A zero-runtime, conflict-resolving CSS engine. No Tailwind, no styled-components, no extra config.

import { tkx, cx, cssVar, tkxPlugin } from 'tekivex-ui';

// Single string, no class conflicts
const cls = tkx('flex items-center p-4 hover:bg-surface');

// Conflict resolution — last value wins
tkx('p-4 p-8');  // → only padding: 32px

// Arbitrary values & CSS variables
tkx('w-[42px] text-[#ff6b6b] [--spacing:16px]');

// Conditional classes
cx('base', isActive && 'active', hasError ? 'ring-danger' : 'ring-border');

// Plugin API — extend the engine (unique to TekiVex)
tkxPlugin('glass', () => ({
  backdropFilter: 'blur(12px)',
  backgroundColor: 'rgba(255,255,255,0.08)',
  border: '1px solid rgba(255,255,255,0.12)',
}));
tkx('glass p-6 rounded-xl'); // uses your plugin

Engine performance: O(1) style injection via the Constructable Stylesheets API (document.adoptedStyleSheets) with automatic SSR fallback.


Security

TekiVex UI is the only React component library with a built-in zero-trust security engine. Every string that passes through the library is automatically sanitised — no configuration required.

import { sanitizeString, sanitizeProps, contrastRatio, meetsAA, meetsAAA } from 'tekivex-ui/headless';

// XSS sanitisation (called automatically inside every component)
sanitizeString('<script>alert("XSS")</script>Hello');
// → 'Hello'

sanitizeString('<img src=x onerror="stealCookies()" />');
// → '' (fully stripped)

// WCAG contrast checking
const ratio = contrastRatio('#00f5d4', '#0a0a1a'); // → 8.21
const aa    = meetsAA('#00f5d4', '#0a0a1a');        // → true  (≥ 4.5:1)
const aaa   = meetsAAA('#00f5d4', '#0a0a1a');       // → true  (≥ 7:1)

What's unique:

  • 🛡️ String-prop sanitisation by defaultsanitizeString runs on string props across components without opt-in
  • 📋 Tamper-evident audit trail — SHA-256 hash-chained append-only log for compliance / SIEM
  • 🎨 Built-in WCAG checkercontrastRatio(), meetsAA(), meetsAAA() available anywhere

Accessibility

We target WCAG 2.1 AAA — the highest accessibility standard. Self-tested against the criteria below; a third-party audit is on the roadmap and has not been completed. Treat this section as our internal compliance target, not a certification.

  • ✅ Contrast ratio ≥ 7:1 for all text (AAA, not just AA's 4.5:1) — verified via internal meetsAAA() helper
  • ✅ Full keyboard navigation — Tab, Enter, Space, Arrow keys, Escape
  • ✅ Correct ARIA roles, states & properties (WAI-ARIA 1.2)
  • Focus management — focus trap in modals, visible focus rings
  • Reduced-motion — all animations respect prefers-reduced-motion
  • Screen reader tested — live regions, sr-only text, meaningful alt
  • RTL support — layout mirrors automatically for Arabic, Hebrew, Persian

DataGrid

Full-featured data grid — no paid tier required:

import { TkxDataGrid } from 'tekivex-ui';

<TkxDataGrid
  columns={[
    { key: 'name',   header: 'Name',   sortable: true  },
    { key: 'email',  header: 'Email',  sortable: true  },
    { key: 'status', header: 'Status', filterable: true },
  ]}
  rows={data}
  pageSize={10}
  selectable
  showFilters
  showExport
  exportFileName="users"
/>

| Feature | Free | MUI DataGrid | Ag-Grid | |---|:---:|:---:|:---:| | Sorting | ✅ | ✅ | ✅ | | Column filtering | ✅ | 💰 Pro | ✅ | | Column pinning (left/right) | ✅ | 💰 Pro | ✅ | | Row grouping + aggregations | ✅ | 💰 Pro | 💰 Enterprise | | Tree data / hierarchical rows | ✅ | 💰 Pro | 💰 Enterprise | | Pagination | ✅ | ✅ | ✅ | | Row selection | ✅ | ✅ | ✅ | | CSV export | ✅ | 💰 Pro | 💰 Enterprise | | Full ARIA | ✅ | ✅ | Partial |


Templates

Seven full-page templates included in the demo:

| Template | Description | |---|---| | Dashboard | KPI cards, charts, DataGrid, live stats | | Portfolio | Project showcase, skills, contact form | | E-commerce | Product grid, filters, cart, checkout | | Supply Chain | Shipment tracking, inventory, status | | Blog / CMS | Article list, rich text, tags | | Admin Settings | Profile, security, preferences tabs | | Landing Page | Hero, features, pricing, CTA |


Development

git clone https://ui.tekivex.com
cd tekivex-ui
npm install

# Build the library
npm run build

# Run all 1798 tests
npm test

# Run tests with coverage report
npm run test:coverage

# Type check
npm run typecheck

# Lint
npm run lint

# Run the library Vite playground (localhost:5173)
npm run dev

# Run the interactive demo (localhost:5174)
npm run dev:demo

# Accessibility audit
npm run a11y:audit

# Security audit
npm run security:audit

Testing

90 dedicated component test files · 1798 tests · 0 failures · 1 todo
Coverage: 64.84% lines · 51.10% functions · 56.77% branches · 61.41% statements (ratchet enforced in CI)

Coverage includes dedicated unit tests for 88 of 116 production components plus smoke coverage for the rest, 7 chart types, headless hooks (incl. useWebSocket / useSSE / useMediaQuery), the TKX CSS engine, the WCAG engine, the security (Shield) engine, the i18n provider, and Indian KYC validators (Aadhaar Verhoeff, PAN, Voter ID, DL).

Coverage thresholds are enforced as a CI ratchet in vitest.config.ts — the floor never drops between releases. Path to 90/90/85 is documented in docs/test-coverage-roadmap.md.


Roadmap

Full roadmap with version targets, owners, and definition-of-done at docs/ROADMAP.md.

Nearest milestones:

  • v3.18 (target 2026-07-15) — "Land the audit + first partner." Sign a third-party WCAG audit SOW (Deque / TPGi / WebAIM), land 1 design-partner logo, lift TkxDataGrid to 50+ tests. No new components.
  • v3.19 (target 2026-09-01) — "Coverage + DataGrid completeness." Ratchet coverage 64.84% → 75% lines, ship DataGrid column-pinning and row-grouping, deep-test TkxSelect, TkxDatePicker, TkxMenu, TkxOrgChart, TkxTreeView.
  • v3.20 (target 2026-10-15) — "Forms + i18n depth." Zod + Valibot resolvers for TkxForm, RHF adapter, drop hardcoded-string count below 100, ship 9 new locales (35 → 44).
  • v3.21 (target 2026-12-01) — "Charts + visualizations." New TkxHeatmap, TkxFunnelChart, TkxTreemap, TkxGauge, TkxSparkline.
  • v4.0 (target 2026-12 to 2027-Q1) — "Stable." Third-party AAA VPAT published, 90/90/85 coverage, 70+ locales, 5 published case studies, React 19 required, codemod for the v3 → v4 migration.

Read the full plan, what we WILL NOT do, and how to propose changes → docs/ROADMAP.md


Bug Reports & Issues

Found a bug or have a feature request? Please open an issue on our dedicated issue tracker:

👉 github.com/007krcs/tekivex-ui/issues

When reporting, please include:

  • tekivex-ui version (npm list tekivex-ui)
  • React version
  • Browser / Node version
  • A minimal reproduction (CodeSandbox or code snippet)

Contributing

Contributions are welcome! Please read CONTRIBUTING.md before submitting a PR.

Maintainers: 007krcs · seemaalmas · novaai0401-ui


License

MIT © 2026 007krcs


Made with ⚡ by the TekiVex team

npm · GitHub · Docs