23rd is an open-source shadcn/ui registry of tasteful, opinionated UI components. Copy what you need, paste into your app, and ship — without fighting a kitchen-sink design system.
Site: 23rd.dev · Docs: 23rd.dev/docs
Most kits hand you every option. 23rd picks a direction: spacing, motion, and interaction patterns that already feel finished. You can still override anything — you just start from a sharper baseline.
- shadcn-native — install with the CLI, own the source in your repo
- Opinionated defaults — less boilerplate, clearer decisions
- Built to ship — React, Tailwind, Motion where it earns its keep
Install a component:
pnpm dlx shadcn@latest add @23rd/gooey-color-pickerOr pull straight from GitHub:
pnpm dlx shadcn@latest add radiumcoders/23rd.dev/gooey-color-picker| Component | Install | Description |
|---|---|---|
| ASCII Fluid | @23rd/ascii-fluid |
Mouse-trail WebGL fluid quantized to a clean ASCII brightness ramp |
| Gooey Color Picker | @23rd/gooey-color-picker |
Floating swatch → hue wheel, alpha, hex — joined by an SVG gooey filter |
| Radiant Lines | @23rd/radiant-lines |
Hyperspace starfield background; warp speed driven by scroll |
| Shader Gradient | @23rd/shader-gradient |
Subtle theme-aware WebGL gradient wash; soft blobs + pointer follow |
| Stretchy Footer | @23rd/stretchy-footer |
Dia-style rubber overscroll; aurora stretches past the bottom, then snaps back |
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)}
/>
)
}This repo is the docs site and registry source.
pnpm install
pnpm devUseful scripts:
| Script | What it does |
|---|---|
pnpm dev |
Next.js dev server |
pnpm build |
Build registry + production app |
pnpm registry:build |
Emit public/r/*.json from registry/ |
pnpm test |
Run registry tests |
pnpm typecheck |
MDX + TypeScript check |
Stack: Next.js 16, React 19, Fumadocs, Tailwind CSS 4, shadcn/ui (Base UI).
New components live under registry/<name>/ with a registry.json, then get documented in content/docs/components/. Run pnpm registry:build before shipping registry changes.
PRs that sharpen defaults, fix edge cases, or add tasteful components are welcome.
Made by radiumcoders (Jay).