Quick reference — when to reach for which component
You already adopted some of the library. The risk is reaching for raw HTML
the next time a need comes up that another Tkx* component already covers.
This page is the use-case index: skim by what you’re trying to build, not by component name. Each row is one line, one trigger phrase, one component — designed to be readable in under 60 seconds.
If you find yourself hand-rolling something that’s not here, that’s a real signal — open an issue at github.com/007krcs/tekivex-ui/issues and we’ll add a row (or a component).
Alerts, banners, callouts
Section titled “Alerts, banners, callouts”| You want to show… | Use | Notes |
|---|---|---|
| Inline success/error/warning/info banner with icon + dismiss | TkxAlert | 4 variants. Has title + children slots. Built-in icons. aria-live="polite". |
| Transient feedback after an action (“Saved”, “Copied”) | TkxSnackbar | Auto-dismiss timer, slide-in animation, anchor positioning. |
| Toast-style stacked notifications | TkxToastProvider + useToast() | Imperative API. Queues, dedupes, respects reduced motion. |
| Empty-state placeholder (“No results”, “Nothing here yet”) | TkxEmpty | Icon + heading + description + optional CTA slot. |
| Full-page result screen (success / error / 404 / 403 / 500) | TkxResult | For routing-level outcomes. Wraps content with a centered icon + heading. |
Most common miss: writing a hand-rolled emerald <div> for a success
banner instead of <TkxAlert variant="success">. That’s losing the
sanitized title, the aria-live announce, and the dismiss button for zero
gain.
Forms & inputs
Section titled “Forms & inputs”| You want to capture… | Use |
|---|---|
| Text, with label + error + hint | TkxInput |
| Numbers (currency, percent, integer, ranges) | TkxNumberInput |
| Single choice from a small list | TkxRadio |
| Single choice from a long list | TkxSelect |
| Multiple choices | TkxCheckbox |
| Toggle on/off | TkxToggle |
| Slider / range | TkxSlider |
| Date | TkxDatePicker |
| Time | (use TkxDatePicker with showTime) |
| Color | TkxColorPicker |
| File (single or multi) | TkxFileUpload — magic-byte verified |
| OTP / verification code | TkxOTP |
| Phone number with country picker | TkxPhoneInput |
| Search with suggestions | TkxAutocomplete |
| Hierarchical select (region → country → state) | TkxCascader |
| @mention / # tag in textarea | TkxMentions |
| Submit button with loading + disabled states | TkxButton |
| 2 / 3 / N option segmented control | TkxSegmented |
| Move items between two lists | TkxTransferList |
| Multi-step wizard | TkxStepper |
| Build the whole form declaratively | TkxFormBuilder (docs page not published yet — see source) |
For the validation layer (Zod / Valibot / React Hook Form), see
tekivex-ui/headless — useFormWithZod,
useFormWithValibot, and createRHFBindings.
Data display
Section titled “Data display”| You want to render… | Use |
|---|---|
| Simple table with sort/filter/paginate | TkxDataGrid — also: column pinning, row grouping, cell editing, tree data |
| Pivot / cross-tab | TkxPivotTable (docs page pending) |
| Spreadsheet-style editing | TkxSpreadsheet (docs page pending) |
| Hierarchical tree of nodes | TkxTreeView — or TkxDataGrid with childRowsKey |
| Org chart | TkxOrgChart |
| Mind map | TkxMindMap (docs page pending) |
| Gantt chart | TkxGantt (docs page pending) |
| Kanban board | TkxKanban (docs page pending) |
| Flowchart / node graph | TkxFlowChart (docs page pending) |
| KPI tile | TkxStatistic |
| Card grid for list items | TkxCard |
| Avatar (image + initials fallback + presence dot) | TkxAvatar |
| Status / category pill | TkxBadge or TkxTag |
| Timeline of events | TkxTimeline |
| Lazy image with skeleton + lightbox | TkxImage |
Charts
Section titled “Charts”import { ... } from 'tekivex-ui/charts';| You want to show… | Use |
|---|---|
| Line / area / bar / pie / donut / scatter / radar | The full Recharts-backed set |
| Inline trend strip (no axes) | TkxSparkline — own-SVG, zero deps |
| Speedometer / arc gauge | TkxGauge — own-SVG |
| Matrix / cohort / correlation heatmap | TkxHeatmap — own-SVG |
| Conversion funnel with drop-off % | TkxFunnelChart — own-SVG |
| Treemap | TkxTreemap — squarified, own-SVG |
The 5 own-SVG primitives (Sparkline, Gauge, Heatmap, Funnel, Treemap) don’t need Recharts at all. They’re under 1 kB each gzip.
Communication & chat
Section titled “Communication & chat”| You want… | Use |
|---|---|
| LLM conversation surface (user / assistant / system, string content) | TkxChat |
| Peer-to-peer chat with media, reactions, threading, edit/delete, delivery states, typing indicator | TkxPeerChat (demo) — new in v3.19 |
| One AI chat bubble in a custom layout | TkxAIChatBubble (experimental subpath) |
| Render a single agent turn (text + tool_use + tool_result) | TkxAgentMessage from tekivex-ui/agent |
Most common mistake: using TkxChat for peer-to-peer messaging. The
3-role enum (user | assistant | system) is from OpenAI’s Chat
Completions API — it doesn’t model real people. Use TkxPeerChat for that.
Layout & navigation
Section titled “Layout & navigation”| You want… | Use |
|---|---|
| Full app shell (header + sidebar + content + footer) | TkxLayout |
| Sticky top nav | TkxAppBar |
| Mobile bottom tab bar | TkxBottomNav |
| Tabs | TkxTabs |
| Breadcrumbs | TkxBreadcrumb |
| Dropdown menu (with submenus, separators, checks) | TkxMenu |
| Single dropdown button | TkxDropdown |
| Command palette (⌘K) | TkxCommand or TkxCommandPalette (docs page pending) |
| Scroll-spy anchor list | TkxAnchor |
| Sticky element on scroll | TkxAffix |
| Pagination controls | TkxPagination |
| Action toolbar | TkxToolbar |
| Floating action button with quick actions | TkxSpeedDial |
Overlays & feedback
Section titled “Overlays & feedback”| You want… | Use |
|---|---|
| Modal dialog | TkxModal — focus trap, scroll lock, 4 sizes |
| Side sheet | TkxDrawer — top/right/bottom/left |
| Hover tooltip | TkxTooltip |
| Click popover | TkxPopover |
| Loading spinner | TkxSpin |
| Progress bar (linear or circular) | TkxProgress |
| Loading skeleton placeholder | TkxSkeleton |
| Guided product tour | TkxTour |
Security primitives
Section titled “Security primitives”import { ... } from 'tekivex-ui/headless' — zero UI, just the engines:
| You want to… | Use |
|---|---|
| Strip XSS from a user-supplied string | sanitizeString(input) |
| Strip bidi/zero-width Trojan-Source chars from text input | sanitizeUnicode(input) |
| Safely parse JSON without prototype pollution | sanitizeJSON(input) |
| Verify a file’s real type by reading magic bytes (not Content-Type) | sniffMimeType(arrayBuffer) |
| Redact PII before sending text to an LLM or logs | scrubPII(text) — regex + Luhn-validated CC |
| Build a strict CSP policy in one line | buildTkxCSP({...}) |
| Install a Trusted Types policy | installTrustedTypes() |
| Append-only SHA-256 hash-chained audit log | audit() / verifyAuditIntegrity() / getAuditLog() |
| Detect iframe embedding | isFramed() |
| Per-token-bucket client-side rate limit | createRateLimiter(n, intervalMs) |
| Check WCAG contrast | contrastRatio(fg, bg), meetsAA(fg, bg), meetsAAA(fg, bg) |
These are the things that make consumer reviews say “wait, this just ships?”. They do.
Indian KYC pack
Section titled “Indian KYC pack”import { TkxAadhaarInput, TkxKycInputs, ... } from 'tekivex-ui';Aadhaar (with Verhoeff checksum), PAN, Voter ID, Driving License, INR currency formatting (lakh / crore), India Post PIN lookup, Tithi / Nakshatra / Hijri / Hebrew / Buddhist lunar calendars. Used by any product selling into India that doesn’t want to roll its own validators.
import { I18nProvider, useLocale } from 'tekivex-ui/i18n';44 locales including RTL (ar-SA, he-IL, fa-IR). Tree-shakeable
per-locale.
Also at tekivex-ui/i18n: getPluralCategory(locale, n) and
pluralize(locale, n, forms) for CLDR plural rules.
Companion packages (not in tekivex-ui)
Section titled “Companion packages (not in tekivex-ui)”| You want… | Install |
|---|---|
| Real WebGL 3D / 360° / WebXR / holographic | npm install tekivex-3d three |
| Browser-only PDF rendering (no Puppeteer) | npm install tekivex-pdf |
| PDF templates (invoice, certificate, resume, etc.) | npm install tekivex-templates |
| Standalone security kernel (framework-agnostic) | npm install tekivex-security-core |
| Tokens for Figma | npm install tekivex-figma-kit |
If something’s missing from this page
Section titled “If something’s missing from this page”Three possibilities:
- The use case is real but no component exists yet. Open an issue. Your specific case might be on the roadmap, or it might be a real gap.
- The component exists but isn’t on this page. Open an issue, we’ll
add the row. (See
scripts/generate-component-mdx.mjs— keeping this page in sync is a known follow-up.) - You can’t tell which of two components to use. Open an issue with the trade-off you’re weighing. The decision criteria belong on this page if they aren’t already.
The library has 116 production components and most consumers use 15-25 of them. The discoverability gap is real. This page is the first attempt to close it — feedback welcome.