@23rd
Opinionated components for shippers.
Install this registry
npx shadcn@latest add https://23rd.dev/r/registry.json pnpm dlx shadcn@latest add https://23rd.dev/r/registry.json bunx shadcn@latest add https://23rd.dev/r/registry.json curl -s https://23rd.dev/r/registry.json Components
28 totalMouse-trail WebGL fluid background quantized to a clean ASCII brightness ramp - zero deps, theme-aware.
npx shadcn@latest add https://23rd.dev/r/ascii-fluid.json Mouse-trail WebGL fluid background quantized to a clean ASCII brightness ramp - zero deps, theme-aware.
npx shadcn@latest add https://23rd.dev/r/ascii-fluid-svelte.json Interactive ASCII wordmark — glyphs shove away from the cursor, then click-cycle through scatter, gravity drop, and reassemble. Zero deps.
npx shadcn@latest add https://23rd.dev/r/ascii-logo.json Interactive ASCII wordmark — glyphs shove away from the cursor, then click-cycle through scatter, gravity drop, and reassemble. Zero deps.
npx shadcn@latest add https://23rd.dev/r/ascii-logo-svelte.json Bayer-pixel 404 section — a fireball cursor scorches the glyph, burns it into embers and smoke, then reforms. Optional soft realistic fire.
npx shadcn@latest add https://23rd.dev/r/dithered-404.json Bayer-pixel 404 section — a fireball cursor scorches the glyph, burns it into embers and smoke, then reforms. Optional soft realistic fire.
npx shadcn@latest add https://23rd.dev/r/dithered-404-svelte.json The whole page leans back in perspective while you scroll, blurs, then springs flat when you stop.
npx shadcn@latest add https://23rd.dev/r/folio.json The whole page leans back in perspective while you scroll, blurs, then springs flat when you stop.
npx shadcn@latest add https://23rd.dev/r/folio-svelte.json A floating color picker with a circular hue wheel, alpha slider, hex field, and motion-powered open/close.
npx shadcn@latest add https://23rd.dev/r/gooey-color-picker.json A floating color picker with a circular hue wheel, alpha slider, hex field, and motion-powered open/close.
npx shadcn@latest add https://23rd.dev/r/gooey-color-picker-svelte.json An evenly lit sphere with two capsule eyes that follow the pointer — white, black, webgl, and custom variants.
npx shadcn@latest add https://23rd.dev/r/live-orb.json An evenly lit sphere with two capsule eyes that follow the pointer — white, black, webgl, and custom variants.
npx shadcn@latest add https://23rd.dev/r/live-orb-svelte.json Hair-line tentacles explode from the center, then keep a slow inhale. Follows light and dark.
npx shadcn@latest add https://23rd.dev/r/logo-burst.json Hair-line tentacles explode from the center, then keep a slow inhale. Follows light and dark.
npx shadcn@latest add https://23rd.dev/r/logo-burst-svelte.json Vertical sheet music on a CRT phosphor — notes fall, bloom at the playhead, then exit in a flare.
npx shadcn@latest add https://23rd.dev/r/phosphor-score.json Vertical sheet music on a CRT phosphor — notes fall, bloom at the playhead, then exit in a flare.
npx shadcn@latest add https://23rd.dev/r/phosphor-score-svelte.json A hyperspace starfield background — colored streaks radiate from the center, with warp speed driven by scroll velocity.
npx shadcn@latest add https://23rd.dev/r/radiant-lines.json A hyperspace starfield background — colored streaks radiate from the center, with warp speed driven by scroll velocity.
npx shadcn@latest add https://23rd.dev/r/radiant-lines-svelte.json Sparse 2D WebGL fire wash for landing heroes — tongues rise from the bottom, theme-aware, optional pointer heat.
npx shadcn@latest add https://23rd.dev/r/shader-fire.json Sparse 2D WebGL fire wash for landing heroes — tongues rise from the bottom, theme-aware, optional pointer heat.
npx shadcn@latest add https://23rd.dev/r/shader-fire-svelte.json Quiet WebGL color wash for landing heroes, empty states, and marketing sections — theme-aware, optional pointer follow.
npx shadcn@latest add https://23rd.dev/r/shader-gradient.json Quiet WebGL color wash for landing heroes, empty states, and marketing sections — theme-aware, optional pointer follow.
npx shadcn@latest add https://23rd.dev/r/shader-gradient-svelte.json WebGL sky for landing heroes — clear blue with drifting clouds in light, storm gray in dark, optional window-glass film.
npx shadcn@latest add https://23rd.dev/r/shader-sky.json WebGL sky for landing heroes — clear blue with drifting clouds in light, storm gray in dark, optional window-glass film.
npx shadcn@latest add https://23rd.dev/r/shader-sky-svelte.json Dia-style rubber overscroll — rainbow aurora stretches up past the bottom, then snaps back.
npx shadcn@latest add https://23rd.dev/r/stretchy-footer.json Dia-style rubber overscroll — rainbow aurora stretches up past the bottom, then snaps back.
npx shadcn@latest add https://23rd.dev/r/stretchy-footer-svelte.json A footer of tangled SVG ribbons — thick dark strokes with white text running along each path via textPath.
npx shadcn@latest add https://23rd.dev/r/tangle-footer.json A footer of tangled SVG ribbons — thick dark strokes with white text running along each path via textPath.
npx shadcn@latest add https://23rd.dev/r/tangle-footer-svelte.json