Gradient Stop Editor
A free React gradient editor for Next.js and Tailwind, with editable stops that preserve colour order and hard transitions.
The season, in a different light.
A warmer way forward.
Build a brand surface from the stops that make it yours.
LIVE BANNER PREVIEWGradient stops
Keep stops in sequence. Equal positions make a crisp colour break.
Order is intentional; duplicate positions stay together as hard stops.
Gradient Stop Editor is a free React product showcase for Next.js and Tailwind that lets you edit the caller-supplied colours and positions in a CSS linear gradient. It keeps the source order intact, so two stops at the same position remain a crisp hard transition.
The controlled API returns a fresh stop array after colour, position, add, remove or reorder actions. Native colour and number controls sit beside a live banner preview, and the accessible stop list keeps caller identity when rows move. It is a focused design control, not an image sampler or full design application.
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/showcase-gradient-stop-editorUsage
"use client";
import { useState } from "react";
import { GradientStopEditor, type GradientStopEditorStop } from "@/components/showcase-gradient-stop-editor";
const initialStops: readonly GradientStopEditorStop[] = [
{ id: "warm", position: 0, color: "#f97316" },
{ id: "warm-edge", position: 50, color: "#f97316" },
{ id: "violet-edge", position: 50, color: "#7c3aed" },
{ id: "night", position: 100, color: "#111827" },
];
export function BrandGradientSettings() {
const [stops, setStops] = useState(initialStops);
return <GradientStopEditor label="Launch banner gradient" stops={stops} onStopsChange={setStops} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| stops | ReadonlyArray<{ id: string; position: number; color: string }> | required | Controlled, caller-ordered gradient stops with unique stable IDs, 0–100 positions and six-digit hex colours. |
| onStopsChange | (stops: ReadonlyArray<GradientStopEditorStop>) => void | required | Receives a new ordered array after each edit; edited records are copied immutably. |
| label | string | required | Accessible name for the gradient preview and ordered controls. |
| className | string | undefined | Additional classes merged onto the component root. |
Customisation
The colour field contains the supplied sRGB hex values, while the editor surface and controls use semantic border, card, foreground and focus tokens. Retheme the surface through an ancestor and keep product-specific colours in the stops you own:
<div className="brand-settings" data-theme="dark">
<GradientStopEditor label="Launch banner gradient" stops={stops} onStopsChange={setStops} />
</div>
.brand-settings {
--card: var(--surface);
--border: var(--color-neutral-700);
}Frequently asked questions
- Is Gradient Stop Editor free for commercial use?
- Yes. Gradient Stop Editor is MIT licensed for personal and commercial use.
- Do duplicate positions stay as hard stops?
- Yes. The component preserves the supplied order and keeps duplicate positions. Their order remains visible in the gradient, so equal-position neighbours make an intentional hard colour break.
- Does it sample colours from an image?
- No. It edits a caller-supplied CSS gradient from native colour and position controls. Image sampling and design-file integration are outside its scope.