Introduction

What the system covers #

CoreUX UI is the shared React library for the Data Spectrum brand system. Use it for marketing pages, social content, and data storytelling: meaningful statistics, chart and table presentations, framed content, and brand motifs.

The video-derived components are plain React ports and do not require Remotion. Some use fixed dimensions and inline styles; each reference explains its layout and validation requirements. This package does not supply a general application button, form, dialog, or navigation system.

Start with the component catalog to compare real examples, or read Using this reference for search, copying, and keyboard navigation.

Who can use it #

Browsing, previews, and copying are public. Internal teams and public readers share the same documentation; there is no sign-in to explore examples.

Installing the package requires read access to the private coreuxio/ui repository. It is not published to npm. Public visibility of this reference does not grant repository access or permission to redistribute its bundled brand fonts, which are restricted to CoreUX-owned projects.

Install CoreUX UI to configure an authorized app, then follow the quick start.

Utilities & types #

Visual components render UI. The public cn utility composes class strings; exported prop types describe contracts for TypeScript and have no rendered output. Tokens are reusable design values. These exports are reference material rather than extra visual component pages in the catalog.

cn(...inputs) accepts the strings, arrays, and conditional objects supported by clsx, then applies tailwind-merge to resolve recognized conflicting utilities. Later inputs win within a recognized utility group. In this example, the caller’s p-6 replaces the default p-4, producing 24 px padding at a 16 px root.

'use client';

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

function Surface({ highlighted = false, className }: { highlighted?: boolean; className?: string }) {
  return (
    <div className={cn('rounded-card p-4', highlighted && 'bg-ink-navy text-warm-ivory', className)}>
      <p className="font-sans font-semibold">A composed surface</p>
      <p className="mt-2 text-sm">Conditional color, with the caller choosing the padding.</p>
    </div>
  );
}

export default function ClassComposition() {
  return <Surface highlighted className="p-6" />;
}

Class composition does not generate CSS, provide semantics, or override inline styles. Tailwind still needs to scan your complete class names. Custom class names and brand-specific utility conflicts may need explicit handling; do not assume every pair of classes will be merged.

Import types with import type { StatBlockProps } from '@coreux/ui' when writing your own typed wrapper. Keep the client directive in value imports from this package at the documented revision; the installation guide explains the required Next.js boundary.

Verified against the cn implementation and public exports (repository access required).