Component Registry

Favycons publishes reusable UI components through a shadcn/ui registry.

The registry is currently hosted at:

https://favycons.com/r/{name}.json

Available Components

google-font-picker

A searchable, virtualized font picker built with shadcn/ui primitives.

• Uses Command and Popover
• Accepts a font list via props
• Does not require a Google Fonts API key
• Works with curated lists and app-specific font metadata

Install directly via URL:

npx shadcn@latest add https://favycons.com/r/google-font-picker.json

Or configure a registry alias in components.json:

{
  "registries": {
    "@favycons": "https://favycons.com/r/{name}.json"
  }
}

Then install by name:

npx shadcn@latest add @favycons/google-font-picker

What Gets Installed

The google-font-picker item installs:

• components/ui/google-font-picker.tsx

It also expects these dependencies in the consumer app:

• @tanstack/react-virtual
• lucide-react

And these shadcn/ui registry dependencies:

• button
• command
• popover

Basic Usage

'use client';

import * as React from 'react';
import { GoogleFontPicker } from '@/components/ui/google-font-picker';

const fonts = [
  { family: 'Inter', category: 'sans-serif' },
  { family: 'Playfair Display', category: 'serif' },
  { family: 'JetBrains Mono', category: 'monospace' },
];

export function Example() {
  const [font, setFont] = React.useState('Inter');

  return (
    <GoogleFontPicker
      value={font}
      onValueChange={setFont}
      fonts={fonts}
    />
  );
}

Notes

• The component is deliberately data-driven. It does not fetch Google Fonts metadata itself.
• If you want live font previews for each row, lazy-load them in your app to avoid flooding fonts.googleapis.com with requests.
• Favycons currently uses this pattern with a curated list rather than the full Google Fonts catalog.