{"_id":"@aqib_nawab/techui","_rev":"5-114ae30e9d6d8b2858a1b3343d37e8c6","name":"@aqib_nawab/techui","dist-tags":{"latest":"0.1.4"},"versions":{"0.1.0":{"name":"@aqib_nawab/techui","version":"0.1.0","keywords":["techui","components","react","nextjs","cli","registry"],"author":{"name":"AQIB NAWAB"},"license":"MIT","_id":"@aqib_nawab/techui@0.1.0","maintainers":[{"name":"aqib_nawab","email":"aqibnawab1100@gmail.com"}],"homepage":"https://techui.vercel.app","bugs":{"url":"https://github.com/AQIB-NAWAB/TechUI/issues"},"bin":{"techui":"bin/techui.js"},"dist":{"shasum":"0e1c2883fc745e85f7230c8ed1ce39f790105e13","tarball":"https://registry.npmjs.org/@aqib_nawab/techui/-/techui-0.1.0.tgz","fileCount":5,"integrity":"sha512-0H8UmBs4q8wv2DT0WB3YE+F69DEBM3s4/kJ8lLcGSyaLOjMelW65pImQL79+KCYorgnmF8FJ++K7jQDgQ5W6IA==","signatures":[{"sig":"MEYCIQCntbDmKoaRWJHwaqyVCRgLtkiCXLW9YwknJF1vSWMtlwIhAOLGoboD6kM0lyIccDTILGApFRrJNV8n3nT/6Jn5iVzS","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":8982},"type":"module","engines":{"node":">=18"},"gitHead":"0f2dd531ee2b0f3e2eaacafbcd5410d811e2ed47","_npmUser":{"name":"aqib_nawab","email":"aqibnawab1100@gmail.com"},"repository":{"url":"git+https://github.com/AQIB-NAWAB/TechUI.git","type":"git","directory":"packages/cli"},"_npmVersion":"10.9.4","description":"Add interactive engineering education components to your project — like shadcn, but for TechUI.","directories":{},"_nodeVersion":"24.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/techui_0.1.0_1787548550686_0.036926601445287144","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@aqib_nawab/techui","version":"0.1.1","keywords":["techui","components","react","nextjs","cli","registry"],"author":{"name":"AQIB NAWAB"},"license":"MIT","_id":"@aqib_nawab/techui@0.1.1","maintainers":[{"name":"aqib_nawab","email":"aqibnawab1100@gmail.com"}],"homepage":"https://techui.vercel.app","bugs":{"url":"https://github.com/AQIB-NAWAB/TechUI/issues"},"bin":{"techui":"bin/techui.js"},"dist":{"shasum":"6224f1205995e9a04189f793b9107f3489137ec3","tarball":"https://registry.npmjs.org/@aqib_nawab/techui/-/techui-0.1.1.tgz","fileCount":5,"integrity":"sha512-XU7RkwwFVnNiVnz2zW0fik1qPmyDgbT03EOMNM993hpWsh5FwSVERcmxx4XuHqJ4uVlD6r9Iqws5CGK8ZSiHHw==","signatures":[{"sig":"MEUCIQDfXmj9xa+TwbEfefwBbHgeXxacPVTGZzl+w3zAapnfYQIgDbKcHrnQhA9ZvRgQx/t3/15LBX0yztu7YxVxjN1xkKY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9074},"type":"module","engines":{"node":">=18"},"gitHead":"0f2dd531ee2b0f3e2eaacafbcd5410d811e2ed47","_npmUser":{"name":"aqib_nawab","email":"aqibnawab1100@gmail.com"},"repository":{"url":"git+https://github.com/AQIB-NAWAB/TechUI.git","type":"git","directory":"packages/cli"},"_npmVersion":"10.9.4","description":"Add interactive engineering education components to your project — like shadcn, but for TechUI.","directories":{},"_nodeVersion":"24.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/techui_0.1.1_1787548589258_0.45030644470164183","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@aqib_nawab/techui","version":"0.1.2","keywords":["techui","components","react","nextjs","cli","registry"],"author":{"name":"AQIB NAWAB"},"license":"MIT","_id":"@aqib_nawab/techui@0.1.2","maintainers":[{"name":"aqib_nawab","email":"aqibnawab1100@gmail.com"}],"homepage":"https://techui.vercel.app","bugs":{"url":"https://github.com/AQIB-NAWAB/TechUI/issues"},"bin":{"techui":"bin/techui.js"},"dist":{"shasum":"2d76f0741821e67c6bbf3765d49131970f4fc033","tarball":"https://registry.npmjs.org/@aqib_nawab/techui/-/techui-0.1.2.tgz","fileCount":5,"integrity":"sha512-+Jcv0wAQugw38fOWt4gopLMbbLFSFrpMBVHo8Y1SPS4+awkXN/dPJ+URmTOnC2+9mJi5S8stnbLuWm3o3jwEiQ==","signatures":[{"sig":"MEYCIQDk2mUyQkROG+pelNLF6BGoHUROv9bH4VZA3eVH16h5bgIhAMSOLInixpL+yr0mclBQ1qgtBgy3jvS46n/QtfGUlbx+","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9149},"type":"module","engines":{"node":">=18"},"gitHead":"0f2dd531ee2b0f3e2eaacafbcd5410d811e2ed47","_npmUser":{"name":"aqib_nawab","email":"aqibnawab1100@gmail.com"},"repository":{"url":"git+https://github.com/AQIB-NAWAB/TechUI.git","type":"git","directory":"packages/cli"},"_npmVersion":"10.9.4","description":"Add interactive engineering education components to your project — like shadcn, but for TechUI.","directories":{},"_nodeVersion":"24.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/techui_0.1.2_1787548628768_0.049134160580262654","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@aqib_nawab/techui","version":"0.1.3","keywords":["techui","components","react","nextjs","cli","registry"],"author":{"name":"AQIB NAWAB"},"license":"MIT","_id":"@aqib_nawab/techui@0.1.3","maintainers":[{"name":"aqib_nawab","email":"aqibnawab1100@gmail.com"}],"homepage":"https://techui.vercel.app","bugs":{"url":"https://github.com/AQIB-NAWAB/TechUI/issues"},"bin":{"techui":"bin/techui.js"},"dist":{"shasum":"ee679724d9d5878947095d11d3aebe4a827922be","tarball":"https://registry.npmjs.org/@aqib_nawab/techui/-/techui-0.1.3.tgz","fileCount":11,"integrity":"sha512-Y7He1BWFrURI5twR/IbiAyFwMTbP2LZgv0MrK2mFUk2oZRVUmOR4487c+9tIjyuIG4tlbLgjhWUXQUvyJv8VBw==","signatures":[{"sig":"MEQCIHP3Wk8k09HLHRpszBKLlYMf96XWNNkE4I/tRnlFZLy8AiAoCShEWErXPPrxHRuIy1bFVzUeHNX9Vhe3RydCkI1MQg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":384736},"type":"module","engines":{"node":">=18"},"gitHead":"0f2dd531ee2b0f3e2eaacafbcd5410d811e2ed47","_npmUser":{"name":"aqib_nawab","email":"aqibnawab1100@gmail.com"},"repository":{"url":"git+https://github.com/AQIB-NAWAB/TechUI.git","type":"git","directory":"packages/cli"},"_npmVersion":"10.9.4","description":"Add interactive engineering education components to your project — like shadcn, but for TechUI.","directories":{},"_nodeVersion":"22.21.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/techui_0.1.3_1787560329809_0.5534638369728115","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"@aqib_nawab/techui","version":"0.1.4","description":"Add interactive engineering education components to your project — like shadcn, but for TechUI.","license":"MIT","type":"module","bin":{"techui":"bin/techui.js"},"keywords":["techui","components","react","nextjs","cli","registry"],"engines":{"node":">=18"},"author":{"name":"AQIB NAWAB"},"homepage":"https://techui.vercel.app","bugs":{"url":"https://github.com/AQIB-NAWAB/TechUI/issues"},"repository":{"type":"git","url":"git+https://github.com/AQIB-NAWAB/TechUI.git","directory":"packages/cli"},"publishConfig":{"access":"public"},"_id":"@aqib_nawab/techui@0.1.4","gitHead":"47d362e319d5f43de8def6838753f5b57554d81a","_nodeVersion":"22.21.1","_npmVersion":"10.9.4","dist":{"integrity":"sha512-A/8dmcUtLgX01rUudtFi0XoIHCvigJm8htcCwNj/gfGtP/Igoy9et3o2oc7fVOxDX2kt6JUkRT025b78Eaibaw==","shasum":"a225f54a8ab3af0e4b5b33e224e98234276fc8ce","tarball":"https://registry.npmjs.org/@aqib_nawab/techui/-/techui-0.1.4.tgz","fileCount":11,"unpackedSize":384736,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDShEuPBsCkhGtoWdp035L4dN1C8r3yu8oDhXcU4bRT8QIgbNhcCKajp2kWlS9DMNiOs+acFcxMr0uTCOix7afXO1s="}]},"_npmUser":{"name":"aqib_nawab","email":"aqibnawab1100@gmail.com"},"directories":{},"maintainers":[{"name":"aqib_nawab","email":"aqibnawab1100@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/techui_0.1.4_1787561219958_0.8507420163795361"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-24T05:15:50.458Z","modified":"2026-08-24T08:47:00.256Z","0.1.0":"2026-08-24T05:15:50.838Z","0.1.1":"2026-08-24T05:16:29.401Z","0.1.2":"2026-08-24T05:17:09.142Z","0.1.3":"2026-08-24T08:32:09.984Z","0.1.4":"2026-08-24T08:47:00.110Z"},"bugs":{"url":"https://github.com/AQIB-NAWAB/TechUI/issues"},"author":{"name":"AQIB NAWAB"},"license":"MIT","homepage":"https://techui.vercel.app","keywords":["techui","components","react","nextjs","cli","registry"],"repository":{"type":"git","url":"git+https://github.com/AQIB-NAWAB/TechUI.git","directory":"packages/cli"},"description":"Add interactive engineering education components to your project — like shadcn, but for TechUI.","maintainers":[{"name":"aqib_nawab","email":"aqibnawab1100@gmail.com"}],"readme":"# TechUI\n\n**Interactive React components that make software engineering concepts visually obvious.**\n\nAdd rate limiters, circuit breakers, DNS lookups, JWT flows, RAG pipelines, and **180+ more** to any Next.js or React project — the same way you add [shadcn/ui](https://ui.shadcn.com) components.\n\n[![Live playground](https://img.shields.io/badge/playground-live-18181b?style=for-the-badge)](https://techui.vercel.app/playground)\n[![License: MIT](https://img.shields.io/badge/license-MIT-blue?style=for-the-badge)](./LICENSE)\n\n---\n\n## Why TechUI?\n\nMost engineering concepts are explained with walls of text. TechUI gives you **ready-made, interactive cards** — each one a self-contained lesson with animations, live controls, and plain-English descriptions. Drop them into docs, courses, blog posts, or internal tools.\n\n**Live demo:** [techui.vercel.app/playground](https://techui.vercel.app/playground)\n\n---\n\n## Quick start\n\n```bash\n# 1. Initialize TechUI in your project\nnpx @aqib_nawab/techui init\n\n# 2. Add the cn() utility (required by most components)\nnpx @aqib_nawab/techui add utils\n\n# 3. Add any component by name\nnpx @aqib_nawab/techui add rate-limiter\nnpx @aqib_nawab/techui add circuit-breaker dns-lookup jwt-flow\n```\n\nThen import and use:\n\n```tsx\nimport { RateLimiter } from \"@/components/techui/api/RateLimiter\";\n\nexport default function Page() {\n  return (\n    <RateLimiter\n      name=\"API Rate Limiter\"\n      limit={8}\n      windowSeconds={60}\n      refillRate={1}\n    />\n  );\n}\n```\n\n---\n\n## Component showcase\n\nEach component is a polished, interactive card with a fixed layout: header → description → visual → footer action.\n\n### Rate Limiter\n\nToken-bucket animation — watch tokens refill and requests get rejected when the bucket is empty.\n\n![Rate Limiter component](./assets/rate-limiter.png)\n\n```bash\nnpx @aqib_nawab/techui add rate-limiter\n```\n\n---\n\n### Circuit Breaker\n\nClosed / Open / Half-Open states with a live request simulator.\n\n![Circuit Breaker component](./assets/circuit-breaker.png)\n\n```bash\nnpx @aqib_nawab/techui add circuit-breaker\n```\n\n---\n\n### DNS Lookup\n\nHop-chain diagram showing stub → recursive → root → TLD → authoritative resolution.\n\n![DNS Lookup component](./assets/dns-lookup.png)\n\n```bash\nnpx @aqib_nawab/techui add dns-lookup\n```\n\n---\n\n### JWT Auth Flow\n\nFull stateless auth lifecycle: login → issue → transmit → verify.\n\n![JWT Auth Flow component](./assets/jwt-flow.png)\n\n```bash\nnpx @aqib_nawab/techui add jwt-flow\n```\n\n---\n\n### RAG Pipeline\n\nRetrieval-Augmented Generation — query → embed → vector search → LLM → answer.\n\n![RAG Pipeline component](./assets/ai-rag.png)\n\n```bash\nnpx @aqib_nawab/techui add ai-rag\n```\n\n---\n\n## Commands\n\n| Command | Description |\n|---------|-------------|\n| `npx @aqib_nawab/techui init` | Create `techui.json` in your project root |\n| `npx @aqib_nawab/techui add <name>` | Copy one or more components into your project |\n| `npx @aqib_nawab/techui add <name> --overwrite` | Replace existing files |\n| `npx @aqib_nawab/techui list` | List all available components |\n| `npx @aqib_nawab/techui list --category api` | Filter by category |\n\nInstall globally to use the shorter `techui` command:\n\n```bash\nnpm i -g @aqib_nawab/techui\ntechui init\ntechui add rate-limiter\n```\n\n---\n\n## Configuration\n\nRunning `init` creates `techui.json`:\n\n```json\n{\n  \"$schema\": \"https://techui.dev/schema/techui.json\",\n  \"style\": \"default\",\n  \"rsc\": true,\n  \"tsx\": true,\n  \"tailwind\": {\n    \"config\": \"\",\n    \"css\": \"src/app/globals.css\",\n    \"baseColor\": \"zinc\",\n    \"cssVariables\": true\n  },\n  \"aliases\": {\n    \"components\": \"@/components/techui\",\n    \"utils\": \"@/lib/utils\"\n  },\n  \"registry\": \"https://techui.vercel.app/r\"\n}\n```\n\n| Field | Purpose |\n|-------|---------|\n| `aliases.components` | Where component files are copied |\n| `aliases.utils` | Path to your `cn()` helper |\n| `registry` | URL of the component registry (auto-updated on deploy) |\n\nComponents install to:\n\n```\nsrc/components/techui/\n├── api/\n│   └── RateLimiter.tsx\n├── distributed/\n│   └── CircuitBreaker.tsx\n└── ...\n```\n\n---\n\n## Requirements\n\nTechUI components need these peer dependencies (same stack as shadcn/ui):\n\n```bash\nnpm install react react-dom zod lucide-react clsx tailwind-merge\nnpm install -D tailwindcss\n```\n\nEach component also uses Tailwind CSS utility classes. Your project should already have Tailwind configured (Next.js + shadcn setup works out of the box).\n\n**Always add `utils` first** if you don't already have a `cn()` helper:\n\n```bash\nnpx @aqib_nawab/techui add utils\n```\n\n---\n\n## Browse all components\n\n```bash\nnpx @aqib_nawab/techui list\n```\n\n**Categories:** API · Architecture · Database · Auth · Networking · Cloud · Containers · Distributed · Code · DevTools · UI · AI · Education\n\nOr explore interactively: [techui.vercel.app/playground](https://techui.vercel.app/playground)\n\n---\n\n## How it works\n\nTechUI follows the [shadcn registry pattern](https://ui.shadcn.com/docs/registry):\n\n1. **Registry** — JSON files hosted at `https://techui.vercel.app/r/` with full component source\n2. **CLI** — Fetches registry entries and copies files into your project\n3. **You own the code** — Components live in your repo, fully editable\n\nWhen new components are added to TechUI, you get them automatically — no CLI update needed.\n\n---\n\n## For AI agents & IDEs\n\nTechUI includes an agent skill for Cursor and compatible tools. See the main repo:\n\n- **Skill:** [skills/techui/SKILL.md](https://github.com/AQIB-NAWAB/TechUI/blob/main/skills/techui/SKILL.md)\n- **Design spec:** [docs/COMPONENT_SPEC.md](https://github.com/AQIB-NAWAB/TechUI/blob/main/docs/COMPONENT_SPEC.md)\n\n---\n\n## Links\n\n| | |\n|---|---|\n| **Playground** | [techui.vercel.app/playground](https://techui.vercel.app/playground) |\n| **GitHub** | [github.com/AQIB-NAWAB/TechUI](https://github.com/AQIB-NAWAB/TechUI) |\n| **Registry** | [techui.vercel.app/r/index.json](https://techui.vercel.app/r/index.json) |\n| **Issues** | [github.com/AQIB-NAWAB/TechUI/issues](https://github.com/AQIB-NAWAB/TechUI/issues) |\n\n---\n\n## License\n\nMIT © [AQIB NAWAB](https://github.com/AQIB-NAWAB)\n","readmeFilename":"README.md"}