sh4dcnv2 · atlas
← libraries

@shaderscn

Copy-paste shader sections and components for shadcn/ui, built on Paper Shaders.

33 components react shadcn-cli MIT

Install this registry

shadcn (npm) npx shadcn@latest add https://www.shaderscn.com/r/registry.json
pnpm pnpm dlx shadcn@latest add https://www.shaderscn.com/r/registry.json
bun bunx shadcn@latest add https://www.shaderscn.com/r/registry.json
fetch registry curl -s https://www.shaderscn.com/r/registry.json

Components

33 total
God Rays Hero block

A full-bleed hero section lit by animated volumetric light rays.

npx shadcn@latest add https://www.shaderscn.com/r/god-rays-hero.json
Dithering Hero block

A split hero section with an ordered-dither sphere slowly turning beside the headline.

npx shadcn@latest add https://www.shaderscn.com/r/dithering-hero.json
Dithering Globe Hero block

A split hero section with a slowly spinning, ordered-dither globe of the Earth.

npx shadcn@latest add https://www.shaderscn.com/r/dithering-globe-hero.json
Dithering Globe Arcs Hero block

A centered hero section with a rising ordered-dither globe and flight arcs between cities.

npx shadcn@latest add https://www.shaderscn.com/r/dithering-globe-arcs-hero.json
Halftone Hero block

A split hero section that prints any photo as halftone dots, live on the GPU.

npx shadcn@latest add https://www.shaderscn.com/r/halftone-hero.json
Water Caustics Hero block

A full-bleed hero lit by rippling pool-light caustics. Made for travel and wellness sites.

npx shadcn@latest add https://www.shaderscn.com/r/water-caustics-hero.json
Heatmap Hero block

A launch hero where your logo glows like a heat map above the headline.

npx shadcn@latest add https://www.shaderscn.com/r/heatmap-hero.json
Warp CTA block

A call-to-action banner with a hypnotic warped checkerboard background.

npx shadcn@latest add https://www.shaderscn.com/r/warp-cta.json
Fluted Glass App Download block

An app download section with a phone mockup in front of its own screenshot, seen through fluted glass.

npx shadcn@latest add https://www.shaderscn.com/r/fluted-glass-app-download.json
Color Panels Newsletter block

A compact newsletter signup band with slowly turning glass panels beside the form.

npx shadcn@latest add https://www.shaderscn.com/r/color-panels-newsletter.json
Pulsing Border Pricing block

A three-tier pricing section with a billing toggle and a pulsing glow around the featured plan.

npx shadcn@latest add https://www.shaderscn.com/r/pulsing-border-pricing.json
Testimonial Wall block

A masonry wall of testimonial cards with a printed paper grain.

npx shadcn@latest add https://www.shaderscn.com/r/testimonial-wall.json
Image Dithering Team block

A team grid that dithers every headshot into one consistent look, with the original color on hover.

npx shadcn@latest add https://www.shaderscn.com/r/image-dithering-team.json
Simplex Noise Changelog block

A changelog timeline where every release gets its own cover, generated from the version number.

npx shadcn@latest add https://www.shaderscn.com/r/simplex-noise-changelog.json
Radial Gradient Logo Cloud block

A "trusted by" logo strip rising over the glowing horizon of a planet.

npx shadcn@latest add https://www.shaderscn.com/r/radial-gradient-logo-cloud.json
Neuro Noise Stats block

A band of headline numbers over a glowing web of fibers, like traffic moving through a network.

npx shadcn@latest add https://www.shaderscn.com/r/neuro-noise-stats.json
Dithering 404 block

A full-screen not found page with a dithered vortex behind a lost message.

npx shadcn@latest add https://www.shaderscn.com/r/dithering-404.json
Smoke Ring Waitlist block

A full-screen coming soon page with a smoke ring, a launch countdown and a waitlist signup.

npx shadcn@latest add https://www.shaderscn.com/r/smoke-ring-waitlist.json
Spiral Launch Countdown block

A launch event countdown over a turning spiral, with add-to-calendar links and a live state.

npx shadcn@latest add https://www.shaderscn.com/r/spiral-launch-countdown.json
Mesh Gradient Footer block

A site footer with a giant wordmark filled by a flowing mesh gradient.

npx shadcn@latest add https://www.shaderscn.com/r/mesh-gradient-footer.json
Mesh Gradient Announcement Bar block

A thin, dismissible announcement strip over a slowly flowing mesh gradient.

npx shadcn@latest add https://www.shaderscn.com/r/mesh-gradient-announcement-bar.json
Grain Gradient Auth block

A split sign-in page with a grainy gradient brand panel and a slot for your own form.

npx shadcn@latest add https://www.shaderscn.com/r/grain-gradient-auth.json
Mesh Gradient Background component

A container with a soft, flowing mesh gradient behind its content.

npx shadcn@latest add https://www.shaderscn.com/r/mesh-gradient-background.json
Dot Grid Background component

A container with a crisp dot grid that fades out towards the edges.

npx shadcn@latest add https://www.shaderscn.com/r/dot-grid-background.json
Waves Background component

A container with fine, flowing line waves. Made for fintech and audio pages.

npx shadcn@latest add https://www.shaderscn.com/r/waves-background.json
Pulsing Border Card component

A card wrapped in a living, pulsing glow that bleeds softly past its edges.

npx shadcn@latest add https://www.shaderscn.com/r/pulsing-border-card.json
Pulsing Border Prompt component

An AI prompt input with modes and file drops, whose glow shows what it is doing: listening, thinking, streaming or failing.

npx shadcn@latest add https://www.shaderscn.com/r/pulsing-border-prompt.json
Grain Gradient Card component

A content card with a grainy, animated gradient cover.

npx shadcn@latest add https://www.shaderscn.com/r/grain-gradient-card.json
Dithering Frame Card component

A card set in a thick frame of animated dithering, like a bezel around the content.

npx shadcn@latest add https://www.shaderscn.com/r/dithering-frame-card.json
Liquid Metal Orb component

A chrome orb with a liquid metal surface. Great as a logo mark or avatar.

npx shadcn@latest add https://www.shaderscn.com/r/liquid-metal-orb.json
Mesh Gradient Avatar component

A default avatar with a unique mesh gradient generated from any seed, like a user ID or email.

npx shadcn@latest add https://www.shaderscn.com/r/mesh-gradient-avatar.json
Lens Distortion Card component

An image card with a magnifying lens that follows the cursor.

npx shadcn@latest add https://www.shaderscn.com/r/lens-distortion-card.json
Liquid Metal Button component

A call-to-action button with a flowing chrome rim that speeds up on hover.

npx shadcn@latest add https://www.shaderscn.com/r/liquid-metal-button.json