Welcome to ZBH Shadcn Registry

Select a component from the sidebar to view its preview and examples.

Installation

Add dependencies

Add the following dependencies to your project

npm install @radix-ui/react-slot class-variance-authority clsx tailwind-merge lucide-react tw-animate-css

Configure path aliases

Configure the path aliases in your tsconfig.json file.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Configure styles

Install UHH Style and link it into your css Make sure you then import the components/uhh-theme.css instead of the default css

npx shadcn@latest add https://ui.zbh.uni-hamburg.de/r/uhh-theme.json

Create a components.json file

Create a components.json file in the root of your project.

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/styles/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}

Loading preview...