Getting Started

Installation

Install @dr-max/ui and load the design tokens.

Install the package

pnpm add @dr-max/ui

The package is published to the Dr.Max Azure Artifacts feed — make sure your project's .npmrc points the @drmax scope at the feed and you are authenticated.

Authenticate to Azure Artifacts

Dependencies prefixed with @drmax/ resolve through the Azure Artifacts feed — your project's .npmrc should point the scope at it:

.npmrc

@drmax:registry=https://pkgs.dev.azure.com/drmaxglobal/platform-team/_packaging/drmax-platform/npm/registry/
always-auth=true

Then set up authorization once per machine:

Generate a Personal Access Token with Packaging read & write scopes.

~/.npmrc

; begin auth token
//pkgs.dev.azure.com/drmaxglobal/platform-team/_packaging/drmax-platform/npm/registry/:username=drmaxglobal
//pkgs.dev.azure.com/drmaxglobal/platform-team/_packaging/drmax-platform/npm/registry/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
//pkgs.dev.azure.com/drmaxglobal/platform-team/_packaging/drmax-platform/npm/registry/:email=npm requires email to be set but doesn't use the value
//pkgs.dev.azure.com/drmaxglobal/platform-team/_packaging/drmax-platform/npm/:username=drmaxglobal
//pkgs.dev.azure.com/drmaxglobal/platform-team/_packaging/drmax-platform/npm/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
//pkgs.dev.azure.com/drmaxglobal/platform-team/_packaging/drmax-platform/npm/:email=npm requires email to be set but doesn't use the value
; end auth token

Copy the snippet into your user-level .npmrc file (in your home directory). Avoid modifying the .npmrc file in the project! Then install dependencies:

pnpm i

Install vsts-npm-auth globally if you don't have it:

npm install -g vsts-npm-auth

Run it to get an Azure Artifacts token added to your user-level .npmrc file (in the C:\Users\<user>\ directory). Avoid modifying the .npmrc file in the project!

vsts-npm-auth -config path-to-your\.npmrc

You don't need to do this every time — pnpm fails with 401 Unauthorized when you need to run it again. Then install dependencies:

pnpm i

Having issues? The manual approach on the macOS tab works on Windows too.

The whole process is described in more detail in the official Azure DevOps documentation and on the feed's connect page.

Import design tokens

Import the design tokens once in your app shell:

main.css

@import "@dr-max/ui/theme.css";

Components assume a standard box-sizing: border-box reset, which any preflight/normalize provides.

Use components

Import components from their subpaths — each entry carries its own precompiled CSS, so there is nothing else to set up:

App.vue

<script setup lang="ts">
import { Button } from "@dr-max/ui/button";
import { Heading } from "@dr-max/ui/heading";
</script>

<template>
  <Heading as="h1" variant="display-lg">Vitamins</Heading>
  <Button variant="primary-green">Add to cart</Button>
</template>

Apps with Tailwind CSS 4

Keep your app's Tailwind imports and add the theme — do not scan the package source and do not import component styles manually:

main.css

@import "tailwindcss";
@import "@dr-max/ui/theme.css";

Aggregate fallback

Prefer the component subpaths above. For apps that want one global bundle instead, the root entry and aggregate stylesheet remain available:

import { Button, Heading, Icon, Spinner, Text } from "@dr-max/ui";

@import "@dr-max/ui/style.css";

Don't combine @dr-max/ui/style.css with component subpath imports — the component CSS would load twice.