Composition and Prototyping

Slots and Sub Components

Slots allow you to embed components within other components, creating dynamic and interactive demos.
View as Markdown

Overview

You can use both traditional slots (children) and named slots in your demos, showcasing the versatility of your components.

Traditional Slots (Children)

Traditional slots, often referred to as children, enable you to place one component inside another. For example, you can insert a “Primary” Button inside the Card component’s slot to demonstrate how they interact together.

Named Slots

Named slots provide a way to assign specific content areas within a component. This allows for more precise placement and customization of embedded components. For instance, a Card component might have named slots for the header, body, and footer.

Enabling Code Sources in Slots

By default, code sources are turned off for use in slots. This is because components must be registered in Knapsack before their spec configuration can be checked. Registering ensures that each component is set up correctly and will render as expected.

If you enable this feature, your team can use any component from your code sources—even if it hasn’t been registered in Knapsack. While this can be convenient, it also means Knapsack won’t verify the spec configuration, so components may not render properly.

To enable this feature, an Admin must turn it on in Settings → Workspace.

Adding and Editing Items

Create comprehensive and detailed pattern demos using your systems contents.

  1. Click the “plus” icon next to the Slot name to open the menu of basic options, such as text, and a list of registered patterns available to use.
  2. Once added, you can click the new item to open it’s details and adjust them to fit your demos needs.
  3. Click “Save Changes” when done to store the demo updates for other users.

Layout Options

While some teams choose to preconfigure how content within a slot will appear, there are times where additional controls are needed to achieve a desired outcome.

Our Layout Options give your team the tools to adjust the content within a slot to align with guidelines.

General Options

Layout

Choose between Horizontal, Vertical, or Wrap.

Align

Choose between Top Left, Top Center, Top Right, Left, Center, Right, Bottom Left, Bottom Center, and Bottom Right.

Gap

Control the horizontal or vertical spacing between items based on your Layout setting. Use a dimension token, or set a static pixel, rem, or percentage value.

Padding

Choose to control the horizontal and vertical padding of the slot itself. You can also toggle on “Individual Padding” to control separate entries for top, bottom, left, and right padding values.

Use a dimension token, or set a static pixel, rem, or percentage value.

Theme

With variable collections configured you’ll have the option to apply a different mode to the slot itself. This can be helpful when demonstrating adjusting a density mode of part of a component while the overall component uses a different mode.

CSS Classes

Many systems rely on CSS systems to achieve desired outcomes such as Tailwind. Apply a flexible space separated list of CSS classes to adjust and style the slot for your needs.