Input Variable Font Axes
Native controls for the variable font axes your type system exposes.
Customise
Code
<InputVariableFontAxes />Input Variable Font Axes is a free forms-inputs component for Next.js, React and Tailwind that lets a type specimen edit caller-supplied variable-font settings.
Each axis has a bounded native slider and numeric field. The consuming application supplies unique axis tags, labels and limits, then remains the source of truth for every value; the component does not load font files or guess supported axes.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/input-variable-font-axesUsage
import { useState } from "react";
import { InputVariableFontAxes } from "@/components/input-variable-font-axes";
const axes = [{ tag: "wght", label: "Weight", min: 100, max: 900, default: 400, step: 0.25 }];
export function FontSettings() {
const [values, setValues] = useState({ wght: 400 });
return <InputVariableFontAxes axes={axes} values={values} onValuesChange={setValues} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| axes | readonly VariableFontAxis[] | required | Caller-supplied unique axis tag, label, min, max, default and optional step metadata. |
| values | Readonly<Record<string, number>> | required | Controlled current values keyed by axis tag. |
| onValuesChange | (values: Readonly<Record<string, number>>) => void | required | Receives a fresh map for each valid range or numeric edit. |
| disabled | boolean | false | Disables all native controls. |
| className | string | undefined | Additional root classes merged with component styles. |
Customisation
The caller controls font loading and applies the values to its own preview. The component uses theme tokens for the native control surface.
.brand-type-preview { font-variation-settings: "wght" 625; }Frequently asked questions
- Does this component inspect a font file?
- No. The caller provides the axes supported by its selected font.
- Can an axis use fractional values?
- Yes. Supply a fractional step when needed; numeric editing retains its in-progress text.