shaderscn

Overview

shaderscn is an open-source collection of animated shader sections, backgrounds and components for shadcn/ui and React. Every item is built on Paper Shaders (@paper-design/shaders-react) and can be installed with the shadcn CLI or copied straight into an app.

The registry holds 33 items: 22 full-width landing page sections and 11 smaller components. Sections cover heroes, pricing, waitlists, changelogs, team grids, logo clouds, 404 pages and footers, each paired with a GPU shader effect such as god rays, dithering, halftone, water caustics or mesh gradients.

Features

• Hero sections: God rays, dithering sphere, dithering globe with flight arcs, halftone photo, water caustics and heatmap logo heroes
• Landing sections: Warp CTA, fluted glass app download, newsletter, pulsing border pricing with billing toggle, testimonial wall and neuro noise stats
• Utility pages: Dithered 404 page, smoke ring waitlist, spiral launch countdown and grain gradient sign-in layout
• Footer and banners: Mesh gradient footer wordmark and a dismissible mesh gradient announcement bar
• Backgrounds: Mesh gradient, dot grid and waves containers
• Components: Pulsing border cards and prompt, grain gradient and dithering frame cards, liquid metal orb and button, lens distortion card and mesh gradient avatar
• Searchable catalog: Command menu (Cmd+K) for jumping to any shader

Tech stack

• React, shadcn/ui
• Paper Shaders (@paper-design/shaders-react)
• Lucide React

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @shaderscn/component-name