Component composition in Nordcraft refers to combining components in various ways to create more complex interfaces. By using different composition techniques, developers can build flexible, maintainable, and reusable UI structures.

The primary composition patterns in Nordcraft include:

• Nesting components: Adding components inside other components
• Slots: Creating placeholders that can be filled with external content

This example shows two different ways to build a component:
Fixed nested structure:

• Has predefined internal structure with built-in elements
• Structure and content controlled by the card component itself
• Developers cannot modify the structure directly when using it

Slot-based assembly:

• Provides empty placeholder areas (slots)
• Users must manually add elements into slots
• Different instances can contain different elements

Nesting is the most basic form of component composition, where you add components inside other components:

1. 1

   Open a component in the editor
2. 2

   Add another component from the element catalog
3. 3

   Configure the nested component's attributes as needed

Benefits of nesting include:

• Breaking complex interfaces into manageable pieces
• Reusing functionality at different levels of your application
• Creating clear relationships between UI elements

When nesting components, consider the following:

• Responsibility boundaries: Each component should have a clear, focused responsibility
• Data flow: Parent components pass data down to child components through attributes or contexts. Child components send data up to parents through events or contexts
• Styling: Parent components can style the root element of nested components

As your application grows, you'll naturally develop deeper component hierarchies. While there's no strict limit to nesting depth, it's good practice to maintain clear boundaries of responsibility between components to ensure maintainability.

Slots are a powerful feature in Nordcraft that allow components to receive and display content provided when the component is used. They act as placeholders that can be filled with content passed into the component from the outside.

The slot element is a fundamental part of Nordcraft's component specification:

• Like many core concepts in Nordcraft, slots build upon native web standards
• Slots create areas in your component that can be filled with external content
• They allow for flexible, composable component architectures
• They help maintain component encapsulation while enabling customization

Slots are added to components like any other element using the element catalog:

1. 1

   Select where you want to add the slot in your component
2. 2

   Add a slot element from the element catalog
3. 3

   Optionally add a name attribute (without a name, the slot is called default)

Add a slot element

Live

Slots in Nordcraft work with a naming system:

• Default slot: A slot without a name attribute that receives any unassigned content
• Named slot: A slot with a name attribute that receives content specifically targeted to it

Assign to a slot

Live

When adding content to a component with slots:

1. 1

   Select the element you want to place in a slot
2. 2

   In the attributes tab, find the Slot section and select which slot should contain this element. Elements without a specified slot are placed in the default slot

Slots can contain default content that appears when no content is provided. This default content:

• Is shown when no matching content is provided
• Gets replaced when matching content is provided
• Helps create components that work out-of-the-box
• Provides visual cues during development

Placeholder content

Live

Both approaches - fixed nested components and slot-based assembly - involve nesting components within others. The key difference is in how and when this composition happens:

• With fixed nesting, composition happens when creating the component
• With slots, composition happens when using the component

When to use fixed nested components:

• You need guaranteed consistency in structure
• The internal elements will always be the same type
• You want to simplify usage by pre-assembling the structure
• The component represents a complete, predefined UI element

When to use slot-based assembly:

• You need flexibility in what content appears
• Different instances need different types of content
• You want to allow completely different elements in each instance
• You need to compose from existing components rather than building everything from scratch

Many complex components combine both approaches, using fixed nested components for core functionality and slots for customizable areas.