Usage

Overview

The Thrive Design System exports a set of utility functions and helpers that streamline common development patterns. These utilities handle class merging, data transformation, and other recurring tasks.

cn() - Class Name Merger

The cn utility combines clsx and tailwind-merge to intelligently merge Tailwind CSS classes, resolving conflicts and removing duplicates.

import { cn } from '@thrivecart/ui';

// Basic usage
cn('px-4 py-2', 'px-6')
// Result: 'px-6 py-2' (px-6 overrides px-4)

// Conditional classes
cn('base-class', isActive && 'active-class', isDisabled && 'disabled-class')

// With arrays and objects
cn(['flex', 'items-center'], { 'bg-primary': isPrimary })

When to use:

• Merging component props className with internal styles
• Conditionally applying Tailwind classes
• Resolving conflicting utility classes

Data Table Utilities

Utilities for working with the DataTable component's server-side integration:

import {
  convertColumnsToFormData,
  convertOrderToFormData,
  createServerParams,
  type DataTableParams
} from '@thrivecart/ui';

useComposedRefs

A utility hook for composing multiple refs into a single callback ref:

import { useComposedRefs } from '@thrivecart/ui';

function MyComponent({ forwardedRef }) {
  const internalRef = useRef(null);
  const composedRef = useComposedRefs(internalRef, forwardedRef);

  return <div ref={composedRef} />;
}

Best Practices

• Always use cn() instead of string concatenation for Tailwind classes.
• Import utilities directly from @thrivecart/ui to benefit from tree-shaking.
• Use TypeScript generic types from the data table utilities for type-safe server params.

Installation

All utilities are included in the main package:

pnpm add @thrivecart/ui

import { cn } from '@thrivecart/ui';