23rd

Overview

23rd is a shadcn/ui registry of opinionated React components aimed at developers shipping landing pages and products. It focuses on shaders, backgrounds, footers and interactive pieces, each installed with the shadcn CLI as source the project owns.

The registry currently lists 20 components grouped into backgrounds, shaders, footers, characters, pages, sections and experiments. Many are WebGL or canvas effects that follow light and dark mode, and several have zero dependencies. Items can also be installed straight from the public GitHub registry at radiumcoders/23rd.dev.

Features

• WebGL shaders: Shader Gradient, Shader Sky, Shader Metal (chrome, gold, copper) and cel-shaded Shader Anime Fire for hero sections.
• Animated backgrounds: Logo Burst, Radiant Lines starfield, ASCII Fluid mouse trail, Ring Tower and Iso Lattice.
• 404 pages: A Bayer-dithered 404 with a fireball cursor and a playable dot-matrix Snake 404.
• Interactive characters: Live Orb with pointer-tracking eyes and an interactive ASCII wordmark.
• Playful components: A gooey color picker, a three.js mechanical keyboard that mirrors real key presses, and a playable SVG typewriter.
• Scroll effects: Folio perspective scroll and a rubber-band Stretchy Footer.
• Theme-aware: Many effects, including Logo Burst, Iso Lattice and Shader Sky, adapt to light and dark mode.

Tech stack

• React
• shadcn/ui registry
• WebGL, Three.js, Motion

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @23rd/component-name