# Compositions

Compositions show how [primitives](https://docs.limio.com/components/ui-primitives-and-theming/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`

{% embed url="<https://69c2cf3a42a094f3cd354b8d-ozgakmnact.chromatic.com/?path=/story/pages-checkout-page--full-checkout&full=1&shortcuts=false&singleStory=true&embed=true>" %}

***

## 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`

{% embed url="<https://69c2cf3a42a094f3cd354b8d-ozgakmnact.chromatic.com/?path=/story/components-commerce-offer-card--with-features&full=1&shortcuts=false&singleStory=true&embed=true>" %}

### Offer Grid

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

{% embed url="<https://69c2cf3a42a094f3cd354b8d-ozgakmnact.chromatic.com/?path=/story/components-commerce-offer-card--offer-grid&full=1&shortcuts=false&singleStory=true&embed=true>" %}

***

## Pricing Table

A structured comparison of plans with highlighted recommendation.

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

{% embed url="<https://69c2cf3a42a094f3cd354b8d-ozgakmnact.chromatic.com/?path=/story/components-commerce-pricing-table--three-tier&full=1&shortcuts=false&singleStory=true&embed=true>" %}

***

## Form Section

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

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

{% embed url="<https://69c2cf3a42a094f3cd354b8d-ozgakmnact.chromatic.com/?path=/story/components-commerce-form-section--complete-checkout-form&full=1&shortcuts=false&singleStory=true&embed=true>" %}

***

## Cross-Sell Card

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

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

{% embed url="<https://69c2cf3a42a094f3cd354b8d-ozgakmnact.chromatic.com/?path=/story/components-commerce-cross-sell-card--add-on-list&full=1&shortcuts=false&singleStory=true&embed=true>" %}

***

## 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`

{% embed url="<https://69c2cf3a42a094f3cd354b8d-ozgakmnact.chromatic.com/?path=/story/components-commerce-cart-summary--multi-item-cart&full=1&shortcuts=false&singleStory=true&embed=true>" %}

***

## 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](https://docs.limio.com/components/ui-primitives-and-theming/design-tokens) so your composition respects the active theme
4. See the [theming guide](https://docs.limio.com/components/ui-primitives-and-theming/theming) for how to customise the look

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