Figma Slots in Shadcn/Studio

shadcn/studio uses Figma Slots across components, blocks, and templates to make the UI kit more flexible without breaking the design system structure.

Instead of detaching components just to change inner content, you can use Slots to add, replace, or rearrange content inside supported components while keeping the instance connected to the main library.

Why Slots Matter in shadcn/studio?

Slots help you customise components faster while keeping your designs clean, consistent, and easier to maintain.

With Slots in shadcn/studio, you can:

• Customise without detaching: Replace inner content like headers, footers, icons, actions, or menu items without breaking the component connection.
• Keep components update-friendly: Since the component stays connected to the main library, future updates can still flow into your design.
• Reduce unnecessary variants: Instead of creating many variants for every content combination, Slots give you flexible areas where you can place your own content.
• Improve design consistency: The main layout, spacing, structure, and styling remain controlled by the design system while the content stays flexible.
• Make handoff easier: Slots closely match how modern components work in code, making it easier for developers to understand which content belongs inside each component area.

How a Slot is Defined Inside shadcn/studio Component?#

When you select or hover over a component that has Slots, a pink border will appear around the Slot area. That pink border is your signal that this area accepts content.

Identifying Slots Inside a Component

1. Drag any kit component onto your canvas
2. Select it - hover over its inner areas to look for a pink border. That border marks a Slot
3. Click the Assets tab in the left panel and look at the Properties section - Slot properties are listed alongside other component properties
4. Slot names describe their purpose - for example Header Slot, Content Slot, or Footer Slot

Combining Multiple Slots with Card Example#

Components like the Card use multiple Slots working together. The Content area is a Slot so you can drop anything inside it without detaching the card. This means you can:

• Keep the Header as your title and description
• Replace the Content Slot with a form, an accordion, or any other component
• Swap the Footer action with different button combinations or links

The Card stays as one connected instance throughout - nothing gets detached, and any structural updates from the kit flow through automatically.

Replacing a Block Section's Content Using a Slot#

1. Select the component on the canvas
2. Hover over the Slot area until the pink border appears
3. Click Add instances - a popup will appear showing available components
4. Select the component you want to place inside the Slot
5. The content drops in and the component adjusts around it - no detaching needed

You can also drag any layer directly into the Slot area, or duplicate existing content already inside it.