Skip to main content
The defineComponent function is the primary method for exporting complete component definitions. It packages all aspects of a component into a single callable function that can be used throughout the runtime. 
export default defineComponent({
  body,
  metadata,
  properties,
  previews,
  thumbnail
})

​
Parameters

The function accepts a single object with the following properties:
  • body (required) - The component’s body function (props, children) => Component
  • metadata (optional) - Component metadata (title, description, category, etc.) - can be an object or function
  • properties (optional) - Property definitions for configurable inputs - can be an object or function
  • previews (optional) - Array of preview component instances for documentation - can be an array or function
  • thumbnail (optional) - Thumbnail representation (SVG string or function)

​
Returns

Returns a callable component function with all metadata, properties, previews, and thumbnail attached.

​
Component Definition Structure

​
Body Function

The body function is the main rendering function that returns the component’s UI structure: 
const body = (props, children) => {
  return VStack([
    Text(props.title),
    ...children
  ])
}

​
Metadata

Metadata provides descriptive information about the component: 
const metadata = {
  title: 'My Button',
  description: 'A customizable button component',
  category: 'Controls',
  public: true
}

​
Properties

Properties define the configurable inputs that a component accepts: 
const properties = {
  label: {
    type: 'string',
    defaultValue: 'Click me',
    title: 'Button Label',
    description: 'The text displayed on the button'
  },
  color: {
    type: 'enum',
    options: ['blue', 'red', 'green'],
    defaultValue: 'blue'
  }
}

​
Previews

Previews are pre-configured instances showcasing different states or configurations: 
const previews = [
  Button("Primary", () => {}),
  Button("Danger", () => {}),
  Button("Success", () => {})
]

​
Thumbnail

A thumbnail is a visual representation for galleries and catalogs: 
// As SVG string
const thumbnail = '<svg>...</svg>'

// As function
const thumbnail = (props, children) => {
  return Rectangle()
    .fill(Color('blue'))
    .frame({ width: 100, height: 100 })
}

​
Complete Example

const body = (props, children) => {
  return VStack([
    Text(props.title)
      .font(18)
      .fontWeight('bold'),
    Text(props.description)
      .foregroundStyle(Color('gray')),
    ...children
  ])
    .padding(16)
    .background(Color(props.backgroundColor || 'white'))
    .cornerRadius(8)
    .shadow({ radius: 2 })
}

const metadata = {
  title: 'Info Card',
  description: 'A card component for displaying information',
  category: 'Layout',
  public: true
}

const properties = {
  title: {
    type: 'string',
    defaultValue: 'Card Title',
    title: 'Title',
    description: 'The main heading of the card'
  },
  description: {
    type: 'string',
    defaultValue: 'Card description',
    title: 'Description'
  },
  backgroundColor: {
    type: 'string',
    defaultValue: 'white',
    title: 'Background Color'
  }
}

const previews = [
  InfoCard({ 
    title: 'Welcome', 
    description: 'This is a preview' 
  }),
  InfoCard({ 
    title: 'Alert', 
    description: 'Important message',
    backgroundColor: 'yellow' 
  })
]

exports.default = defineComponent({
  body,
  metadata,
  properties,
  previews
})

​
Usage in Other Components

Once defined and exported, the component can be used like any other component: 
const body = (props, children) => {
  return VStack([
    InfoCard({ 
      title: 'Hello', 
      description: 'World' 
    }),
    InfoCard({ 
      title: 'Custom', 
      backgroundColor: 'lightblue' 
    })
  ])
}

​
Notes

  • defineComponent is the recommended way to export components (replaces the older makeComponent pattern)
  • All properties except body are optional
  • Metadata and properties can be functions that return the respective objects
  • Previews are used for documentation, galleries, and visual testing
  • Thumbnails are used in component libraries and content browsers
  • The component automatically gets wrapped in tracking directives for debugging