Shared Library Pro-Tips

See the Advanced Components section in the left nav for more.

Maximize Versatility

A Shared Library is designed to support a range of different subscribing sites, and it benefits strongly from design techniques that emphasize versatility.

In general this means;

"Atomize" Components and Use Slots Extensively

Break your Shared Components into smaller parts, and create these as individual components. Use slots so that the user can choose how to arrange them.

It's very rare now that Sygnal will ever build a Shared Component without slots, because that "locks" the content into the least flexible arrangement.

Use Variants

Use Variants to expose stylistic details, like;

• Button sizes, small medium large
• Icon button variants
• Layout details... 1 col, 2 cols, 3 cols...
• Image positioning under object-fit / cover

You can only have one variant per component, but when they are "atomized" this is generally quite practical.

Separate Your Shared Libraries by Function

When you have a lot of little components, it helps a lot to keep them together in a single discrete library.

For example, Sygnal uses shared libs heavily for our modal & pop-up architectures. All of the pieces - sidebar, content items, button types are in the same library and there is nothing else to complicate things.

Use Component Groups, and Property Groups

Although these are simply a convenient organizing mechanic, they can make things far easier on your users, as a form of intrinsic documentation.

For example, suppose you've created a Shared nav component. But what components are meant to be slotted into the main nav? What components are slotted into dropdowns? How do mega-menu arrangements work?

Those group labels can make things far easier.

Use Cases

Shared Section Component, w/ Layout

Create a Section component, which has your header and description content. Use a slot for the main content within that section.

Use Variants to support other slot stylings, such as 1-col, 2-col, and 3-col grid layouts.

Shared Hero Component

Create a reusable hero section in the lib, which contains a slot for inner content. The hero section itself can have background video support or a large background image.

The shared lib also contains slottable hero content elements, such as a heading, or a video+text.

Shared Nav Component

• Lib-based nav bar, with logo and key menu items, buttons, megamenus, etc.
  • Slots to fill in menu content and add new menu items.
• Lib-based slot menus, which can be embedded and configured at the site level.
• Wrap the entire nav in a Site-component, so that it can be copied to every page of that site and kept intact.

Combine Shared + Site Components

When you're using slots, you can slot any type of component inside of any type of component.

• A shared component can slot a site component
• A site component can slot a shared component

And these arrangements can run deep.

Example: Site-wide Nav

Let's say you've built a Nav that includes lib components, and which slots dropdowns and other useful sub-components.

You can wrap the entire thing in a Site component and then you will be able to easily use that component throughout your site consistently.

Example: Collection List Content

One thing shared component cannot contain is CMS content, since the CMS is in your subscribing site.

You can however create arrangements like;

• Site component -
• wraps Shared component - a section with special formatting
• slots a Site component which contains a collection list, which
• wraps a different Shared "card" component which is bound to the CMS content

‍