Skip to content

How to register a component

This guide shows you how to connect a component in your application to an experience in the dashboard.

Steps

Wrap your component with the adapter for your framework.
Pass it in the components object of createClient().
Use the same key as the component name of the experience.

import { createClient } from 'picked'
import { adaptReactComponent } from '@picked/react'
import { MyWidget } from './MyWidget'
 
const picked = createClient({
  projectId: 'your-project-id',
  components: {
    MyWidget: adaptReactComponent(MyWidget),
  },
})

import { createClient } from 'picked'
import { adaptSvelteComponent } from '@picked/svelte'
import MyWidget from './MyWidget.svelte'
 
const picked = createClient({
  projectId: 'your-project-id',
  components: {
    MyWidget: adaptSvelteComponent(MyWidget),
  },
})

SDK experiences — the experience shape.
How to install the SDK.