Getting Started

Install a component

Each component ships as a standalone registry JSON file. Install with the shadcn CLI:

					npx shadcn@latest add https://ui.philippekam.dev/r/radiant-veil.json
				

Replace radiant-veil with any component slug. The installer resolves registryDependencies automatically, including kam-utils (the cn() helper) and kam-containment (viewport pause and motion queries).

Browse the full registry index:

					https://ui.philippekam.dev/r/registry.json
				

Manual install

If you prefer not to use the CLI:

1. Copy the component source from the Source tab on any component page
2. Save it to your project (e.g. components/ui/)
3. Install peer dependencies: npm install clsx tailwind-merge
4. Copy lib/utils.ts (cn() helper) and lib/containment.ts from the registry
5. For WebGL components, also install ogl

Usage

Every component is a React element that fills its container. Wrap it in a positioned parent:

import { RadiantVeil } from "@/components/ui/radiant-veil";

export function Hero() {
  return (
    <section className="relative min-h-[60vh] overflow-hidden">
      <RadiantVeil color="#7c3aed" from="top" />
      <div className="relative z-10 p-8">
        Your content here
      </div>
    </section>
  );
}

Each component page has a Usage tab with full examples and a Props reference.

Assets

Most components are fully procedural. Two require external assets that the registry cannot distribute: