Gradient#

Colors text across multiple stops. Stops are theme tokens or raw hex — token-based presets re-color when the theme changes.

Import#

TSX

import { Gradient } from '@sigx/terminal';
import type { GradientPreset } from '@sigx/terminal';

Usage#

TSX

/** @jsxImportSource @sigx/terminal */
import { component, defineApp, Gradient } from '@sigx/terminal';

const App = component(() => {
    return () => (
        <box>
            <Gradient text="SignalX Terminal" preset="sigx" />
            <br />
            <Gradient text="Custom stops" colors={['#ff7e5f', '#feb47b', '#ffcd94']} animate speed={1} />
        </box>
    );
});

defineApp(<App />).mount({ clearConsole: true });

Props#

Prop	Type	Notes
`text`	`string`	required — the text to color
`colors`	`string[]`	gradient stops (tokens or hex); overrides `preset`
`preset`	`GradientPreset`	a named preset
`animate`	`boolean`	sweep the gradient over time
`speed`	`number`	animation speed

Presets#

GRADIENT_PRESETS provides: sigx (token-based, theme-aware), rainbow, sunset, ocean, fire. GradientPreset is the union of these names.

Gradient#

Import#

Usage#

Props#

Presets#

See also#