Installation

Facade UI is a shadcn-compatible registry, not an npm component library. The CLI copies source into your project: there is no runtime package to upgrade, and every file is yours to edit.

1. Start from a shadcn project

Any project that has run shadcn init will do. If you are starting fresh:

terminal

npx create-next-app@latest my-site --typescript --tailwind --app
cd my-site
npx shadcn@latest init

Facade UI targets React 19, Tailwind v4 and server components. It needs no configuration beyond what shadcn init already writes.

2. Add the tokens

The token layer defines the --facade-* custom properties that sections rely on for display type, section rhythm and motion. It also defines the shadcn colour names, so in a project that already has a theme you can skip this step and Facade will inherit yours.

pnpmnpmyarnbun

pnpm dlx shadcn@latest add https://facadeui.dev/r/tokens.json

Then import it from your stylesheet, after Tailwind:

app/globals.css

@import "tailwindcss";
@import "../styles/facade-tokens.css";

3. Add a component

Every item is installed by URL. Dependencies — both npm packages and other registry items — are resolved for you.

pnpmnpmyarnbun

pnpm dlx shadcn@latest add https://facadeui.dev/r/section-header.json

4. Make images and links yours

Nothing in the registry imports from next/*, so sections work in any React setup. Where a section renders images or links from data, pass the component you want it to use:

app/page.tsx

import Image from "next/image"
import Link from "next/link"

import { LogoCloud } from "@/components/sections/logo-cloud"

export default function Page() {
  return <LogoCloud items={logos} image={Image} link={Link} />
}

They are component types, not render callbacks, which is what lets them cross the server component boundary unchanged.

Optional: motion

Motion is opt-in. Install the primitives, mount the provider once near your root, and use the -motion variant of any section. The static variant renders identically with JavaScript disabled.

pnpmnpmyarnbun

pnpm dlx shadcn@latest add https://facadeui.dev/r/motion-primitives.json

app/layout.tsx

import { FacadeMotionProvider } from "@/components/motion/facade-motion-provider"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <FacadeMotionProvider>{children}</FacadeMotionProvider>
      </body>
    </html>
  )
}