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
Use components from the Limio component library
Compose using standard React patterns — no special wrappers needed
Use the design tokens so your composition respects the active theme
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.
Last updated
Was this helpful?