# Using named slots in Custom Components

**URL:** <https://forum.builder.io/t/using-named-slots-in-custom-components/3956>\
**Category:** Visual Editor Help\
**Tags:** custom-components\
**Created:** [July 27, 2023, 9:49am UTC](https://forum.builder.io/t/using-named-slots-in-custom-components/3956 "2023-07-27T09:49:37Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![marinelbg](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/marinelbg/32/2742_2.png) [@marinelbg](https://forum.builder.io/u/marinelbg)\
**Post date:** [July 27, 2023, 9:49am UTC](https://forum.builder.io/t/using-named-slots-in-custom-components/3956/1 "2023-07-27T09:49:37Z")

</div>

Hi,

Is it possible to use named slots in the custom components in the visual editor ?

Let’s say for example, i have a component like so (in Vue):

```auto
<Section>
   <slot name="header"> <!-- named slot-->
   <InnerSection>
      <slot></slot> <!-- default slot -->
   </InnerSection>
   <slot name="footer"> <!-- named slot-->
</Section>

```

So that would mean that a custom component might have multiple drop zones.  
Is it possible ? 🤔

---

<div class="post-metadata">

**Author:** ![faz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/faz/32/3375_2.png) [@faz](https://forum.builder.io/u/faz)\
**Post date:** [February 7, 2024, 5:25pm UTC](https://forum.builder.io/t/using-named-slots-in-custom-components/3956/2 "2024-02-07T17:25:25Z")

</div>

+1 for this. Otherwise i think with vue, you can really only have one child. Hopefully i’m wrong!

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [February 9, 2024, 4:26pm UTC](https://forum.builder.io/t/using-named-slots-in-custom-components/3956/3 "2024-02-09T16:26:14Z")

</div>

Hello @faz, @marinelbg,

Named slots are not yet supported, but there are plans to implement support for named slots in the coming months.

---

<div class="post-metadata">

**Author:** ![ajatzoro](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/ajatzoro/32/3762_2.png) [@ajatzoro](https://forum.builder.io/u/ajatzoro)\
**Post date:** [May 29, 2024, 6:33pm UTC](https://forum.builder.io/t/using-named-slots-in-custom-components/3956/4 "2024-05-29T18:33:41Z")

</div>

What are some alternatives until you’re done with named slots implementation?

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [September 11, 2024, 10:02am UTC](https://forum.builder.io/t/using-named-slots-in-custom-components/3956/5 "2024-09-11T10:02:32Z")

</div>

Hi @ajatzoro,

Great news! [Builder.io](http://Builder.io) now supports named slots, so you should be able to use them within your custom components.

### Example: Using Named Slots in [Builder.io](http://Builder.io)

In [Builder.io](http://Builder.io), you can use the `Slot` component to define named slots within your custom Svelte components. Here’s an example of how you can achieve this:

**Custom Component (`Custom.svelte`):**

```svelte
<script>
    export let name;
    export let address;
    export let email;
</script>

<article class="contact-card">
	<h2>
		<slot name="name">
			<span>{name || "Unknown name"}</span>
		</slot>
	</h2>

	<div class="address">
		<slot name="address">
			<span>{address || "Unknown address"}</span>
		</slot>
	</div>

	<div class="email">
		<slot name="email">
			<span>{email || "Unknown email"}</span>
		</slot>
	</div>
</article>

<style>
	.contact-card {
		width: 300px;
		border-radius: 2px;
		box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
		padding: 1em;
	}

	h2 {
		padding: 0 0 0.2em 0;
		margin: 0 0 1em 0;
		border-bottom: 1px solid #ff3e00;
	}

	.address,
	.email {
		padding: 0 0 0 1.5em;
		background: 0 0 no-repeat;
		background-size: 20px 20px;
		margin: 0 0 0.5em 0;
		line-height: 1.2;
	}

	.address {
		background-image: url(/tutorial/icons/map-marker.svg);
	}

	.email {
		background-image: url(/tutorial/icons/email.svg);
	}
</style>

```

**Usage in [Builder.io](http://Builder.io) (`src/routes/[...catchall]/+page.svelte`):**

```svelte
<script>
    import { isPreviewing, Content } from "@builder.io/sdk-svelte";
    import ContactCard from "$lib/components/custom.svelte";
  
    export let data;
  
    const canShowContent = data.content || isPreviewing();
</script>
  
<main>
    <h1>Welcome to SvelteKit</h1>
    <h2>Your Builder Content:</h2>
    {#if canShowContent}
      <div>Page Title: {data.content?.data?.title || "Unpublished"}</div>
      <Content
        model="page"
        content={data.content}
        apiKey="ad30f9a246614faaa6a03374f83554c9"
        customComponents={[{
            name: "ContactCard",
            component: ContactCard,
            inputs: [
              { name: "name", type: "text" },
              { name: "address", type: "text" },
              { name: "email", type: "email" }
            ]
        }]}
      />
    {:else}
      Content Not Found
    {/if}
</main>

```

By using the `slot` component with named slots, you can define default content and override it when needed. This setup should help you manage dynamic content in your [Builder.io](http://Builder.io) projects more effectively.

I hope this helps! If you have any questions or need further assistance, feel free to reach out.

Thanks,