@proveanything/smartlinks-ui

Reusable React components for SmartLinks microapps.

Installation

npm install @proveanything/smartlinks-ui

Peer Dependencies

This package requires the following peer dependencies in your app:

npm install react react-dom @proveanything/smartlinks

Setup

Import the pre-compiled styles in your app's entry point:

import '@proveanything/smartlinks-ui/styles.css';
// — OR, if you import the main barrel, CSS is included automatically:
import { AssetPicker } from '@proveanything/smartlinks-ui';

This provides all the Tailwind utility classes used by the components. Your app still needs to define the CSS variables (e.g., --primary, --border) — these come from your own design system (shadcn, custom theme, etc.).

Note: If you use sub-path imports (e.g., @proveanything/smartlinks-ui/asset-picker), you must also import the styles separately since sub-path entry points don't include the CSS.

Components

Asset Picker

Browse, upload, and select media assets scoped to a collection, product, or proof.

import { AssetPicker } from '@proveanything/smartlinks-ui/asset-picker';

<AssetPicker
  scope={{ type: 'collection', collectionId: 'abc123' }}
  mode="dialog"
  allowUpload
  onSelect={(asset) => console.log('Selected:', asset)}
  trigger={<button>Choose Image</button>}
/>

Conditions Editor

Visual editor for building condition rules with AND/OR logic groups.

import { ConditionsEditor } from '@proveanything/smartlinks-ui/conditions-editor';

<ConditionsEditor
  value={conditionGroup}
  onChange={setConditionGroup}
  fields={[
    { key: 'status', label: 'Status', type: 'enum', options: [{ label: 'Active', value: 'active' }] },
    { key: 'age', label: 'Age', type: 'number' },
  ]}
/>

Icon Picker

Searchable Font Awesome icon picker with lazy-loaded icon index for tree shaking.

import { IconPicker } from '@proveanything/smartlinks-ui/icon-picker';

<IconPicker
  mode="dialog"
  value="fa-solid fa-heart"
  onSelect={(icon) => console.log(icon.name)}
  trigger={<button>Pick Icon</button>}
/>

Font Picker

Searchable font picker with Google Fonts catalog and support for custom uploaded fonts. Returns full loading metadata (CSS URLs, @font-face blocks, cssFontFamily strings) so the consumer knows exactly how to load the selected font.

import { FontPicker } from '@proveanything/smartlinks-ui/font-picker';

<FontPicker
  mode="dialog"
  value="Inter"
  showPreview
  onSelect={(font) => {
    console.log(font.family);        // "Inter"
    console.log(font.cssFontFamily); // "'Inter', ui-sans-serif, system-ui, sans-serif"
    console.log(font.loadSnippet);   // <link href="..." rel="stylesheet">
  }}
  trigger={<button>Pick Font</button>}
/>

{/* With custom uploaded fonts from SmartLinks */}
<FontPicker
  mode="dialog"
  showCustomFonts
  scope={{ collectionId: 'abc123' }}
  admin
  onSelect={(font) => console.log(font)}
/>

Prerequisites

All components assume @proveanything/smartlinks is already initialized in your app via SL.initializeApi(). Components that interact with the SmartLinks API (Asset Picker) will use the global SDK import directly.

Tree Shaking

Each component is a separate entry point. If you only import AssetPicker, the Icon Picker's Font Awesome index won't be bundled.

// ✅ Only loads AssetPicker code
import { AssetPicker } from '@proveanything/smartlinks-ui/asset-picker';

// ✅ Also works — barrel import, bundler tree-shakes unused
import { AssetPicker } from '@proveanything/smartlinks-ui';

Development

cd packages/smartlinks-ui
npm install
npm run build    # Build with tsup
npm run dev      # Watch mode

License

MIT