slide-cn
componentgradient-radialsource: ok · hit
Radial Gradient Background
A full-bleed radial gradient background emanating from the center using the slide-cn theme palette tokens (background, background-2, background-3).
npx shadcn add "https://slide-cn.com/r/gradient-radial.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, 12:53:49 PM
components/ui/slide-cn/backgrounds/gradients/radial.tsx
import { cn } from "@/lib/utils";
type RadialGradientProps = React.ComponentProps<"div">;
/**
* RadialGradient
*
* A full-bleed background that renders a radial gradient emanating from the
* center using the slide-cn theme palette tokens: background, background-2,
* and background-3.
*
* Usage:
* ```tsx
* <Slide background={<RadialGradient />}>
* {slide content}
* </Slide>
* ```
*/
export function RadialGradient({
className,
style,
...props
}: RadialGradientProps) {
return (
<div
className={cn("absolute inset-0", className)}
style={{
background: `radial-gradient(
ellipse at center,
var(--background-3),
var(--background),
var(--background-2)
)`,
...style,
}}
{...props}
/>
);
}