+
+ )
+}
diff --git a/apps/docs/components/docs/previews/download-sparkline.tsx b/apps/docs/components/docs/previews/download-sparkline.tsx
new file mode 100644
index 0000000..bd4a182
--- /dev/null
+++ b/apps/docs/components/docs/previews/download-sparkline.tsx
@@ -0,0 +1,32 @@
+import { DownloadSparkline } from "@/registry/download-sparkline/download-sparkline"
+import type { NpmDownloadPoint } from "@/registry/download-sparkline/lib/npm"
+
+function generateSampleData(days: number, base: number, trend: number): NpmDownloadPoint[] {
+ const points: NpmDownloadPoint[] = []
+ const now = Date.now()
+ for (let i = 0; i < days; i++) {
+ const date = new Date(now - (days - 1 - i) * 86_400_000)
+ const noise = Math.sin(i * 0.8) * base * 0.15 + (Math.random() - 0.5) * base * 0.1
+ points.push({
+ day: date.toISOString().slice(0, 10),
+ downloads: Math.max(0, Math.round(base + i * trend + noise)),
+ })
+ }
+ return points
+}
+
+const trendingUp = generateSampleData(30, 45_000, 600)
+const steady = generateSampleData(30, 120_000, 0)
+const weekly = generateSampleData(7, 8_000, 200)
+
+export default async function Preview() {
+ return (
+
+
+
+
+ )
+}
diff --git a/apps/docs/components/docs/previews/release-badge.tsx b/apps/docs/components/docs/previews/release-badge.tsx
new file mode 100644
index 0000000..bee477c
--- /dev/null
+++ b/apps/docs/components/docs/previews/release-badge.tsx
@@ -0,0 +1,41 @@
+import { ReleaseBadge } from "@/registry/release-badge/release-badge"
+import type { GitHubReleaseData } from "@/registry/release-badge/lib/github"
+
+const sampleRelease: GitHubReleaseData = {
+ tag: "v15.3.1",
+ name: "Next.js 15.3.1",
+ preRelease: false,
+ draft: false,
+ publishedAt: new Date(Date.now() - 3 * 86_400_000).toISOString(),
+ url: "https://github.com/vercel/next.js/releases/latest",
+ body: null,
+ assetCount: 0,
+}
+
+const preRelease: GitHubReleaseData = {
+ ...sampleRelease,
+ tag: "v16.0.0-canary.1",
+ name: "Next.js 16 Canary",
+ preRelease: true,
+}
+
+export default async function Preview() {
+ return (
+
+
+
+
+ )
+}
diff --git a/apps/docs/content/docs/components/ci-badge.mdx b/apps/docs/content/docs/components/ci-badge.mdx
new file mode 100644
index 0000000..192e744
--- /dev/null
+++ b/apps/docs/content/docs/components/ci-badge.mdx
@@ -0,0 +1,159 @@
+---
+title: "CI Badge"
+description: "GitHub Actions CI status badge showing passing, failing, pending, or cancelled state."
+---
+
+import { CIBadge } from "@/registry/ci-badge/ci-badge"
+
+
+
+
+
+
+## API Reference
+
+
+
+
+ Inline
++ Compact pill with status dot and label. The default layout. +
+
+
+
+ With details
++ Show workflow name, branch, and duration alongside the status. +
+
+
+Card
++ Feature card showing workflow name, status, branch, duration, and run time. +
+
+
+
+## API Reference
+
+
+
+
+ Inline
++ Compact pill showing the Discord icon and server name. The default layout. +
+
+
+Card
++ Feature card showing server name and online count. +
+
+
+
+## Examples
+
+
+
+
+ Chart types
++ Three chart types: line (default), area, and bar. +
+
+
+Time ranges
++ Three time ranges: last week, last month (default), and last year. +
+
+
+
+## API Reference
+
+
+
+
+ With trend indicator
++ Shows percentage change comparing the first half vs second half of the time range, with a colored arrow. +
+
+
+
+ With baseline and date range
++ Baseline shows a faint dashed line at the average. Date range labels the time period below the chart. +
+
+
+Custom sizing
+
+
+
+## API Reference
+
+
+
+
+ Inline
++ Compact pill showing the tag icon and version. The default layout. +
+
+
+
+ Row
++ Segmented horizontal strip showing tag, release name, and publish date. +
+
+
+Card
++ Feature card showing release tag, name, publish date, and asset count. +
+
+
+
+ {meta.length > 0 && (
+
+ {showWorkflow && (
+ <>
+
+
+
+ {config.label}
+
+
+ {meta.map((item) => (
+
+ {item.icon}
+ {item.value}
+
+ ))}
+
+ )}
+
+ )
+}
+
+async function CIBadge(props: CIBadgeProps) {
+ const {
+ owner,
+ repo,
+ workflow,
+ branch,
+ layout = "inline",
+ data: dataProp,
+ className,
+ } = props
+
+ const ci = dataProp ?? (await fetchCIStatus(owner, repo, workflow, branch))
+ if (!ci) return null
+
+ if (layout === "card") {
+ const {
+ showDuration = true,
+ showBranch = true,
+ showWorkflow = true,
+ } = props
+ return (
+
+
+
+
+
+ {showOnline && (
+
+
+ {formatMemberCount(server.onlineCount)} online
+
+ )}
+
+
+
+ {formatMemberCount(server.onlineCount)} online
+
+ {server.memberCount != null && (
+
+
+
+ )
+
+ if (href) {
+ return (
+
+ {content}
+
+ )
+ }
+
+ return (
+
+ {content}
+
+ )
+}
+
+async function DiscordBadge(props: DiscordBadgeProps) {
+ const {
+ serverId,
+ layout = "inline",
+ iconStyle = "currentColor",
+ inviteUrl,
+ data: dataProp,
+ className,
+ } = props
+
+ const server = dataProp ?? (await fetchDiscordServer(serverId))
+ if (!server) return null
+
+ const resolvedInvite = inviteUrl ?? null
+
+ if (layout === "card") {
+ const { showOnline = true } = props
+ return (
+
+
+ )
+}
+
+export { DownloadSparkline }
+export type { DownloadSparklineProps, NpmDownloadPoint, NpmDownloadRange }
diff --git a/apps/docs/registry/download-sparkline/lib/npm.ts b/apps/docs/registry/download-sparkline/lib/npm.ts
new file mode 100644
index 0000000..5ecfe61
--- /dev/null
+++ b/apps/docs/registry/download-sparkline/lib/npm.ts
@@ -0,0 +1,69 @@
+/**
+ * jalco-ui
+ * lib/npm
+ * by Justin Levine
+ * ui.justinlevine.me
+ *
+ * npm API client for fetching download time-series data for sparkline rendering.
+ */
+
+export interface NpmDownloadPoint {
+ /** ISO date string (YYYY-MM-DD). */
+ day: string
+ /** Download count for this day. */
+ downloads: number
+}
+
+export type NpmDownloadRange = "last-week" | "last-month" | "last-year"
+
+/**
+ * Fetch daily download counts for an npm package over a given range.
+ *
+ * Uses the npm downloads API:
+ * - `api.npmjs.org/downloads/range/
+ {variant === "bar" ? (
+
+ {showDateRange && (
+
+ {formatShortDate(dateStart)} – {formatShortDate(dateEnd)}
+
+ )}
+
+ {showLabel && (
+
+ {formatDownloads(stats.total)}
+ /{rangeLabel}
+
+ )}
+ {showTrend &&
+
+ {segments.map((seg, i) => (
+
+ {i > 0 &&
+ ))}
+
+ )
+}
+
+function CardLayout({
+ release,
+ showDate,
+ showPreRelease,
+ showAssets,
+ className,
+}: {
+ release: GitHubReleaseData
+ showDate: boolean
+ showPreRelease: boolean
+ showAssets: boolean
+ className?: string
+}) {
+ const meta: { icon: React.ReactNode; value: string }[] = []
+
+ if (showDate) {
+ meta.push({
+ icon:
+
+
+ {(release.name || meta.length > 0) && (
+
+
+
+ {release.name && (
+
+ )}
+
+ )
+}
+
+async function ReleaseBadge(props: ReleaseBadgeProps) {
+ const {
+ owner,
+ repo,
+ layout = "inline",
+ data: dataProp,
+ className,
+ } = props
+
+ const release = dataProp ?? (await fetchLatestRelease(owner, repo))
+ if (!release) return null
+
+ if (layout === "card") {
+ const {
+ showDate = true,
+ showPreRelease = true,
+ showAssets = true,
+ } = props
+ return (
+ + {release.name} +
+ )} + {meta.length > 0 && ( +
+ {meta.map((item) => (
+
+ {item.icon}
+ {item.value}
+
+ ))}
+
+ )}
+