"use client"; import * as React from "react"; import { cn, useControllableState } from "@kineticui/core"; import { CheckIcon, SearchIcon } from "@kineticui/icons"; export type FontOption = { family: string; category: "sans" | "serif" | "mono" | "display" | "handwriting"; stack: string; google?: boolean }; export const defaultFonts: FontOption[] = [ { family: "Inter", category: "sans", stack: "'Inter Variable', Inter, system-ui, sans-serif", google: true }, { family: "System UI", category: "sans", stack: "system-ui, -apple-system, 'Segoe UI', sans-serif" }, { family: "Space Grotesk", category: "display", stack: "'Space Grotesk Variable', 'Space Grotesk', sans-serif", google: true }, { family: "Poppins", category: "sans", stack: "Poppins, sans-serif", google: true }, { family: "Manrope", category: "sans", stack: "Manrope, sans-serif", google: true }, { family: "DM Sans", category: "sans", stack: "'DM Sans', sans-serif", google: true }, { family: "Playfair Display", category: "serif", stack: "'Playfair Display', Georgia, serif", google: true }, { family: "Lora", category: "serif", stack: "Lora, Georgia, serif", google: true }, { family: "Georgia", category: "serif", stack: "Georgia, 'Times New Roman', serif" }, { family: "Fraunces", category: "display", stack: "Fraunces, Georgia, serif", google: true }, { family: "JetBrains Mono", category: "mono", stack: "'JetBrains Mono Variable', 'JetBrains Mono', monospace", google: true }, { family: "IBM Plex Mono", category: "mono", stack: "'IBM Plex Mono', monospace", google: true }, { family: "Menlo", category: "mono", stack: "Menlo, Consolas, monospace" }, { family: "Caveat", category: "handwriting", stack: "Caveat, cursive", google: true }, ]; export type FontPickerProps = { value?: string; defaultValue?: string; onValueChange?: (family: string, font: FontOption) => void; fonts?: FontOption[]; /** Load Google Fonts on demand so previews render in the real face. */ loadGoogleFonts?: boolean; previewText?: string; className?: string; }; const loaded = new Set(); function loadGoogle(family: string) { if (typeof document === "undefined" || loaded.has(family)) return; loaded.add(family); const l = document.createElement("link"); l.rel = "stylesheet"; l.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(family)}:wght@400;600&display=swap`; document.head.appendChild(l); } /** Font chooser with category filter, search, live preview text and optional on-demand Google Fonts loading. */ export function FontPicker({ value, defaultValue = "Inter", onValueChange, fonts = defaultFonts, loadGoogleFonts = false, previewText = "The quick brown fox jumps over the lazy dog", className }: FontPickerProps) { const [current, setCurrent] = useControllableState({ value, defaultValue, onChange: (f: string) => onValueChange?.(f, fonts.find((x) => x.family === f)!) }); const [q, setQ] = React.useState(""); const [cat, setCat] = React.useState("all"); const [text, setText] = React.useState(previewText); const [size, setSize] = React.useState(20); const list = fonts.filter((f) => (cat === "all" || f.category === cat) && f.family.toLowerCase().includes(q.toLowerCase())); React.useEffect(() => { if (loadGoogleFonts) list.filter((f) => f.google).forEach((f) => loadGoogle(f.family)); }, [loadGoogleFonts, list]); return (

setQ(e.target.value)} placeholder="Search fonts" aria-label="Search fonts" className="flex-1 bg-transparent text-sm outline-none placeholder:text-subtle" /> setSize(Number(e.target.value))} aria-label="Preview size" className="w-24 accent-[var(--kn-accent)]" />

{(["all", "sans", "serif", "display", "mono", "handwriting"] as const).map((c) => ( ))}

setText(e.target.value)} aria-label="Preview text" className="h-8 rounded-lg bg-background px-3 text-xs text-muted outline-none" />

); }

Font Picker

Installation

Exports