@shaderscn
Copy-paste shader sections and components for shadcn/ui, built on Paper Shaders.
Install this registry
npx shadcn@latest add https://www.shaderscn.com/r/registry.json pnpm dlx shadcn@latest add https://www.shaderscn.com/r/registry.json bunx shadcn@latest add https://www.shaderscn.com/r/registry.json curl -s https://www.shaderscn.com/r/registry.json Components
33 totalA full-bleed hero section lit by animated volumetric light rays.
npx shadcn@latest add https://www.shaderscn.com/r/god-rays-hero.json 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 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 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 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 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 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 A call-to-action banner with a hypnotic warped checkerboard background.
npx shadcn@latest add https://www.shaderscn.com/r/warp-cta.json 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 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 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 A masonry wall of testimonial cards with a printed paper grain.
npx shadcn@latest add https://www.shaderscn.com/r/testimonial-wall.json 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 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 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 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 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 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 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 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 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 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 A container with a soft, flowing mesh gradient behind its content.
npx shadcn@latest add https://www.shaderscn.com/r/mesh-gradient-background.json 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 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 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 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 A content card with a grainy, animated gradient cover.
npx shadcn@latest add https://www.shaderscn.com/r/grain-gradient-card.json 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 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 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 An image card with a magnifying lens that follows the cursor.
npx shadcn@latest add https://www.shaderscn.com/r/lens-distortion-card.json 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