Components > Font Selector

page.tsx

import { FontSelector } from "@/components/app-components";

Discover the magic of our Font Picker component! 🎉 Choose from a whopping +4300 font families, each displayed in its own charming style. Thanks to this user-friendly Font Picker component included in Next Starter AI, it is possible to make users select the exact font they need by rendering all the options with the font itself.

Example usage of the component below: (easy and practical to use 🙂)

components/sampleComponent.tsx

  const font = googleFonts.find((a) => a.family === configuration.font);
  
  const SampleComponent = () => {
    const [selectedFont, setSelectedFont] = useState(null);
  
    return (
      <>
        ...
        <FontSelector
            font={font}
            onFontSelect={setSelectedFont}
        />
        ...
      </>
    );
  };
  

All the props of the component is typed by Typescript. So you are safe 🙂