Is it free for commercial use?

Yes. The component is available under the repository's open-source licence; check the licence file for its terms.

Can users edit both y values outside 0–1?

Yes. Both y control points accept values from -2 through 2, while x remains constrained to 0 through 1.

Does the plot replace the numeric controls?

No. Numeric inputs provide equivalent access to every control point.

Cubic Bezier Curve Editor

A controlled CSS cubic-bezier editor with a visual plot and numeric controls.

Product card easing

Edit both control points with the plot, keyboard, or numeric fields.

First control point xFirst control point ySecond control point xSecond control point y

CSS easing

cubic-bezier(0.25, 0.1, 0.5, 1)

Input Bezier Curve exposes both control points through a square plot, keyboard-operable handles and equivalent numeric fields. Every edit produces a bounded immutable tuple suitable for CSS easing authoring.

X coordinates stay in [0, 1] and y coordinates in [-2, 2]. Invalid caller values are clamped for display; no correction is emitted until the user edits.

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-bezier-curve

Usage

"use client";
import { useState } from "react";
import { InputBezierCurve } from "@/components/input-bezier-curve";

export function EasingField() {
  const [value, setValue] = useState<[number, number, number, number]>([0.25, 0.1, 0.5, 1]);
  return <InputBezierCurve value={value} onChange={setValue} />;
}

Props

Prop	Type	Default	Description
value	readonly [number, number, number, number]	required	Controlled [x1, y1, x2, y2] tuple; x values are bounded to 0–1 and y values to -2–2.
onChange	(value: readonly [number, number, number, number]) => void	required	Receives a new immutable tuple after pointer, keyboard or numeric editing.
label	string	Easing curve	Accessible editor heading.
className	string	undefined	Additional classes merged on the editor root.

Customisation

The editor uses semantic surface and focus tokens. The preview serializes the controlled points as a CSS cubic-bezier value.

.easing-editor { max-inline-size: 38rem; }

Frequently asked questions

Is it free for commercial use?: Yes. The component is available under the repository's open-source licence; check the licence file for its terms.
Can users edit both y values outside 0–1?: Yes. Both y control points accept values from -2 through 2, while x remains constrained to 0 through 1.
Does the plot replace the numeric controls?: No. Numeric inputs provide equivalent access to every control point.

Related components

Build motion settingsExplore more free controls for interface authoring workflows.Form components