23rd

Overview

23rd is an open-source shadcn/ui registry of opinionated, tasteful components made by radiumcoders. It focuses on shader backgrounds, playful 404s, and interactive showpieces — copy what you need with the shadcn CLI, own the source in your repo, and ship without fighting a kitchen-sink design system.

Key Features

• shadcn-Native Architecture: Standard registry protocol — shadcn add @23rd/xxx drops a single typed React client component (Tailwind CSS 4 + TypeScript) straight into your project.
• Opinionated Visual Craft: 20 curated components covering WebGL shaders (Shader Gradient / Sky / Metal / Anime Fire), ASCII Fluid, Radiant Lines starfields, and a three.js Ring Tower.
• Memorable Interactions: A dithered 404 your cursor burns into embers, a Nokia-style Snake 404 you can play, a playable SVG typewriter, and a mech keyboard that mirrors your real keystrokes.
• Developer Experience: Spacing, motion, and interaction defaults already feel finished, so you start from a sharper baseline; a beta agent skill even teaches coding agents which component fits — and when not to use one.

Installation & Quick Start

pnpm dlx shadcn@latest add @23rd/gooey-color-picker
# or pull straight from GitHub
pnpm dlx shadcn@latest add radiumcoders/23rd.dev/gooey-color-picker

import { GooeyColorPicker } from "@/components/ui/gooey-color-picker"

export function Example() {
  return (
    <GooeyColorPicker
      defaultValue={{ h: 210, s: 90, l: 55, a: 1 }}
      onChange={(color, css) => console.log(color, css)}
    />
  )
}

Why Choose 23rd?

1. Target Use Case: shadcn-based React projects that need landing-page wow — shader heroes, scroll-driven starfields, or 404 pages people screenshot and share.
2. Ecosystem & Addons: Free and open source; install via the shadcn CLI or straight from GitHub, with a beta agent skill (npx skills add radiumcoders/23rd.dev --skill 23rd) for AI-assisted development.