Healthspan - Marketing UI

This is the marketing UI library for Healthspan Marketing Website v3.

Installation

npm install @zenpatient-org/healthspan-marketing-ui

Development

Start the storybook:

npm run storybook

When you create a new public component, you need to add it to the components section of the vite.config.ts file. Also, you need to add the component to the exports section of the package.json file.

⚠️ Be sure to use 'use client' in the component file if it is a client component.

Avoid using barrel exports. Instead, import the components directly from the src directory.

We use eslint and prettier, please ensure you have these lines in your IDE settings:

  "eslint.useFlatConfig": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,

Importing the components and modules

import { Button } from '@zenpatient-org/healthspan-marketing-ui/Button';
import { CallbackModule } from '@zenpatient-org/healthspan-marketing-ui/CallbackModule';

To build for publishing:

npm run build

Publishing:

npm login
npm version patch
npm publish

Global Design Tokens

Design tokens (colors, spacing, etc.) are injected via CSS variables globally. You can import the core styles in two ways:

Option 1: Import core styles directly

import '@zenpatient-org/healthspan-marketing-ui/styles/core';

The core styles include:

• CSS reset
• Color variables (midnight, navy, copper, orchre, indigo, sage, solar, ivory, etc.)
• Typography variables (font sizes, line heights, letter spacing, font weights)
• Border radius and width variables
• Spacing variables
• Common utility styles