Installation

RequirementsCopy Anchor Link

• React 19, or any version Base UI supports
• Tailwind CSS v4
• shadcn set up in your project, with a components.json. If you don't have one, run npx shadcn@latest init.

Any shadcn style works, Radix or Base UI, since CraftUI components bring their own copy of Base UI. Next.js isn't required: Vite, React Router, TanStack Start and other React setups all work.

Add the registryCopy Anchor Link

Run this once in your project. It adds the @runqora namespace to components.json.

npx shadcn@latest registry add @runqora=https://runqora.dev/r/{style}/{name}.json

If you already use Runqora UI, you've done this step.

Add componentsCopy Anchor Link

npx shadcn@latest add @runqora/craft-button

The first component you add also adds the theme to your CSS and lib/utils.ts if it's missing. Then import it:

import { Button } from "@/components/craft/button";

export function Play() {
  return <Button>Play</Button>;
}

FontsCopy Anchor Link

Components look right with system fonts, but they look the part with the pixel typeface. See Fonts to load it.

Without the namespaceCopy Anchor Link

Every item is also available at its own URL, with no configuration.

npx shadcn@latest add https://craftui.runqora.dev/r/craft-button.json

What gets writtenCopy Anchor Link

Your own components and theme aren't changed. components/ui/button.tsx and components/craft/button.tsx can live side by side.

import { Button } from "@/components/ui/button";
import { Button as CraftButton } from "@/components/craft/button";