# Compositions

Compositions show how [primitives](/components/ui-primitives-and-theming/primitives.md) 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-ojozztnsdo.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-ojozztnsdo.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-ojozztnsdo.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-ojozztnsdo.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-ojozztnsdo.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-ojozztnsdo.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-ojozztnsdo.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](/components/ui-primitives-and-theming/design-tokens.md) so your composition respects the active theme
4. See the [theming guide](/components/ui-primitives-and-theming/theming.md) for how to customise the look

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.limio.com/components/ui-primitives-and-theming/compositions.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.