Installation
How to install dependencies and add VisualSandbox UI components to your project.
Note: VisualSandbox UI uses the same installation process as shadcn/ui. Components are added directly to your codebase via the shadcn CLI — source lives in your repo, you own it.
Initialize shadcn/ui
Run the init command to create a new project with shadcn/ui or set up an existing one:
npx shadcn@latest initConfigure the registry
Add the @visualsandbox-ui registry to your components.json once:
{
"registries": {
"@visualsandbox-ui": "https://ui.visualsandbox.com/r/{name}.json"
}
}Add components
Run the add command to install any component by short name:
npx shadcn@latest add @visualsandbox-ui/progressive-blurPrefer zero setup? The full registry URL works without the registry entry:
npx shadcn@latest add https://ui.visualsandbox.com/r/progressive-blur.jsonImport components
import { ProgressiveBlur } from "@/components/visualsandbox-ui/progressive-blur";
export default function Page() {
return (
<div className="relative h-64 overflow-hidden">
<ProgressiveBlur side="top" />
<div className="h-full overflow-y-auto">{/* content */}</div>
</div>
);
}