Example: Theme SDK Section

import { defineMessages, defineSection, formatPrice, t, useThemeTokens } from '@commercit/theme-sdk'
import {
  Badge,
  Button,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  Container,
  SectionShell,
  Stack,
} from '@commercit/theme-sdk/ui'

const copy = defineMessages('editorial', {
  badge: 'Theme SDK',
  heading: 'Designed inside the theme workspace',
  body: 'Orders over {threshold} unlock editorial shipping messaging.',
  cta: 'Explore',
})

export default defineSection({
  messageCatalog: Object.values(copy),
  component: function EditorialHighlight({ config }) {
    const tokens = useThemeTokens()
    const heading =
      typeof config.heading === 'string' ? config.heading : t(copy.heading)
    const ctaLabel = typeof config.cta_label === 'string' ? config.cta_label : t(copy.cta)

    return (
      <SectionShell>
        <Container>
          <Card style={{ borderColor: tokens.colors.border }}>
            <CardHeader>
              <Badge variant="secondary">{t(copy.badge)}</Badge>
              <CardTitle>{heading}</CardTitle>
            </CardHeader>
            <CardContent>
              <Stack gap="md">
                <p className="text-sm text-muted-foreground">
                  {t(copy.body, { threshold: formatPrice(50) })}
                </p>
                <div>
                  <Button>{ctaLabel}</Button>
                </div>
              </Stack>
            </CardContent>
          </Card>
        </Container>
      </SectionShell>
    )
  },
})

Matching section.meta.ts:

import {
  SECTION_CONTRACT_VERSION,
  defineStorefrontDataBlocks,
  defineStorefrontSectionManifest,
  type StorefrontSectionProps,
} from '@commercit/theme-sdk'

export const schema = []
export const defaultSettings = {}
export const defaultCss = ''
export const sectionContract = defineStorefrontSectionManifest({
  contractVersion: SECTION_CONTRACT_VERSION,
  slug: 'editorial-highlight',
  region: 'main',
  renderMode: 'static',
  capabilities: [],
  data: defineStorefrontDataBlocks([] as const),
})
export type EditorialHighlightProps = StorefrontSectionProps<typeof sectionContract>
export const sectionMeta = {
  displayName: 'Editorial Highlight',
  category: 'Marketing',
  surface: 'inline',
  preferredRegion: 'main',
}