Compositions

Compositions show how primitives combine into the real UI patterns used in Limio themes. Use these as starting points when building new theme components.

All compositions use only the Limio component library — no SDK or business logic required.

Checkout Page

A complete checkout flow with plan selection, cross-sells, contact form, billing address, and a sticky order summary sidebar.

Components used: Card, Text, Button, Input, Select, Badge, Icon, Separator, Cart

---

Offer Card

The most common pattern: a card displaying a subscription offer with price, features, and a CTA button.

Components used: Card, Text, Button, Badge, Separator

Offer Grid

Multiple offer cards side-by-side for plan comparison:

---

Pricing Table

A structured comparison of plans with highlighted recommendation.

Components used: Card, Text, Button, Badge, Separator

---

Form Section

Contact details, billing address, and full checkout forms built from primitives.

Components used: Card, Text, Input, Select, Button, Separator

---

Cross-Sell Card

Add-on recommendations shown during checkout or on account pages.

Components used: Card, Text, Button, Badge, Icon, Separator

---

Cart Summary

Order summary with line items, totals, and checkout button. Composes primitives with the Cart molecule.

Components used: Card, Text, Button, Icon, Separator, Badge, Cart

---

Building your own compositions

1. Use components from the Limio component library
2. Compose using standard React patterns — no special wrappers needed
3. Use the design tokens so your composition respects the active theme
4. See the theming guide for how to customise the look

All composition source code is visible in Storybook — click "Show code" on any story to see the implementation.