Showcase logo

Getting started

Install the Showcase design system in your own project. The installation flow uses shadcn/ui — if you've used it before, you'll feel right at home.

Make sure you have the following tools installed before proceeding.

Run the shadcn/ui initialization command in your project's root folder.

pnpm dlx shadcn@latest init

During initialization, choose a base color when prompted. The CLI will then:

  • Automatically detect your Vite setup and Tailwind configuration.
  • Create a components.json configuration file.
  • Update your CSS with the necessary CSS variables.
  • Create src/lib/utils.js with utility functions.

You can now start adding the Showcase components to your project.

pnpm dlx shadcn@latest add https://registry.sitecoreai.dev/r/button.json

Update your src/App.jsx to test the installation. Components are imported with the @/ alias.

import { Button } from "@/components/registry/primitives/button"

export default function MyComponent() {
  return (
    <div>
      <Button variant="default">Primary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </div>
  )
}

Start the development server.

pnpm dev

Your application is now running with functional Showcase components.