# SlotContent

Learn how to type slot content in your JavaScript application.

This type resolves the content type for a versioned [Slot](/explanation/slot) ID.

## Signature

This type has the following signature:

```ts
type SlotContent<I extends VersionedSlotId>
```

## Usage

Pass a versioned slot ID like `'home-hero@1'` to get the corresponding content type:

```tsx
import type {SlotContent} from '@croct/plug';

type HeroContent = SlotContent<'home-hero@1'>;

export function HomeHero(props: HeroContent) {
return <h1>{props.title}</h1>;
}
```

When using [CLI-generated types](/reference/cli/type-generation), the type parameter is constrained to known slot IDs, providing autocompletion and type safety.

## Type narrowing

When a slot's content is a [union](/reference/content/schema/types/union) of multiple components, `SlotContent` resolves to a discriminated union. Each variant includes a `_type` property set to the component ID, which you can use to narrow the type:

```tsx
import type {SlotContent} from '@croct/plug';

type HeroContent = SlotContent<'home-hero@1'>;
// Resolves to:
// | {_type: 'text-hero', title: string, subtitle: string}
// | {_type: 'image-hero', title: string, image: string}

export function HomeHero(props: HeroContent) {
switch (props._type) {
  case 'text-hero':
    // props is narrowed to the text-hero component type
    return <h1>{props.subtitle}</h1>;
  case 'image-hero':
    // props is narrowed to the image-hero component type
    return <img src={props.image} alt={props.title} />;
}
}
```

If the slot maps to a single component, the resolved type is a plain object without the `_type` property.