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

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

The 23rd agent skill teaches a coding agent every published registry component: which one fits, how to install it for React or Svelte, and the props that actually exist. It also knows when not to use a component.

npx skills add radiumcoders/23rd.dev --skill 23rd

Global install:

npx skills add radiumcoders/23rd.dev --skill 23rd -g

skills/23rd/ is the copy the skills CLI discovers. .cursor/skills/23rd/ is the same skill for Cursor /23rd in this repo. Docs: 23rd.dev/docs.

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

This repo is the docs site and registry source.

pnpm install
pnpm dev

Useful scripts:

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

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.

The sponsors page is the same empty-slot board as shadscan: Diamond $250/mo, Platinum $100/mo, Gold $50/mo, Silver $20/mo. Live Creem payment links are wired, so empty slots open checkout.

1. Sign up at creem.io and open the dashboard.
2. Leave Test Mode on (sidebar toggle) while you wire this up. Test and live products/keys are completely separate.
3. Complete store details if the dashboard asks for them. Live payouts later need KYC/KYB under Balances → Payout Account.

In Products, create one recurring / every-month / USD product per tier:

On each product, set the success URL to https://23rd.dev/sponsors/thanks (or http://localhost:3000/sponsors/thanks in test). Click Share and copy the payment link (https://www.creem.io/payment/prod_...).

You can do the same from the Creem CLI after creem login --api-key creem_test_...:

creem products create \
  --name "23rd Diamond" \
  --description "Monthly Diamond sponsorship — logo, link, and release notes." \
  --price 25000 \
  --currency USD \
  --billing-type recurring \
  --billing-period every-month \
  --tax-category saas

Prices are in cents (25000 = $250.00). Repeat for 10000, 5000, and 2000.

Live payment links are already in wrangler.jsonc, .env.example, .dev.vars.example, and the fallback in lib/sponsors.ts.

Local Next.js (pnpm dev): copy .env.example → .env.local.

Local OpenNext/Wrangler (pnpm preview): copy .dev.vars.example → .dev.vars.

A Cloudflare Worker secret with the same name overrides the wrangler.jsonc var:

npx wrangler secret put CREEM_SPONSOR_DIAMOND_CHECKOUT_URL
npx wrangler secret put CREEM_SPONSOR_PLATINUM_CHECKOUT_URL
npx wrangler secret put CREEM_SPONSOR_GOLD_CHECKOUT_URL
npx wrangler secret put CREEM_SPONSOR_SILVER_CHECKOUT_URL

Paste the matching https:// payment link when prompted. Redeploy after changing a secret.

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.

• Documentation
• Registry index
• Agent skill on skills.sh
• shadcn/ui

Made by radiumcoders (Jay).