Skip to content

README.md

Latest commit

 

History

History
139 lines (108 loc) · 7.3 KB

README.md

File metadata and controls

139 lines (108 loc) · 7.3 KB
Raw

23rd — Opinionated UI components for shippers

Docs GitHub stars Contributors Last commit shadcn registry

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
  • Built to ship — React, Tailwind, Motion where it earns its keep

Quick start

Install a component:

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

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
Shader Grass @23rd/shader-grass Raymarched rolling meadow under an open sky, with wind moving through the grass
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)}
    />
  )
}

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

Connect the repo in the Cloudflare dashboard (Workers Builds) for Git-based deploys. 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 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 radiumcoders (Jay).