Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/storefront.
• Live playground: /components/storefront/quick-links.

When to use it

Use QuickLinks when the goal is fast navigation between related destinations. It works well for category shortcuts, campaign filters, and curated storefront wayfinding where the links belong together as one navigational cluster.

If the rail needs surrounding browse context, keep evolving QuickLinks with its section-capable composition path instead of inventing a separate CategoryJumpNav export.

Composition notes

QuickLinks now supports two complementary paths:

Convenience path

Use links when the navigation set is straightforward.

• variant="pills" keeps the set compact and utility-focused.
• variant="cards" gives each link more room for imagery and supporting copy.
• eyebrow and description let card links carry a little more navigation context without becoming a full merch block.

Section composition path

Use the compound surface when the browse shell needs more structure around the same directional-navigation core:

• QuickLinks.Header
• QuickLinks.Heading
• QuickLinks.Body
• QuickLinks.List
• QuickLinks.Featured
• QuickLinks.Footer

QuickLinks.List can still take links, so you can mix structured composition with the same simple data model.

Behavior and theming guidance

Use the active state sparingly and only when it reflects the current filtered or navigated view. Too many active treatments at once make the rail harder to read.

classNames now exposes stable hooks for section and card anatomy as well as the original list/link surface. That means one brand can keep QuickLinks airy and editorial while another can make the same component feel dense, pill-like, or more directional-card-oriented without local forks.

Keep it recognizably navigational. If the component starts behaving like a full merchandising rail or recommendation module, the design has drifted too far away from the QuickLinks family.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/storefront.
• Playground route: /sandbox?component=QuickLinks.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes