23rd — Opinionated UI components for shippers

23rd is an open-source registry of tasteful, opinionated UI components. Copy what you need, paste into your app, and ship — without fighting a kitchen-sink design system.

Site: · Docs:

Why 23rd

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

Quick start

Install a component:

bash
pnpm dlx shadcn@latest add @23rd/gooey-color-picker

Or pull straight from GitHub:

bash
pnpm dlx shadcn@latest add radiumcoders/23rd.dev/gooey-color-picker

Components

ComponentInstallDescription
@23rd/ascii-fluidMouse-trail WebGL fluid quantized to a clean ASCII brightness ramp
@23rd/gooey-color-pickerFloating swatch → hue wheel, alpha, hex — joined by an SVG gooey filter
@23rd/radiant-linesHyperspace starfield background; warp speed driven by scroll
@23rd/shader-gradientSubtle theme-aware WebGL gradient wash; soft blobs + pointer follow
@23rd/stretchy-footerDia-style rubber overscroll; aurora stretches past the bottom, then snaps back
tsx
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)}    />  )}

Develop locally

This repo is the docs site and registry source.

bash
pnpm installpnpm dev

Useful scripts:

ScriptWhat it does
pnpm devNext.js dev server
pnpm buildBuild registry + production app
pnpm registry:buildEmit public/r/*.json from registry/
pnpm testRun registry tests
pnpm typecheckMDX + TypeScript check

Stack: Next.js 16, React 19, Fumadocs, Tailwind CSS 4, shadcn/ui (Base UI).

Contributing

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.

Links

Made by (Jay).