Citation Chip
A copy-paste ai / chat ui component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
AI / Chat UIHTMLCSSany framework
Copy into your project
HTML
<!-- Citation Chip — inline source links, e.g. AI answers -->
<p class="nuda-cite">
Memoization can reduce re-renders<a class="nuda-cite__chip" href="#" aria-label="Source 1">1</a>
in expensive trees<a class="nuda-cite__chip" href="#" aria-label="Source 2">2</a>.
</p>CSS
/* Citation Chip
Inline numeric source links with hover lift + glow.
Customize: --cite-accent, --cite-bg */
.nuda-cite {
--cite-accent: #e4ff54;
--cite-bg: rgba(228, 255, 84, 0.12);
font: 500 0.875rem ui-sans-serif, system-ui, sans-serif;
color: #fafafa;
line-height: 1.7;
margin: 0;
}
.nuda-cite__chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 16px;
height: 16px;
padding: 0 5px;
margin: 0 2px;
background: var(--cite-bg);
color: var(--cite-accent);
font: 700 0.625rem ui-sans-serif, system-ui, sans-serif;
border-radius: 4px;
text-decoration: none;
vertical-align: 1px;
transition: background 0.2s, transform 0.2s, box-shadow 0.2s, color 0.2s;
}
.nuda-cite__chip:hover {
background: var(--cite-accent);
color: #09090b;
transform: translateY(-1px);
box-shadow: 0 0 6px rgba(228, 255, 84, 0.4);
}How to use Citation Chip
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.