How to Create a Scalable KYC Onboarding Flow in React with Shadcn UI

<p>Every B2B SaaS product with a compliance requirement (like banking, lending, payroll, or crypto) hits the same wall early on: before you can let a business use your platform, you need to verify who they are.</p> <p>That means collecting a business type, pulling in registration documents, and showing the user where their verification stands, all without making onboarding feel like a customs form.</p> <p>This article breaks down a working three step KYC (Know Your Customer) flow built with Shadcn UI: a stepper for progress, a radio group for account type, a file upload zone for documents, and an alert for verification status. You'll see the actual component code, not a simplified stand-in, along with the reasoning behind each decision.</p> <p>You can try the finished flow at <a href="http://onboarding-kyc-flow.vercel.app"><strong>onboarding-kyc-flow.vercel.app</strong></a>. Click through it once before reading on, as it makes the code below easier to follow. And it also comes in dark and light mode.</p> <h2 id="heading-table-of-contents"><strong>Table of Contents</strong></h2> <ul> <li><p><a href="#heading-prerequisites">Prerequisites</a></p> </li> <li><p><a href="#heading-what-youre-building">What You're Building</a></p> </li> <li><p><a href="#heading-project-structure">Project Structure</a></p> </li> <li><p><a href="#heading-radix-ui-vs-base-ui-which-primitives-this-flow-uses">Radix UI vs Base UI: Which Primitives this Flow Uses</a></p> </li> <li><p><a href="#heading-scaffolding-the-flow-with-v0-and-an-mcp-server">Scaffolding the Flow with v0 and an MCP Server</a></p> </li> <li><p><a href="#heading-step-1-account-type-with-a-radio-group">Step 1: Account Type with a Radio Group</a></p> </li> <li><p><a href="#heading-step-2-document-upload-with-drag-and-drop">Step 2: Document Upload with Drag and Drop</a></p> </li> <li><p><a href="#heading-step-3-verification-status-with-an-alert">Step 3: Verification Status with an Alert</a></p> </li> <li><p><a href="#heading-adding-a-stepper-to-the-flow">Adding a Stepper to the Flow</a></p> </li> <li><p><a href="#heading-small-details-that-make-it-feel-finished">Small Details that Make it Feel Finished</a></p> </li> <li><p><a href="#heading-accessibility-notes">Accessibility notes</a></p> </li> <li><p><a href="#heading-key-concepts-recap">Key Concepts Recap</a></p> </li> <li><p><a href="#heading-conclusion">Conclusion</a></p> </li> <li><p><a href="#heading-resources">Resources</a></p> </li> </ul> <h2 id="heading-prerequisites">Prerequisites</h2> <p>Before working through this flow, you should be comfortable with React function components and hooks, specifically <code>useState</code>, <code>useRef</code>, and <code>useEffect</code>.</p> <p>You should have:</p> <ul> <li><p>A Next.js project with the App Router and shadcn/ui already initialized, since this article doesn't cover that initial setup.</p> </li> <li><p>A v0 account is optional. You can also use Bolt or Lovable, which support the same shadcn MCP prompt feature.</p> </li> </ul> <h2 id="heading-what-youre-building">What You're Building</h2> <p>The flow has three steps:</p> <ol> <li><p><strong>Account type:</strong> The user picks Startup, Enterprise, or Government. This decision drives the rest of the experience. It's shown back to the user as a confirmation line, and would typically decide which workspace defaults get applied.</p> </li> <li><p><strong>Document upload:</strong> The user drags in a business registration document, a tax return, or a company registry export, in PDF or CSV format.</p> </li> <li><p><strong>Verification status:</strong> The user sees a live status: checking in progress, then either verified or an issue that needs attention.</p> </li> </ol> <h2 id="heading-project-structure">Project Structure</h2> <p>The project is a standard Next.js app with <a href="https://shadcnspace.com/"><strong>shadcn/ui</strong></a> already initialized. Here's the top-level layout:</p> <pre><code class="language-javascript">onboarding-kyc-flow/ ├── .vercel/ ├── app/ ├── components/ ├── lib/ ├── public/ ├── .env.development.local ├── .gitignore ├── components.json ├── next-env.d.ts ├── next.config.mjs ├── package.json ├── pnpm-lock.yaml ├── postcss.config.mjs ├── tsconfig.json └── tsconfig.tsbuildinfo </code></pre> <p><code>components.json</code> is the file the shadcn CLI reads to know where your components live and which style and primitives you're using. <code>components/</code> holds the shared UI pieces (Alert, Badge, Button, Card, Progress, RadioGroup, Separator) that the flow is built from. <code>lib/utils.ts</code> provides the <code>cn</code> helper used throughout the flow to combine conditional class names. <code>app/</code> holds the page itself, shown in full below.</p> <h2 id="heading-radix-ui-vs-base-ui-which-primitives-this-flow-uses">Radix UI vs Base UI: Which Primitives this Flow Uses</h2> <p><a href="https://shadcnspace.com/components"><strong>Shadcn components</strong></a> aren't tied to one underlying primitive library. Most of the ecosystem defaults to Radix UI, but Base UI has become a solid alternative, and it's what this flow is built on.</p> <p>The underlying primitive library can affect how a component behaves and how you work with it in your project. If you're pulling components from a set like Shadcn UI, check which primitive library it targets before mixing components from different sources.</p> <p>Mixing Radix-based and Base UI-based components generally works, but it means using two different unstyled primitive libraries in the same project. You can <a href="https://shadcnspace.com/blog/radix-ui-vs-base-ui"><strong>compare Radix UI and Base UI here</strong></a>.</p> <h2 id="heading-scaffolding-the-flow-with-v0-and-an-mcp-server">Scaffolding the Flow with v0 and an MCP Server</h2> <p>An MCP (Model Context Protocol) server exposes a component library to an AI coding assistant as a set of callable tools. Instead of the assistant guessing at component names and props from training data, it queries the server for the real, current API.</p> <p>This matters here specifically, since there are now several shadcn-style component sets with similar names and different props.</p> <p>The Shadcn Components library publishes an MCP server for its free set, connected to v0 by following its <a href="https://shadcnspace.com/docs/getting-started/mcp-server-docs"><strong>getting started guide</strong></a>. The video below covers the connection step by step. The same generated output can also be copied into Lovable or Bolt through their copy prompt feature, so the workflow isn't locked to one AI builder.</p> <div class="embed-wrapper"><iframe width="560" height="315" src="https://www.youtube.com/embed/ymTlzbkvvPk" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy"></iframe></div> <p>The prompt used to scaffold this flow looked like this:</p> <blockquote> <p>Create an Enterprise SaaS Onboarding &amp; KYC Flow. Use free components of the shadcn space MCP server: shadcn alert, shadcn radio group, shadcn stepper, shadcn file upload. Only use free components, not pro ones, and list which free component was used for each part.</p> <p>Step 1: Account Type (stepper) - radio group for Startup, Enterprise, or Government</p> <p>Step 2: Upload Documents (stepper) - file upload for a business registration document</p> <p>Step 3: Verification (stepper) - alert showing verification status</p> </blockquote> <p>This produces a working first draft fast. What follows is the result after cleaning that draft up: real state management, real validation, and states that a generated draft tends to skip.</p> <h2 id="heading-step-1-account-type-with-a-radio-group">Step 1: Account Type with a Radio Group</h2> <p>Account type is the first decision in the flow because it's the one most likely to affect what comes after it. Asking it early keeps the rest of the flow feeling relevant to the choice the user just made.</p> <pre><code class="language-javascript">const tiers: { id: Tier; name: string; description: string; tag: string }[] = [ { id: 'startup', name: 'Startup', description: 'For teams building and scaling fast', tag: 'Up to 25 seats' }, { id: 'enterprise', name: 'Enterprise', description: 'For established teams with advanced needs', tag: 'Unlimited seats' }, { id: 'government', name: 'Government', description: 'For public sector and regulated teams', tag: 'FedRAMP-ready' }, ] </code></pre> <pre><code class="language-javascript">&lt;RadioGroup value={tier} onValueChange={(value) =&gt; setTier(value as Tier)} className="grid gap-3"&gt; &lt;fieldset className="contents"&gt; &lt;legend className="sr-only"&gt;Account type&lt;/legend&gt; {tiers.map((item) =&gt; ( &lt;label key={item.id} htmlFor={item.id} className={cn( 'flex cursor-pointer items-start gap-4 rounded-xl border p-4 transition-colors hover:border-primary/50', tier === item.id &amp;&amp; 'border-primary bg-primary/5' )} &gt; &lt;RadioGroupItem value={item.id} id={item.id} className="mt-0.5" /&gt; &lt;span className="flex flex-1 flex-col gap-1"&gt; &lt;span className="flex flex-wrap items-center gap-2 text-sm font-semibold"&gt; {item.name} {item.id === 'enterprise' &amp;&amp; &lt;Badge variant="secondary"&gt;Recommended&lt;/Badge&gt;} &lt;/span&gt; &lt;span className="text-sm text-muted-foreground"&gt;{item.description}&lt;/span&gt; &lt;span className="mt-1 font-mono text-[11px] uppercase tracking-wide text-muted-foreground"&gt;{item.tag}&lt;/span&gt; &lt;/span&gt; &lt;/label&gt; ))} &lt;/fieldset&gt; &lt;/RadioGroup&gt; </code></pre> <p>Two things worth noticing here. The tier data lives in a plain array outside the component, so adding a fourth tier later is a one-line change, not a markup change. And the <code>fieldset</code> with a visually hidden (<code>sr-only</code>) legend groups the three options as one related choice for screen readers. Sighted users never see it, since the card title above already states "Choose your account type" visually.</p> <p>This step uses a <a href="https://shadcnspace.com/components/radio-group"><strong>shadcn radio group</strong></a> rather than a select or checkboxes, since account type is a single, mutually exclusive choice, and a radio group is the only one of the three that makes both the options and the current selection visible at a glance.</p> <h3 id="heading-live-preview"><strong>Live Preview:</strong></h3> <img src="https://cdn.hashnode.com/uploads/covers/68b53a3d851476bd2ce87f12/5ad2e892-88ae-4e6b-b83d-451ebe13dc74.png" alt="Step 1: Account type with a radio group" style="display:block;margin:0 auto" width="1902" height="946" loading="lazy"> <hr> <h2 id="heading-step-2-document-upload-with-drag-and-drop">Step 2: Document Upload with Drag and Drop</h2> <p>The upload zone needs to handle three states cleanly: nothing selected yet, a file selected and ready, and a rejected file with a specific reason why.</p> <pre><code class="language-javascript">function FileUpload({ file, onFile, onRemove, error }: { file: File | null onFile: (file: File) =&gt; void onRemove: () =&gt; void error: string }) { const inputRef = useRef&lt;HTMLInputElement&gt;(null) const [dragging, setDragging] = useState(false) const accept = (candidate: File) =&gt; { if (candidate.type !== 'application/pdf' &amp;&amp; candidate.type !== 'text/csv' &amp;&amp; !candidate.name.toLowerCase().endsWith('.csv')) { return 'Upload a PDF or CSV file only.' } if (candidate.size &gt; 10 * 1024 * 1024) { return 'Files must be smaller than 10 MB.' } onFile(candidate) return '' } return ( &lt;div className="flex flex-col gap-3"&gt; {!file ? ( &lt;button type="button" className={cn( 'group flex min-h-44 flex-col items-center justify-center rounded-xl border border-dashed bg-muted/30 px-6 text-center transition-colors hover:border-primary hover:bg-primary/5', dragging &amp;&amp; 'border-primary bg-primary/10' )} onClick={() =&gt; inputRef.current?.click()} onDragOver={(event) =&gt; { event.preventDefault(); setDragging(true) }} onDragLeave={() =&gt; setDragging(false)} onDrop={(event) =&gt; { event.preventDefault() setDragging(false) const dropped = event.dataTransfer.files[0] if (dropped) accept(dropped) }} &gt; &lt;input ref={inputRef} className="sr-only" type="file" accept=".pdf,.csv,application/pdf,text/csv" onChange={(event) =&gt; { const selected = event.target.files?.[0] if (selected) accept(selected) }} /&gt; &lt;span className="mb-3 flex size-11 items-center justify-center rounded-lg border bg-background text-primary shadow-sm"&gt; &lt;UploadCloud className="size-5" aria-hidden="true" /&gt; &lt;/span&gt; &lt;span className="text-sm font-semibold"&gt;Drop your business document here&lt;/span&gt; &lt;span className="mt-1 text-xs text-muted-foreground"&gt;or click to browse · PDF or CSV · max 10 MB&lt;/span&gt; &lt;/button&gt; ) : ( &lt;div className="flex items-center gap-3 rounded-xl border bg-muted/30 p-4"&gt; &lt;span className="flex size-10 items-center justify-center rounded-lg bg-primary/10 text-primary"&gt; &lt;FileText className="size-5" aria-hidden="true" /&gt; &lt;/span&gt; &lt;div className="min-w-0 flex-1"&gt; &lt;p className="truncate text-sm font-semibold"&gt;{file.name}&lt;/p&gt; &lt;p className="text-xs text-muted-foreground"&gt;{(file.size / 1024 / 1024).toFixed(2)} MB · Ready to verify&lt;/p&gt; &lt;/div&gt; &lt;Badge variant="secondary" className="hidden sm:inline-flex"&gt;Uploaded&lt;/Badge&gt; &lt;Button type="button" variant="ghost" size="icon-sm" aria-label="Remove file" onClick={onRemove}&gt; &lt;X className="size-4" aria-hidden="true" /&gt; &lt;/Button&gt; &lt;/div&gt; )} {error &amp;&amp; ( &lt;Alert variant="destructive"&gt; &lt;AlertCircle className="size-4" aria-hidden="true" /&gt; &lt;AlertTitle&gt;Unsupported document&lt;/AlertTitle&gt; &lt;AlertDescription&gt;{error}&lt;/AlertDescription&gt; &lt;/Alert&gt; )} &lt;/div&gt; ) } </code></pre> <p>The <code>accept</code> function is the whole validation layer, and it runs from two different places: the change handler on the hidden file input, and the drop handler on the drag zone.</p> <p>Both paths call the same function, so a file dragged in gets the same validation checks as a file selected by clicking browse. It ensures that only <strong>PDF or CSV files</strong> are allowed, regardless of how the file is added.</p> <p>This is where <a href="https://shadcnspace.com/components/file-upload"><strong>shadcn file upload</strong></a> earns its place over a plain <code>&lt;input type="file"&gt;</code>: the drag zone, the selected state, and the rejected state are all handled as one component instead of three separate pieces wired together by hand.</p> <h3 id="heading-live-preview"><strong>Live Preview:</strong></h3> <img src="https://cdn.hashnode.com/uploads/covers/68b53a3d851476bd2ce87f12/959c806e-9e52-43f9-ad7f-c2855329ac5c.png" alt="Step 2: Document upload with drag and drop" style="display:block;margin:0 auto" width="1919" height="945" loading="lazy"> <h2 id="heading-step-3-verification-status-with-an-alert">Step 3: Verification Status with an Alert</h2> <p>Verification isn't instant, so the interface needs to say clearly what's happening and what happens next, rather than showing a spinner with no explanation.</p> <pre><code class="language-javascript">{verified ? ( &lt;Alert className="border-primary/30 bg-primary/5"&gt; &lt;CheckCircle2 className="size-4 text-primary" aria-hidden="true" /&gt; &lt;AlertTitle&gt;Verification complete&lt;/AlertTitle&gt; &lt;AlertDescription&gt; Your {selectedTier.name.toLowerCase()} workspace is ready to configure. &lt;/AlertDescription&gt; &lt;/Alert&gt; ) : ( &lt;&gt; &lt;Alert&gt; &lt;AlertCircle className="size-4" aria-hidden="true" /&gt; &lt;AlertTitle&gt;Verification in progress&lt;/AlertTitle&gt; &lt;AlertDescription&gt; This usually takes a few moments. You can keep this tab open while we finish. &lt;/AlertDescription&gt; &lt;/Alert&gt; &lt;div className="flex flex-col gap-3"&gt; &lt;div className="flex items-center justify-between text-sm"&gt; &lt;span className="font-medium"&gt;Checking business registry&lt;/span&gt; &lt;span className="font-mono text-xs text-muted-foreground"&gt;{checking ? '68%' : '100%'}&lt;/span&gt; &lt;/div&gt; &lt;Progress value={checking ? 68 : 100} /&gt; &lt;div className="flex items-center gap-2 text-xs text-muted-foreground"&gt; &lt;Building2 className="size-3.5" aria-hidden="true" /&gt; Matching company details and tax identifiers &lt;/div&gt; &lt;/div&gt; &lt;/&gt; )} </code></pre> <p>Pairing the <a href="https://shadcnspace.com/components/alert"><strong>shadcn alert</strong></a> with a progress bar does two jobs at once: the alert states the current status in words, while the progress bar gives a rough sense of how much is left, without promising a specific time. Neither one alone tells the full story, the alert alone feels static, and a progress bar alone doesn't explain what's actually being checked.</p> <p>Worth adding here, and easy to skip when a demo only shows the success path: a mismatch state, where the tax ID on the document doesn't match the company registry, deserves its own alert with a clear next step: contact support or re-upload a corrected document. It's not shown above, since the flow currently resolves to either checking or verified, but it's the state a production version of this flow would hit the most.</p> <h3 id="heading-live-preview"><strong>Live Preview:</strong></h3> <img src="https://cdn.hashnode.com/uploads/covers/68b53a3d851476bd2ce87f12/55f02dfe-af23-4d07-aaaa-868e2a7fb834.png" alt="Step 3: Verification status with an alert" style="display:block;margin:0 auto" width="1919" height="946" loading="lazy"> <hr> <h2 id="heading-adding-a-stepper-to-the-flow">Adding a Stepper to the Flow</h2> <p>The stepper is the visual anchor of the whole flow. It's the piece that tells the user how much is left before the checking and account-type-selecting are done.</p> <pre><code class="language-javascript">function Stepper({ current }: { current: Step }) { return ( &lt;nav aria-label="Onboarding progress" className="grid grid-cols-[minmax(0,1fr)_minmax(2rem,5rem)_minmax(0,1fr)_minmax(2rem,5rem)_minmax(0,1fr)] items-start gap-0" &gt; {steps.map((step, index) =&gt; ( &lt;div key={step.number} className="contents"&gt; &lt;div className="flex min-w-0 flex-col items-center text-center"&gt; &lt;div className={cn( 'flex size-9 items-center justify-center rounded-full border text-sm font-semibold transition-colors', current &gt; step.number ? 'border-primary bg-primary text-primary-foreground' : current === step.number ? 'border-primary bg-primary/10 text-primary' : 'border-border bg-background text-muted-foreground' )} aria-current={current === step.number ? 'step' : undefined} &gt; {current &gt; step.number ? &lt;Check className="size-4" aria-hidden="true" /&gt; : step.number} &lt;/div&gt; &lt;div className="mt-2 min-w-0"&gt; &lt;p className={cn('truncate text-sm font-semibold', current &gt;= step.number ? 'text-foreground' : 'text-muted-foreground')}&gt; {step.label} &lt;/p&gt; &lt;p className="mt-1 hidden text-xs leading-5 text-muted-foreground sm:block"&gt;{step.caption}&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; {index &lt; steps.length - 1 &amp;&amp; ( &lt;div className={cn('mt-4 h-px w-full', current &gt; step.number ? 'bg-primary' : 'bg-border')} /&gt; )} &lt;/div&gt; ))} &lt;/nav&gt; ) } </code></pre> <p>The <code>current &gt; step.number</code> check keeps the entire stepper in sync with a single comparison. It determines the circle’s fill color, decides when the step number should be replaced by a checkmark, and controls whether the connecting line to the next step is filled.</p> <p>This is important because the stepper only needs one piece of state, <code>step</code>, from the parent component. It doesn’t need to know why the user is on step 2, it only needs to know which step is currently active and update its visual state accordingly.</p> <p>The "continue" logic that actually advances <code>step</code> lives outside the stepper itself:</p> <pre><code class="language-javascript">const continueStep = () =&gt; { if (step === 1) setStep(2) else if (step === 2 &amp;&amp; file) { setStep(3) setChecking(true) window.setTimeout(() =&gt; { setChecking(false) setVerified(true) }, 1400) } } </code></pre> <p>Keeping this in the page component, not inside the <a href="https://shadcnspace.com/components/stepper"><strong>shadcn stepper</strong></a> itself, is what keeps the stepper reusable. It only renders progress. Whether the user is allowed to move forward, a file is required on step 2, or whether nothing is required on step 1, is a decision for the flow around it to make.</p> <h2 id="heading-small-details-that-make-it-feel-finished">Small Details that Make it Feel Finished</h2> <p>A few things in this build are easy to skip but change how the flow feels in practice:</p> <ul> <li><p><strong>A dark mode toggle</strong> in the header, wired to a <code>darkMode</code> state that toggles a class on <code>document.documentElement</code>. It's small, but it means the flow doesn't fight a user's system theme preference.</p> </li> <li><p><strong>A security note</strong> in the sidebar, stating documents are encrypted and deleted after verification. This is copy, not code, but it answers the question a corporate user is quietest about and most worried by: what happens to the file after I upload it.</p> </li> <li><p><strong>A "Selected" confirmation line</strong> under the radio group, restating the chosen tier in plain text. A small detail, but it removes any doubt about what was actually selected before moving on.</p> </li> </ul> <p>If you're looking to wrap a flow like this inside a full application shell, with navigation and a dashboard around it, the <a href="https://shadcnspace.com/admin-dashboard"><strong>Shadcn Dashboard</strong></a> starter uses the same component set. It's a reasonable base to extend from rather than building a shell from scratch.</p> <h3 id="heading-live-preview">Live Preview:</h3> <p><a class="embed-card" href="https://onboarding-kyc-flow.vercel.app/">https://onboarding-kyc-flow.vercel.app/</a></p> <p>This project is open source, and you can easily download the zip and if you like. Please consider giving it a star.</p> <ul> <li><a href="https://github.com/vaibhavsudo/onboarding-kyc-flow"><strong>Github Repo</strong></a></li> </ul> <h2 id="heading-accessibility-notes">Accessibility notes</h2> <ul> <li><p>The stepper's <code>nav</code> element has an <code>aria-label</code>, and the current step carries <code>aria-current="step"</code>, so assistive technology can identify progress without relying on visual position alone.</p> </li> <li><p>The radio group sits inside a <code>fieldset</code> with a screen-reader-only <code>legend</code>, grouping the three account types as one decision.</p> </li> <li><p>Icons throughout (<code>Check</code>, <code>AlertCircle</code>, <code>UploadCloud</code>, and so on) carry <code>aria-hidden="true"</code>, since they're decorative next to text that already states the same information. This stops screen readers from announcing redundant icon labels.</p> </li> <li><p>The remove-file button has an explicit <code>aria-label</code>, since its visible content is an icon only, with no text.</p> </li> </ul> <h2 id="heading-key-concepts-recap">Key Concepts Recap</h2> <ul> <li><p>Account type comes first because it's the one decision most likely to affect the rest of the flow, and it's kept in state at the page level, not inside the radio group itself.</p> </li> <li><p>File validation runs in a shared function used by both the drag-and-drop path and the click-to-browse path, so both paths apply the same PDF/CSV validation.</p> </li> <li><p>Verification status is communicated with both words (the alert) and a rough sense of progress (the progress bar), since either one alone leaves out part of the picture.</p> </li> <li><p>The stepper is a pure display component driven by a single <code>step</code> value from its parent. The logic for whether the user can advance lives outside it, not inside it.</p> </li> <li><p>Small, non-technical details (like a security note, a confirmation line, or a theme toggle) do as much for how finished a flow feels as any of the four core components.</p> </li> </ul> <h2 id="heading-conclusion">Conclusion</h2> <p>None of the four components in this flow are complicated individually. What makes a KYC flow work is the decisions around them: which choice comes first, where validation actually runs, and how honestly the interface talks to the user while something outside their control is being checked.</p> <p>Whether the first draft comes from typing every line by hand or from scaffolding it with an MCP server and v0, that's the part worth spending time getting right before it ships.</p> <h2 id="heading-resources">Resources</h2> <ul> <li><p><a href="https://shadcnspace.com/components"><strong>Shadcn Components</strong></a>, the free component set used in this flow</p> </li> <li><p><a href="https://shadcnspace.com/"><strong>ShadcnSpace</strong></a>, the base library these components extend</p> </li> <li><p><a href="https://shadcnspace.com/mcp"><strong>MCP server walkthrough</strong></a></p> </li> <li><p><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current"><strong>MDN: ARIA current attribute</strong></a></p> </li> <li><p><a href="https://modelcontextprotocol.io/"><strong>Model Context Protocol specification</strong></a></p> </li> </ul>