Getting Started

23rd is a shadcn/ui registry. After install you own the source — same as any other registry item. Every component ships for React and Svelte 5; pick a framework on the install command and the rest of the docs follow.

Install a component

pnpm dlx shadcn@latest add @23rd/shader-gradient

Or pull straight from the public GitHub source registry:

pnpm dlx shadcn@latest add radiumcoders/23rd.dev/shader-gradient

Swap shader-gradient for any item name — shader-fire, live-orb, ascii-logo, radiant-lines, dithered-404, tangle-footer, and so on. Svelte installs as @23rd/<name>-svelte and lands in src/lib/components/ui/ so $lib imports resolve.

Use a background or shader

Place the component behind content in a relatively positioned container. Keep the UI in a later stacking context.

"use client"

import { ShaderGradient } from "@/components/ui/shader-gradient"

export function Hero() {
  return (
    <section className="relative isolate min-h-svh overflow-hidden bg-background">
      <ShaderGradient />
      <div className="relative z-10 p-10">Your content</div>
    </section>
  )
}

Shaders such as Shader Gradient and Shader Fire are atmosphere, not the page.

Browse