23rd

项目概述

23rd 是由 radiumcoders 打造的开源 shadcn/ui 组件注册表，走「少而精、有主见」的路线：间距、动效与交互默认值都已调校到位。组件集中在着色器背景、趣味 404 与高质感交互展示件，通过 shadcn CLI 把源码直接装进你的仓库，改起来毫无黑盒负担。

核心特性

• 🏗️ shadcn 原生架构：遵循标准 registry 协议，shadcn add @23rd/xxx 一条命令即装，源码归你所有；基于 Tailwind CSS 4 + TypeScript，每个组件都是带完整类型 props 的单一客户端组件。
• 🎨 美学在线的视觉组件：20 个精选组件覆盖 WebGL 着色器（Shader Gradient / Sky / Metal / Anime Fire）、ASCII Fluid 流体、Radiant Lines 超空间星场与 three.js Ring Tower 旋转塔。
• ♿️ 令人记住的交互细节：光标烧灼再重组的 Dithered 404、可上手玩的诺基亚贪吃蛇 404、可弹奏的 SVG 打字机，以及会同步你真实按键的等距机械键盘插画。
• ⚡️ 开发者体验 (DX)：无需对抗「大而全」的设计系统，从一个更锋利的基线出发；附带的 Agent Skill（Beta）还能教会编码智能体该选哪个组件、何时不该用。

快速上手与示例代码

pnpm dlx shadcn@latest add @23rd/gooey-color-picker
# 或直接从 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)}
    />
  )
}

技术选型建议与适用场景

• 非常适合：基于 shadcn/ui 的 React 项目，需要 landing page 视觉冲击力（着色器 Hero、滚动星场）或让人愿意截图分享的 404 页面的产品官网与个人作品集。
• 与同类方案对比：相比 Aceternity UI、Magic UI 的海量组件，23rd 每个组件的默认审美都经过打磨；但组件以视觉展示类为主，表单、表格等业务组件请回到 shadcn/ui 本体。