Zhin Component Rendering Skill

Use this skill when developers need to create reusable message components with Zhin's component system.

Define and Register a Component

import { defineComponent, usePlugin } from '@zhin.js/core'

const plugin = usePlugin()

const StatusCard = defineComponent((props: { title: string, value: string }, context) => {
  return `<text>${props.title}: ${props.value}</text>`
}, 'status-card')

plugin.addComponent(StatusCard)

Template Usage