Installation

Add components with the shadcn CLI, or copy the source by hand. Either way, the code ends up in your project.

Using the CLI

Set up shadcn/ui

Devsloka UI uses the shadcn registry. If your project doesn't have a components.json yet, run init. It configures Tailwind CSS, the @/ import alias, theme tokens and the cn helper.

npx shadcn@latest init

Add a component

Every component, background, hook and block has its own install command on its page. The CLI copies the source into your project and installs the npm packages and shadcn primitives it needs.

npx shadcn@latest add https://ui.devsloka.in/r/morphing-nav.json

Use it

Components land in components/ui and hooks in hooks. The code is yours: change anything.

import { MorphingNav } from "@/components/ui/morphing-nav";

const items = [
  { value: "overview", label: "Overview" },
  { value: "activity", label: "Activity" },
  { value: "settings", label: "Settings" },
];

export default function Page() {
  return <MorphingNav items={items} defaultValue="overview" aria-label="Sections" />;
}

Manual installation

Install shared dependencies

Most components animate with motion and use lucide-react icons. Each page lists any extra packages under Manual.

npm install motion lucide-react

Add the cn helper

Create lib/utils.ts if you don't have it. It needs clsx and tailwind-merge.

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Copy the source

Open a component's Code tab, paste the file into components/ui, and add any shadcn primitives it imports (for example npx shadcn@latest add button).

Good to know

  • Built for React 19 and Tailwind CSS v4. Colors come from your shadcn theme tokens, so components follow your light and dark themes automatically.
  • A few components use next/image. When you pass remote images, allow their host in your Next.js config. Outside Next.js, swap it for a plain img.
  • Animations respect the visitor's reduced-motion setting, and canvas backgrounds pause when they scroll out of view.
// next.config.ts
const nextConfig = {
  images: {
    remotePatterns: [{ protocol: "https", hostname: "images.unsplash.com" }],
  },
};

export default nextConfig;

Ready? Browse the components.