Get started

Already using shadcn? You can skip this step.

Register the @shaderscn namespace in your components.json. You only need to do this once per project.

{
  "registries": {
    "@shaderscn": "https://shaderscn.com/r/{name}.json"
  }
}

Every shader has its own install command. Pick one from the sidebar to copy it, or swap the name below. The CLI also installs @paper-design/shaders-react and any shadcn components it uses.

Skipping the namespace? Install directly from the URL instead.

The component lives in your codebase, so every detail is yours to change.

import { GodRaysHero } from "@/components/god-rays-hero"

export default function Page() {
  return <GodRaysHero title="Light up your next launch" />
}

Content such as titles, descriptions and actions is passed as props. Any other props, including className, are forwarded to the root element. The shader itself is configured inside the component: edit its colors, speed and shape directly in the source. See the Paper Shaders playground for every parameter.

Prefer to skip the CLI? Every shader page has a Manual tab with the dependencies to install and the complete source to paste.