---
name: "@23rd"
slug: "23rd"
description: "Opinionated components for shippers."
category: "Forms"
tags: ["backgrounds", "icons", "pro-available", "text-effects"]
framework: "react"
license: null
author: "radiumcoders"
website: "https://23rd.dev"
github: "https://github.com/radiumcoders/23rd.dev"
registry: "https://23rd.dev/r/registry.json"
pro: true
pro_url: "https://23rd.dev/pricing"
github_stars: 216
component_count: 20
generated_at: "2026-10-27T06:34:08.542Z"
---

# @23rd

Opinionated components for shippers.

## Links

- Website: https://23rd.dev
- GitHub: https://github.com/radiumcoders/23rd.dev
- Registry JSON: https://23rd.dev/r/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/23rd
- This file: https://sh4dcn.netlify.app/md/23rd.md
- Pro / pricing: https://23rd.dev/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://23rd.dev/r/registry.json
pnpm dlx shadcn@latest add https://23rd.dev/r/registry.json
bunx shadcn@latest add https://23rd.dev/r/registry.json
# clone the source repo
git clone https://github.com/radiumcoders/23rd.dev.git
# fetch the raw registry index
curl -s https://23rd.dev/r/registry.json
```

## Components (20)

| name | type | description | install |
| --- | --- | --- | --- |
| ascii-fluid | registry:ui | Mouse-trail WebGL fluid background quantized to a clean ASCII brightness ramp - zero deps, theme-aware. | `npx shadcn@latest add https://23rd.dev/r/ascii-fluid.json` |
| ascii-logo | registry:ui | Interactive ASCII wordmark: glyphs shove away from the cursor, then click-cycle through scatter, gravity drop, and reassemble. Zero deps. | `npx shadcn@latest add https://23rd.dev/r/ascii-logo.json` |
| dither-scan | registry:ui | 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 brings back tone and… | `npx shadcn@latest add https://23rd.dev/r/dither-scan.json` |
| dithered-404 | registry:ui | Bayer-pixel 404 section: a fireball cursor scorches the glyph, burns it into embers and smoke, then reforms. Optional soft realistic fire. | `npx shadcn@latest add https://23rd.dev/r/dithered-404.json` |
| folio | registry:ui | The whole page leans back in perspective while you scroll, blurs, then springs flat when you stop. | `npx shadcn@latest add https://23rd.dev/r/folio.json` |
| gooey-color-picker | registry:ui | A floating color picker with a circular hue wheel, alpha slider, hex field, and motion-powered open/close. | `npx shadcn@latest add https://23rd.dev/r/gooey-color-picker.json` |
| iso-lattice | registry:ui | A hex lattice of glowing tiles that builds solid isometric figures, one over the last, from the floor up. Follows light and dark. | `npx shadcn@latest add https://23rd.dev/r/iso-lattice.json` |
| live-orb | registry:ui | An evenly lit sphere with two capsule eyes that follow the pointer: white, black, webgl, and custom variants. | `npx shadcn@latest add https://23rd.dev/r/live-orb.json` |
| logo-burst | registry:ui | Hair-line tentacles explode from the center, then keep a slow inhale. Follows light and dark. | `npx shadcn@latest add https://23rd.dev/r/logo-burst.json` |
| mech-keyboard | registry:ui | A 75% mechanical keyboard drawn as an isometric illustration in three.js, with ink outlines and a volume knob. Keys press along with your real keyboard, and a … | `npx shadcn@latest add https://23rd.dev/r/mech-keyboard.json` |
| phosphor-score | registry:ui | Vertical sheet music on a CRT phosphor: notes fall, bloom at the playhead, then exit in a flare. | `npx shadcn@latest add https://23rd.dev/r/phosphor-score.json` |
| radiant-lines | registry:ui | A hyperspace starfield background: colored streaks radiate from the center, with warp speed driven by scroll velocity. | `npx shadcn@latest add https://23rd.dev/r/radiant-lines.json` |
| ring-tower | registry:ui | A tower of tilted bands wrapped in your images. They crawl around, drag to spin, and neighbors counter-turn with the pointer. | `npx shadcn@latest add https://23rd.dev/r/ring-tower.json` |
| shader-anime-fire | registry:ui | 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. | `npx shadcn@latest add https://23rd.dev/r/shader-anime-fire.json` |
| shader-gradient | registry:ui | Quiet WebGL color wash for landing heroes, empty states, and marketing sections: theme-aware, optional pointer follow. | `npx shadcn@latest add https://23rd.dev/r/shader-gradient.json` |
| shader-metal | registry:ui | Liquid chrome, gold, or copper ribbons twisting through a studio light rig: transparent WebGL, theme-aware, with a key light that follows the pointer. | `npx shadcn@latest add https://23rd.dev/r/shader-metal.json` |
| shader-sky | registry:ui | WebGL sky for landing heroes: clear blue with drifting clouds in light, storm gray in dark, optional window-glass film. | `npx shadcn@latest add https://23rd.dev/r/shader-sky.json` |
| snake-404 | registry:ui | 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. | `npx shadcn@latest add https://23rd.dev/r/snake-404.json` |
| stretchy-footer | registry:ui | Dia-style rubber overscroll: rainbow aurora stretches up past the bottom, then snaps back. | `npx shadcn@latest add https://23rd.dev/r/stretchy-footer.json` |
| typewriter | registry:ui | A real, playable typewriter in SVG: each key presses down, its typebar swings up to strike the ribbon, and the carriage steps along. Click it and type. | `npx shadcn@latest add https://23rd.dev/r/typewriter.json` |

## For AI agents

```text
You are adding components from @23rd to a shadcn-compatible project.
1. Read this file (https://sh4dcn.netlify.app/md/23rd.md) for the component list.
2. Fetch the machine-readable index: https://23rd.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.netlify.app/json (library slug: 23rd).
```