Dev Design Library

23rd.dev components

Opinionated UI Components for shippers. An open source library of tasteful Web components. Framework agnostic. Copy, paste, ship.

Components
22
Framework
React
Stack
React, TypeScript, Tailwind
GitHub stars
127
Source
https://github.com/radiumcoders/23rd.dev
Website
https://23rd.dev
Install
pnpm dlx shadcn@latest add @23rd/{name}

All 23rd.dev components

  • ASCII Fluid: Mouse-trail WebGL fluid background quantized to a clean ASCII brightness ramp - zero deps, theme-aware.
  • ASCII Logo: Interactive ASCII wordmark: glyphs shove away from the cursor, then click-cycle through scatter, gravity drop, and reassemble. Zero deps.
  • Dither Scan: An image that starts as a 1-bit ordered dither. A diagonal scan line sweeps it a set number of times, and each pass sharpens the cells and…
  • Dithered 404: Bayer-pixel 404 section: a fireball cursor scorches the glyph, burns it into embers and smoke, then reforms. Optional soft realistic fire.
  • Folio: The whole page leans back in perspective while you scroll, blurs, then springs flat when you stop.
  • Gooey Color Picker: A floating color picker with a circular hue wheel, alpha slider, hex field, and motion-powered open/close.
  • Iso Lattice: A hex lattice of glowing tiles that builds solid isometric figures, one over the last, from the floor up. Follows light and dark.
  • Live Orb: An evenly lit sphere with two capsule eyes that follow the pointer: white, black, webgl, and custom variants.
  • Logo Burst: Hair-line tentacles explode from the center, then keep a slow inhale. Follows light and dark.
  • Mech Keyboard: A 75% mechanical keyboard drawn as an isometric illustration in three.js, with ink outlines and a volume knob. Keys press along with your…
  • Phosphor Score: Vertical sheet music on a CRT phosphor: notes fall, bloom at the playhead, then exit in a flare.
  • Radiant Lines: A hyperspace starfield background: colored streaks radiate from the center, with warp speed driven by scroll velocity.
  • Ring Tower: A tower of tilted bands wrapped in your images. They crawl around, drag to spin, and neighbors counter-turn with the pointer.
  • Shader Anime Fire: Cel-shaded WebGL flames for landing heroes: tongues lick up from the bottom in flat bands of heat, and the fire reaches for the pointer.
  • Shader Fire: Sparse 2D WebGL fire wash for landing heroes — tongues rise from the bottom, theme-aware, optional pointer heat.
  • Shader Gradient: Quiet WebGL color wash for landing heroes, empty states, and marketing sections: theme-aware, optional pointer follow.
  • Shader Metal: Liquid chrome, gold, or copper ribbons twisting through a studio light rig: transparent WebGL, theme-aware, with a key light that follows…
  • Shader Sky: WebGL sky for landing heroes: clear blue with drifting clouds in light, storm gray in dark, optional window-glass film.
  • Snake 404: Dot-matrix 404 where every dot is food: a Nokia-style snake eats the digits, then they come back. Arrow keys, WASD, or a swipe take over.
  • Stretchy Footer: Dia-style rubber overscroll: rainbow aurora stretches up past the bottom, then snaps back.
  • Tangle Footer: A footer of tangled SVG ribbons — thick dark strokes with white text running along each path via textPath.
  • Typewriter: A real, playable typewriter in SVG: each key presses down, its typebar swings up to strike the ribbon, and the carriage steps along. Click…

Browse by category