Docs / Get Started / Installation

Installation

Components install with the shadcn CLI. Pick whichever of the three routes below suits your project — they all put the same source in your codebase.

Before you start

The CLI reads your project before it reaches any registry, so two files have to exist or it stops with Invalid configuration:

• components.json — run npx shadcn@latest init -d if you do not have one
• jsconfig.json or tsconfig.json declaring the @/* path alias

1. Straight from GitHub

Nothing to configure. Works because the registry manifest sits at the repository root.

npx shadcn@latest add prathamhpatel/morphiq/prism-glass
npx shadcn@latest add prathamhpatel/morphiq/dock

2. Register the namespace

Do this once and every component is a short name from then on. The CLI writes the entry into your components.json for you.

npx shadcn@latest registry add "@morphiq=https://morphiq.prathampatel.design/r/{name}.json"

npx shadcn@latest add @morphiq/prism-glass
npx shadcn@latest add @morphiq/dock

Or add it by hand:

{
  "registries": {
    "@morphiq": "https://morphiq.prathampatel.design/r/{name}.json"
  }
}

3. By URL

No config, no namespace.

npx shadcn@latest add https://morphiq.prathampatel.design/r/prism-glass.json

Look before you install

npx shadcn@latest list @morphiq
npx shadcn@latest view @morphiq/prism-glass

What lands in your project

Each component arrives as a self-contained folder under whatever your components.json alias points at. Nothing else in your project is touched, and nothing is left pointing back at us.

src/
└─ components/
   ├─ prism-glass/
   │  ├─ index.js          the import target
   │  ├─ PrismGlass.jsx    the component
   │  ├─ shader.js         GLSL: refraction, dispersion, frost, rim light
   │  └─ sdf.js            shape masks
   └─ ascii-field/
      ├─ index.js
      ├─ AsciiField.jsx
      └─ AsciiField.css

Keeping each component in its own folder is what lets its files import each other by name. It also keeps generic names like shader.js out of your components root, where they would collide with your own.

Check it worked

Build once after installing. A component that renders in isolation can still be missing a package, and the CLI reports success either way — it installs what a registry declares, so an under-declared entry produces files that will not compile.

If a build fails on a missing package straight after installing, that is our bug and not yours. Open an issue with the resolve error and we will fix the entry.

Using them

Each component installs into its own folder with an index, so the folder name alone is the import. Both of these resolve to the same file:

import PrismGlass from '@/components/prism-glass'   // from anywhere
import PrismGlass from './prism-glass'              // from a file beside it

The alias works wherever you import from. The relative form is shorter but depends on where your own file sits — it resolves when that file lives in the same components folder the CLI installed into.

import PrismGlass from '@/components/prism-glass'

<PrismGlass
  image={photo}
  shape="circle"
  mode="cursor"
  size={20}
  refraction={100}
  depth={60}
  dispersion={60}
/>

import AsciiField from '@/components/ascii-field'

<AsciiField
  radius={51}
  speed={16}
  opacity={0.23}
  spacing={2.3}
  color="#ffffff"
  background="#071228"
/>

Prism Glass pulls in three, @react-three/fiber, @react-three/drei and maath; ASCII Field pulls in gsap and @gsap/react. The CLI installs whatever a component needs when you add it.

Dialling one in

Every prop on these pages is live. Open a component in the sidebar, set it up under Customize until it looks the way you want, then copy the snippet under Your settings — it carries every value, so what you paste is exactly what you saw.