Source
<Source />A citation chip with the site's own bead. Hover or focus it for the page it points to.
Text needs a contrast of 4.5:1 1w3.orgUnderstanding contrast (minimum)Text needs a contrast ratio of at least 4.5:1 against its background. and a dark theme can follow the system 2developer.mozilla.orgprefers-color-schemeDetects whether the user asked for a light or dark theme..
web.devweb.devBuilding a colour schemegithub.comgithub.comprompt-kit
Install
bash
npx shadcn@latest add https://orbeez-kit.vercel.app/r/source.jsonUsage
tsx
<Source href={url} index={1} title="Understanding contrast" description="..." />
<Sources>
{sources.map((s) => <Source key={s.url} href={s.url} title={s.title} />)}
</Sources>Good to know
- The same site always gets the same bead colour.