BlockDex

Components

Registries

Free blocks

Method

BlockDex

Components

Registries

Free blocks

Method

Open API

BlockDex

Components

Registries

Free blocks

Method

Open API

Components/nexus-ui/citation

Citation

nexus-ui/citation
FreeComponent

Inline source references with hover preview and multi-source carousel

Live preview

live · rendered by the registry
Rendered by nexus-ui on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://nexus-ui.dev/r/citation.json

Source

components/nexus-ui/citation.tsxnexus-ui.dev/r/citation.json · first 6 KB
1"use client";
2
3import * as React from "react";
4import { ArrowLeft01Icon, ArrowRight01Icon } from "@hugeicons/core-free-icons";
5import { HugeiconsIcon } from "@hugeicons/react";
6import { parse as parseDomain } from "tldts";
7
8import {
9 Carousel,
10 CarouselContent,
11 CarouselItem,
12 type CarouselApi,
13} from "@/components/ui/carousel";
14import {
15 HoverCard,
16 HoverCardContent,
17 HoverCardTrigger,
18} from "@/components/ui/hover-card";
19import { cn } from "@/lib/utils";
20
21export type CitationSourceInput = {
22 url: string;
23 title?: React.ReactNode;
24 description?: React.ReactNode;
25};
26
27export type ResolvedCitation = {
28 url: string;
29 title: React.ReactNode | null;
30 description: React.ReactNode | null;
31 siteName: string;
32 faviconSrc: string;
33};
34
35const HTTP_PROTOCOL_RE = /^https?:$/i;
36const tryParseUrl = (value: string): URL | null => {
37 try {
38 return new URL(value);
39 } catch {
40 return null;
41 }
42};
43const parseCitationUrlOrNull = (urlStr: string): URL | null => {
44 const trimmed = urlStr.trim();
45 if (!trimmed) return null;
46 try {
47 return parseCitationUrl(trimmed);
48 } catch {
49 return null;
50 }
51};
52
53export function parseCitationUrl(urlStr: string): URL {
54 const trimmed = urlStr.trim();
55 const parsed = tryParseUrl(trimmed) ?? tryParseUrl(`https://${trimmed}`);
56 if (!parsed || !HTTP_PROTOCOL_RE.test(parsed.protocol)) {
57 throw new Error("Citation URL must use http or https");
58 }
59 return parsed;
60}
61
62function formatSiteToken(token: string): string {
63 const lower = token.toLowerCase();
64 const isAlpha = /^[a-z]+$/i.test(lower);
65 if (!isAlpha) return token;
66 if (lower.length <= 3) {
67 return lower.toUpperCase();
68 }
69 return lower.slice(0, 1).toUpperCase() + lower.slice(1);
70}
71
72function titleCaseLabel(label: string): string {
73 if (!label) return label;
74 return label
75 .split("-")
76 .filter(Boolean)
77 .map(formatSiteToken)
78 .join(" ");
79}
80
81export function rootDomainSiteName(url: URL): string {
82 const host = url.hostname.replace(/^www\./i, "").toLowerCase();
83 const { domainWithoutSuffix, isIp } = parseDomain(host, {
84 allowPrivateDomains: true,
85 });
86 const label = isIp ? host : (domainWithoutSuffix ?? host.split(".")[0] ?? "");
87
88 return titleCaseLabel(label);
89}
90
91function hasCitationField(v: unknown): boolean {
92 return (
93 v !== undefined && v !== null && !(typeof v === "string" && v.trim() === "")
94 );
95}
96
97export function resolveCitationSource(
98 input: CitationSourceInput,
99): ResolvedCitation {
100// … truncated

What it pulls in

npm packages

  • radix-ui
  • @hugeicons/react
  • @hugeicons/core-free-icons
  • tldts

Other registry items

  • carousel
  • hover-card

Files it writes

  • components/nexus-ui/citation.tsx

Facts

Registry
nexus-ui
Type
registry:ui
Access
Free
Files written
1
Licence
the repository states none
First indexed
2026-08-01
Last confirmed
today

Go to the source

Docs on nexus-ui nexus-ui.dev victorcodess/nexus-ui on GitHub Raw registry item This item as JSON

More from nexus-ui

All 15 items
Same registry, same kind — the ones you would have found next
ComponentRegistryKindAccessInstallsCommand
Attachmentsattachmentsnexus-uiComponentsFree4 deps · 2 files
Chain of Thoughtchain-of-thoughtnexus-uiComponentsFree2 deps · 2 files
Feedback Barfeedback-barnexus-uiComponentsFree1 dep
Imageimagenexus-uiComponentsFree2 deps
Messagemessagenexus-uiComponentsFree9 deps · 2 files
Model Selectormodel-selectornexus-uiComponentsFree3 deps
Prompt Inputprompt-inputnexus-uiComponentsFree1 dep
Questionsquestionsnexus-uiComponentsFree2 deps
BlockDex

Built by

Kynth Studio

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

BlockDex

BlockDex

Built by

Kynth Studio

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

BlockDex

BlockDex

Built by

Kynth Studio

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

BlockDex