Components
LinearGradient
A themed native SVG linearGradient primitive. Render it inside Svg or an appropriate
SVG parent.
Props
Native attributes and event handlers are forwarded to the underlying linearGradient element unless handled by the component.
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Content snippet rendered by the component. |
class | string | '' | Tailwind classes merged with the theme and variants. |
element | SVGLinearGradientElement | null | null | Bindable reference to the underlying DOM element. |
inTransition | TransitionProps | undefined | Overrides the opening transition. |
isVisible | boolean | true | Bindable visibility state. |
outTransition | TransitionProps | undefined | Overrides the closing transition. |
theme | Theme | global theme | Optional local theme override. |
transition | TransitionProps | [noopTransition, {}] | A Svelte transition function and its options. |
variants | string[] | [] | Local variant names or theme references such as button.base. |
Default usage
Import LinearGradient from sveltewind/components. This example shows its default styling in a usable context.
Loading...Examples
Theme variants
Every variant available for LinearGradient in the built-in themes is shown below.
unstyled — Apply the unstyled variant.
Loading...accent — Apply the accent variant.
Loading...muted — Apply the muted variant.
Loading...Class overrides
Apply text-rose-500 opacity-75 locally. Classes are forwarded to this configuration element; its parent provides the visible surface.
Loading...Props and behavior
Change x1, y1, x2, y2 while retaining the default component styling.
Loading...Content and values
Provide different text, child content, or definitions inside the required parent context.
Loading...