Getting Started

23rd is a shadcn/ui registry for React and Svelte 5. Pick your framework on the install command.

Install a component

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

Or from the public GitHub registry:

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

Swap shader-gradient for any item name. Svelte items are @23rd/<name>-svelte and land in src/lib/components/ui/.

Use a background or shader

Put it in a relatively positioned container, with your content 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>
  )
}

Browse