Install a component

pnpm dlx shadcn@latest add @23rd/shader-gradient

Or from the public GitHub registry:

pnpm dlx shadcn@latest add radiumcoders/23rd.dev/shader-gradient

Swap shader-gradient for any item name.

Use a background or shader

Put it in a relatively positioned container, with your content in a later stacking context.

"use client"

import { ShaderGradient } from "@/components/ui/shader-gradient"

export function Hero() {
  return (
    <section className="relative isolate min-h-svh overflow-hidden bg-background">
      <ShaderGradient />
      <div className="relative z-10 p-10">Your content</div>
    </section>
  )
}

Browse

Category	Components
AI Components	Dither Scan
Background	Logo Burst, Radiant Lines, ASCII Fluid, Ring Tower, Iso Lattice
Shaders	Shader Gradient, Shader Anime Fire, Shader Sky, Shader Metal
Footers	Stretchy Footer
Characters	Live Orb, ASCII Logo
Pages	Dithered 404
Sections	Folio
Components	Gooey Color Picker
Experiments	Phosphor Score, Typewriter