Skip to content
Harness Design System Harness Design System Harness Design System

Installation

The Harness Canary UI library provides a comprehensive set of components, hooks, and utilities to build consistent UIs that match the Harness design system.

Terminal window
npm install @harnessio/ui

Peer Dependencies

The library requires the following peer dependencies:

{
  "react": ">=17",
  "react-router-dom": ">=5"
}

Make sure to install these dependencies if they are not already in your project.

Setting Up Tailwind CSS

Harness Canary UI is built with Tailwind CSS. You’ll need to configure your tailwind.config.js to include the UI library’s configuration:

Importing Styles

Import the UI library’s styles in your main CSS file or entry point:

// In your entry file (e.g., main.jsx, App.jsx, etc.)
import "@harnessio/ui/styles.css";

Usage

The library provides multiple entry points for different types of exports:

// Import components
import { Button, Text, Badge } from '@harnessio/ui/components';


// Import hooks
import { useMediaQuery, useDisclosure } from '@harnessio/ui/hooks';


// Import utilities
import { cn, formatDate } from '@harnessio/ui/utils';


// Import views (pre-built layouts and complex components)
import { DataTable, PageLayout } from '@harnessio/ui/views';


// Import types
import type { ButtonProps, TextVariants } from '@harnessio/ui/types';

Additional Resources

Markdown Styles

If you’re using the Markdown components, import the specialized styles:

import "@harnessio/ui/markdown-preview-styles.css";

Verify Installation

Create a simple component to verify your installation is working correctly:

import { Button, Text } from "@harnessio/ui/components";


function TestComponent() {
  return (
    <div className="p-4 space-y-4">
      <Text variant="heading-section">Installation Successful!</Text>
      <Button>Click Me</Button>
    </div>
  );
}

Troubleshooting

Missing Styles

If components appear unstyled, check that:

  1. You’ve imported the @harnessio/ui/styles.css file
  2. Your Tailwind configuration includes the UI library’s preset

  3. The content paths in your Tailwind config include the UI library components

Type Errors

Ensure you’re using compatible TypeScript versions and that your tsconfig.json is set up to handle the library’s types.

Version Compatibility

The current version of @harnessio/ui is designed to work with:

  • React 17 or higher
  • react-router-dom 5 or higher
  • Tailwind CSS 3.x

If you’re using earlier versions, you may encounter compatibility issues.