---
name: "@23rd"
slug: "23rd"
description: "Opinionated components for shippers."
category: "Forms"
tags: ["backgrounds", "icons"]
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: false
pro_url: null
github_stars: 68
component_count: 20
generated_at: "2026-09-05T09:50:59.044Z"
---

# @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.vercel.app/registry/23rd
- This file: https://sh4dcn.vercel.app/md/23rd.md

## 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-fluid-svelte | 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-svelte.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` |
| ascii-logo-svelte | 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-svelte.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` |
| dithered-404-svelte | 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-svelte.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` |
| gooey-color-picker-svelte | 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-svelte.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` |
| live-orb-svelte | 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-svelte.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` |
| radiant-lines-svelte | 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-svelte.json` |
| shader-fire | registry:ui | Sparse 2D WebGL fire wash for landing heroes — tongues rise from the bottom, theme-aware, optional pointer heat. | `npx shadcn@latest add https://23rd.dev/r/shader-fire.json` |
| shader-fire-svelte | registry:ui | Sparse 2D WebGL fire wash for landing heroes — tongues rise from the bottom, theme-aware, optional pointer heat. | `npx shadcn@latest add https://23rd.dev/r/shader-fire-svelte.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-gradient-svelte | 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-svelte.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` |
| stretchy-footer-svelte | 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-svelte.json` |
| tangle-footer | registry:ui | A footer of tangled SVG ribbons — thick dark strokes with white text running along each path via textPath. | `npx shadcn@latest add https://23rd.dev/r/tangle-footer.json` |
| tangle-footer-svelte | registry:ui | A footer of tangled SVG ribbons — thick dark strokes with white text running along each path via textPath. | `npx shadcn@latest add https://23rd.dev/r/tangle-footer-svelte.json` |

## For AI agents

```text
You are adding components from @23rd to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.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.vercel.app/json (library slug: 23rd).
```