Skip to content
Day 69: new resources are added every day. See what's new
Best Productivity ResourcesBy Shushant LakhyaniVerified creator

Website

shadercn

Beautiful WebGPU/WGSL shader components for React, built on vgpu and TypeGPU and distributed via shadcn.

Visit shadercn4.5

  • Rating

    4.5 / 5

  • Pricing

    Free

  • Difficulty

    Intermediate

  • Works on

    Web

Built with love by Shushant Lakhyani. Building bestproductivityresources.com

Free: 1,100+ ways people make money onlineFree: 399+ ways to make money online

What is shadercn?

shadercn is a curated registry of ready-to-use WebGPU/WGSL shader components for React. Built on vgpu and TypeGPU, the components install through the shadcn CLI so developers can drop interactive backgrounds, orbs, glass effects and generative visuals into React apps without writing raw shader code.

Pros: what shadercn does well

  • Drop-in shader components via the shadcn CLI
  • Built on a modern WebGPU/TypeGPU stack
  • Open source with a growing component library

Cons: where it falls short

  • Requires React and a modern WebGPU-compatible browser
  • Some components may need customisation for production use
  • Still an emerging ecosystem with limited tutorials

Who shadercn is for

React developers and designers who want eye-catching shader effects without writing WebGPU from scratch.

Who can skip it

Teams building plain, static sites or users on older browsers without WebGPU support.

shadercn alternatives

Not sold on shadercn? These do a similar job, and each card says what it has in common.

All Workflows resources

microcharts

Focus: charts, sparklines and svg. Shares react and components with shadercn. Same 4.5 rating.

WebsiteFreeWeb
4.5Visit

21st

Focus: tailwind and templates. Shares react and components with shadercn. Freemium (shadercn: Free). Rated 4.7 (shadercn: 4.5).

WebsiteFree planWeb
4.7Visit

pdfcn

Focus: pdf, documents and developer tools. Shares react and components with shadercn. A framework, not a website. Rated 4.4 (shadercn: 4.5).

FrameworkFreeWeb, Cross-Platform
4.4Visit

Keyline Icons

Focus: icons, svg and design. Shares react and shadcn with shadercn. Rated 4.6 (shadercn: 4.5).

WebsiteFreeWeb
4.6Visit

Storybook

Focus: ui development, testing and documentation. Shares components and react with shadercn. A framework, not a website. Rated 4.7 (shadercn: 4.5).

FrameworkFreeWeb
4.7Visit

Astryx Design System

Focus: design system, stylex and themes. Shares react and open source with shadercn. A framework, not a website. Rated 4.6 (shadercn: 4.5).

FrameworkFreeWeb
4.6Visit

Free alternatives to shadercn

Want to spend nothing? These free picks cover similar ground.

Coded Visuals

Focus: animated visuals, landing pages and marketing. Shares react and shadcn with shadercn. A framework, not a website. Rated 4.6 (shadercn: 4.5).

FrameworkFreeWeb
4.6Visit

Toggles.dev

Focus: theme toggle, dark mode and svelte. Shares react and shadcn with shadercn. A framework, not a website. Rated 4.6 (shadercn: 4.5).

FrameworkFreeWeb
4.6Visit

Transitions.dev

Focus: transitions, animation and design. Shares ui and react with shadercn. A framework, not a website. Same 4.5 rating.

FrameworkFreeWeb
4.5Visit

Circle

Focus: linear clone, project management and nextjs. Shares react and open source with shadercn. Rated 4.7 (shadercn: 4.5).

WebsiteFreeWeb
4.7Visit

ServerKit

Focus: server control panel, vps and deployment. Shares react and open source with shadercn. Adds Linux. Rated 4.7 (shadercn: 4.5).

WebsiteFreeWeb, Linux
4.7Visit

Portracker

Focus: self-hosted, monitoring and ports. Shares open source with shadercn. A web app, not a website. Adds Linux. Rated 4.6 (shadercn: 4.5).

Web AppFreeWeb, Linux
4.6Visit
Are you the maker of shadercn?Get a free Featured badge for your site, a share image and ready-to-paste posts. No sign-up.

Free Notion database

1,100+ ways people are making money online

Real online businesses, creators and projects, broken down by how they make money: apps, online stores, AI tools and more. Free on Gumroad.

Get the free database

Free Notion database

399+ ways to make money online

Hundreds of online income methods in one place, so you can compare options and pick one to try. Free on Gumroad.

Get the free list

For research and ideas only. Results vary and nothing here is a promise of income. See our Disclaimer.

Weekly newsletter

Everything new, every Monday.

One short email every Monday with everything shipped that week: new free tools and websites, new guides, new free browser tools and what's new in my free Gumroad libraries, plus how the site is growing. Free, and you can unsubscribe anytime.

Join the newsletter

You sign up on Gumroad, which stores your email to send the newsletter. See our Privacy Policy.