Installation

We provides two installation methods for you to choose from.

Quick Installation with CLI

Use our CLI tool to quickly install / initialize Shadcn :

npx shadcn@latest init

Then , quickly install the required components using the CLI :

npx shadcn@latest add <component-name>

For example, install the button component:

npx shadcn@latest add http://display-ui.vercel.app/r/Button

CLI will automatically complete the installation and configuration process, without any additional steps.

Manual Installation

If you prefer to install manually, please follow the steps below:

npm install motion lucide-react

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Let's get started

Now that you've installed the core packages and the required components, you're ready to start building with Display UI !

import { Button } from "@/components/display-ui/Button"
 
export default function Home() {
  return <Button>Click me</Button>
}