FontPicker

Copy<script setup lang="ts">
import { ref } from 'vue'
import { FontPicker } from '@/components/ui/font-picker'
import { resolveFontStack } from '@/components/ui/font-picker/font-catalog'

const font = ref('Space Grotesk')
</script>

<template>
  <div class="flex max-w-sm flex-col gap-4">
    <FontPicker v-model="font" />
    <div class="border-border/60 bg-input/10 rounded-lg border p-4">
      <p class="text-muted-foreground text-xs/relaxed">
        {{ font }}
      </p>
      <p class="mt-1 text-xl leading-snug" :style="{ fontFamily: resolveFontStack(font) }">
        The quick brown fox jumps over the lazy dog.
      </p>
    </div>
  </div>
</template>

Installation

pnpmnpmyarnbun
pnpm dlx hui-kit@latest add font-picker
Copy

Usage

Copy<script setup lang="ts">
import { ref } from 'vue'
import { FontPicker } from '@/components/ui/font-picker'

const font = ref('Inter')
</script>

<template>
  <FontPicker v-model="font" />
</template>

FontPicker is a trigger plus popover bound to a font family name (v-model:string). The trigger label renders in the selected font, so the control previews itself.

Anatomy

The popover holds two parts:

• a search input that filters the catalog as you type — arrow keys move the highlight, Enter selects, Esc closes via the popover
• a scrollable list (max height 64) where every row draws "Ag Sample text" in its own family with a fallback stack

Catalog

Fonts ship as a local array of { name, stack } entries (~30 fonts: Inter, JetBrains Mono, Playfair Display, Space Grotesk, …). Import FONT_PICKER_CATALOG to enumerate it or resolveFontStack(name) to build a full font-family value anywhere else. Unknown values fall back to system-ui.