npm install @thrivecart/uiyarn add @thrivecart/uipnpm add @thrivecart/uibun add @thrivecart/uiimport { InputShortcode } from '@thrivecart/ui';Input with a single shortcode group
<InputShortcode
value={value}
onChange={setValue}
shortcodes={[
{ id: 'contact', section: 'contact', text: 'Contact', menu: [
{ text: 'First Name', value: '{{first_name}}' },
{ text: 'Last Name', value: '{{last_name}}' },
{ text: 'Email', value: '{{email}}' },
]},
]}
/>Input with Contact, Order, Account, Affiliate, and Links shortcode groups
<InputShortcode
value={value}
onChange={setValue}
shortcodes={[
{ id: 'contact', section: 'contact', text: 'Contact', menu: [...] },
{ id: 'order', section: 'order', text: 'Order', menu: [...] },
{ id: 'account', section: 'account', text: 'Account', menu: [...] },
{ id: 'affiliate', section: 'affiliate', text: 'Affiliate', menu: [...] },
{ id: 'links', section: 'links', text: 'Links', menu: [...] },
]}
placeholder="Compose with merge fields..."
/>Input with only the emoji picker enabled, no shortcodes
<InputShortcode
value={value}
onChange={setValue}
enableEmoji
placeholder="Type and add emoji..."
/>Input with both shortcode insertion and emoji picker
<InputShortcode
value={value}
onChange={setValue}
shortcodes={shortcodes}
enableEmoji
placeholder="Hey {{first_name}}, your order is ready! 🎉"
/>Input with a descriptive placeholder
<InputShortcode
value={value}
onChange={setValue}
shortcodes={shortcodes}
placeholder="Enter email subject line..."
/>Shortcodes loaded on demand when the popover opens. Shows a spinner while fetching.
const loadShortcodes = async () => {
const response = await fetch('/api/shortcodes');
return await response.json();
};
<InputShortcode
value={value}
onChange={setValue}
onLoadShortcodes={loadShortcodes}
placeholder="Click the shortcode button to load from API..."
/>Disabled state with pre-filled value
<InputShortcode
value="Hello {{first_name}}"
onChange={setValue}
shortcodes={shortcodes}
disabled
/>Group shortcodes logically (Contact, Order, Account) for easy discovery.
Display a readable label for each shortcode, not just the raw merge field syntax.
Limit shortcode categories to keep the dropdown manageable.
Inform users what happens when a shortcode can't resolve (e.g., empty contact field).