# Definers (/themes/sdk/reference/elements/definers)

```ts
import { … } from '@poltura/theme-sdk/elements';
```

## `defineSection` [#definesection]

Declares a section: its type key, inspector settings, children and the component that draws it.

```ts
defineSection<S extends SettingsSchema = Record<never, never>>(definition: SectionDefinition<S>): SectionElement
```

**Parameters**

- `definition: SectionDefinition<S>`: Literal data plus `component`; the compiler reads everything but `component` statically.

**Returns:** The declared section; export it from a file under `src/sections`.

**Example**

```tsx
import { defineSection, field } from '@poltura/theme-sdk/elements';

export const story = defineSection({
  type: 'story',
  label: 'Story',
  description: 'A heading and a paragraph about the brand',
  settings: {
    heading: field.text({ label: 'Heading', default: 'Our story' }),
    body: field.textarea({ label: 'Text' }),
  },
  style: ['spacing', 'background'],
  component: ({ settings, attrs }) => (
    <section {...attrs}>
      <h2>{settings.heading}</h2>
      <p>{settings.body}</p>
    </section>
  ),
});
```

## `defineBlock` [#defineblock]

Declares a block that draws itself inside the frame the platform puts around each instance.

```ts
defineBlock<S extends SettingsSchema = Record<never, never>>(definition: BlockDefinition<S>): BlockElement
```

**Parameters**

- `definition: BlockDefinition<S>`: Literal data plus `component`; the compiler reads everything but `component` statically.

**Returns:** The declared block; export it from a file under `src/blocks` or `src/sections`.

**Example**

```tsx
import { EditableText, defineBlock, field } from '@poltura/theme-sdk/elements';

export const promoCard = defineBlock({
  type: 'promo-card',
  label: 'Promo card',
  settings: { title: field.text({ label: 'Title', default: 'Summer sale' }) },
  style: ['spacing', 'background', 'border'],
  component: () => <EditableText setting='title' as='h3' className='text-lg font-semibold' />,
});
```

## `defineThemeSettings` [#definethemesettings]

Declares the theme settings panel in `src/settings.ts`: its groups and their `field.*` settings, keyed by their path in the theme's values.

```ts
defineThemeSettings<const D extends ThemeSettingsDefinition>(definition: D): D
```

The platform generates `settings/schema.json` from it on every save, so it is read without running: every value is a literal, a `field.*` call, a field set or a `const` of those.

**Parameters**

- `definition: D`: The panel's groups, in order.

**Returns:** The definition; export it.

**Example**

```tsx
import { defineThemeSettings, field } from '@poltura/theme-sdk/elements';

export const settings = defineThemeSettings({
  groups: [
    {
      id: 'colors',
      label: 'Colors',
      settings: {
        'colors.primary': field.color({ label: 'Primary', default: '#1f3a8a', darkDefault: '#93b4ff' }),
      },
    },
  ],
});
```