@crossplatformai/ui

Shared UI components and token contracts for CrossPlatform.ai starter kits.

Overview

@crossplatformai/ui is the durable shared UI foundation for CrossPlatform.ai starter kits. It provides presentation primitives, page defaults, markdown rendering, and neutral token contracts that apps can compose without adopting product-specific branding or behavior.

This package provides:

• React Native Web-compatible container and page primitives
• responsive page layout class contracts
• markdown rendering components for product documentation surfaces
• neutral light and dark token contracts for colors, typography, radius, and spacing

Package Boundary

This package is presentation-only. It owns shared UI primitives and defaults, but it does not own business logic, routing, auth, API access, storage, product-specific branding, or app-specific behavior.

Consumers should compose these primitives inside their own routes, screens, data flows, and product shells.

Install

pnpm add @crossplatformai/ui

Import Paths

• @crossplatformai/ui - primary exports
• @crossplatformai/ui/container - container primitives
• @crossplatformai/ui/page - page layout primitives and class contracts
• @crossplatformai/ui/markdown - markdown document rendering helpers
• @crossplatformai/ui/tokens - token contracts and neutral token defaults

Usage

Page Primitives

import {
  PageBody,
  PageFrame,
  PageHeading,
  PageLead,
  PageLeadText,
  PageSingleColumn,
} from '@crossplatformai/ui/page';

export function SettingsPage() {
  return (
    <PageFrame>
      <PageLead>
        <PageHeading>Settings</PageHeading>
        <PageLeadText>Manage workspace preferences and defaults.</PageLeadText>
      </PageLead>

      <PageBody>
        <PageSingleColumn>{/* app-owned form or content */}</PageSingleColumn>
      </PageBody>
    </PageFrame>
  );
}

Markdown

import { MarkdownDocument } from '@crossplatformai/ui/markdown';

export function ReleaseNotes({ content }: { content: string }) {
  return <MarkdownDocument content={content} skipFirstHeading />;
}

Tokens

import { neutralTokens, UI_FONT_VARIABLES } from '@crossplatformai/ui/tokens';

export const theme = {
  color: neutralTokens.light.color,
  fontVariables: UI_FONT_VARIABLES,
};

Styling

Components use React Native Web-compatible primitives with className utility classes. When consuming this package as source, apps must include this package's source path in Tailwind or Uniwind source discovery so utility classes are detected.

Publishing Model

This is a source-exported, ESM-only package with no build step. It publishes TypeScript source directly from src and releases through:

pnpm release

Do not add a build, prepack, dist, or CommonJS export path solely for publishing.

License

See LICENSE.