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

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
• React and Svelte 5 — every published registry item ships for both; pick a framework on the install command

Quick start

Install a component (React):

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

Svelte 5 (lands in src/lib/components/ui/):

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

Or pull straight from GitHub:

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

Components

Component	Install	Description
ASCII Fluid	@23rd/ascii-fluid	Mouse-trail WebGL fluid quantized to a clean ASCII brightness ramp
ASCII Logo	@23rd/ascii-logo	Interactive ASCII wordmark — hover shove, then click to scatter, drop, and gather
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 Fire	@23rd/shader-fire	Sparse 2D fire wash — tongues rise from the bottom behind a landing hero
Shader Gradient	@23rd/shader-gradient	Quiet WebGL wash behind landing heroes, empty states, and marketing sections
Stretchy Footer	@23rd/stretchy-footer	Dia-style rubber overscroll; aurora stretches past the bottom, then snaps back
Tangle Footer	@23rd/tangle-footer	Nested SVG text ribbons as a footer

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)}
    />
  )
}

Svelte:

<script>
  import GooeyColorPicker from "$lib/components/ui/gooey-color-picker.svelte"
</script>

<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.

pnpm install
pnpm dev

Useful scripts:

Script	What it does
pnpm dev	Next.js dev server
pnpm build	Build registry + production app
pnpm preview	Build with OpenNext and preview in the Workers runtime
pnpm cf:deploy	Build with OpenNext and deploy to Cloudflare Workers
pnpm cf:upload	Build with OpenNext and upload a preview version
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), Cloudflare Workers (OpenNext).

Deploy to Cloudflare

pnpm cf:deploy

GitHub Actions deploys production on push to main. Opening a PR uploads a preview version (production is untouched) and comments a stable URL, the same idea as Vercel preview deployments:

https://pr-<number>-23rd-dev.<subdomain>.workers.dev

That alias stays put as you push more commits to the same PR. Preview URLs live on workers.dev; they are public unless you later put Cloudflare Access in front of them.

You can get the same PR comments from Workers Builds instead: connect the repo in the Cloudflare dashboard, set the deploy command to pnpm cf:deploy, the non-production command to pnpm cf:upload, and enable Builds for non-production branches. Don’t run both Workers Builds and this GitHub Action for the same events or you’ll double-deploy.

Point 23rd.dev DNS at the Worker when you’re ready to cut over from Vercel.

Contributing

New components live under registry/<name>/ with a vanilla engine, React/Svelte wrappers, and a registry.json (React item plus <name>-svelte), 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

• Documentation
• Registry index
• shadcn/ui

---

Made by radiumcoders (Jay).