> For the complete documentation index, see [llms.txt](https://docs.limio.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.limio.com/components/ui-primitives-and-theming/compositions.md).

# 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-cannwfeosv.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-cannwfeosv.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-cannwfeosv.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-cannwfeosv.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-cannwfeosv.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-cannwfeosv.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-cannwfeosv.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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.