Installation

Before installing dr-ui, ensure you have the following dependencies:

• React: Version 18 or higher
• Node.js: Version 18 or higher
• A shadcn-based project setup (see shadcn/ui documentation for initial setup)

Step 1: Configure Registry

Add the dr-ui registry to your components.json file. If you don't have a components.json file yet, you'll need to initialize shadcn first. Check the shadcn documentation for creating the components.json file.

Add the dr-ui registry path to your components.json:

{
  "registries": {
    "@dr-ui": "https://dr-ui.datarobot.com/r/{name}.json"
  }
}

Step 2: Install Theme Preset

Install the dr-ui theme preset to get all the necessary CSS variables and styling:

npx shadcn@latest add @dr-ui/theme

After installation, import the preset CSS in your global CSS file (typically app/globals.css or src/app/globals.css):

@import '@/components/preset.css';

Adjust the import path based on your project structure. The preset includes all the theme variables, colors, and styling needed for dr-ui components.