Installation

magicui-solid components are distributed via the shadcn registry and can be installed using the shadcn CLI.

Prerequisites

• A SolidJS project with Tailwind CSS v4 configured
• Node.js 18+

Add the Registry

Add the @magicui-solid registry to your project’s components.json:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/app.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide",
  "registries": {
    "@magicui-solid": "https://axuj.github.io/magicui-solid/r/{name}.json"
  }
}

Or use the CLI to add the registry:

pnpm

pnpm dlx shadcn@latest registry add @magicui-solid=https://axuj.github.io/magicui-solid/r/{name}.json

bun

bunx shadcn@latest registry add @magicui-solid=https://axuj.github.io/magicui-solid/r/{name}.json

yarn

yarn dlx shadcn@latest registry add @magicui-solid=https://axuj.github.io/magicui-solid/r/{name}.json

npm

npx shadcn@latest registry add @magicui-solid=https://axuj.github.io/magicui-solid/r/{name}.json

Install a Component

SolidJS projects can’t use shadcn init (it’s designed for React). Instead, the base theme is distributed as a registry item (@magicui-solid/theme) and installed automatically as a dependency when you add any component:

pnpm

pnpm dlx shadcn@latest add @magicui-solid/terminal

bun

bunx shadcn@latest add @magicui-solid/terminal

yarn

yarn dlx shadcn@latest add @magicui-solid/terminal

npm

npx shadcn@latest add @magicui-solid/terminal

That’s it. The CLI installs the component, its dependencies, and automatically injects the entire theme into your app.css: all CSS variables (:root/.dark), Tailwind v4 color mappings (@theme inline), radius scale, and animation keyframes (e.g. animate-marquee). No manual configuration required.

Note: If your app.css already contains shadcn variables, the CLI keeps your existing values and only appends what’s missing.

Manual Installation

Alternatively, you can copy the component source directly from the GitHub repository.

You’ll also need to install the required dependencies and add the theme manually:

npm install @solid-primitives/intersection-observer clsx tailwind-merge

Copy the theme variables into your (see the [theme registry item):