slide-cn
componentgradient-linearsource: ok · refreshed
Linear Gradient Background
A full-bleed linear gradient background (top-left to bottom-right) using the slide-cn theme palette tokens.
npx shadcn add "https://slide-cn.com/r/gradient-linear.json"free
Visual style
gradient
Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.
Files1 · source cached 10/8/2026, 2:52:18 AM
components/ui/slide-cn/backgrounds/gradients/linear.tsx
import { cn } from "@/lib/utils";
type LinearGradientProps = React.ComponentProps<"div">;
/**
* GradientLinear
*
* A full-bleed background that renders a linear gradient from top-left to
* bottom-right using the slide-cn theme palette tokens.
*
* Usage:
* ```tsx
* <Slide background={<GradientLinear />}>
* {slide content}
* </Slide>
* ```
*/
export function LinearGradient({
className,
style,
...props
}: LinearGradientProps) {
return (
<div
className={cn("absolute inset-0", className)}
style={{
background: `linear-gradient(
to bottom right,
var(--background-2),
var(--background),
var(--background-3)
)`,
...style,
}}
{...props}
/>
);
}