# Primitives

The Limio component library provides the atomic building blocks used across all themes and custom components. These primitives are **standalone** — they have no dependency on external state or providers.

All primitives are accessible (built on [Radix UI](https://www.radix-ui.com/)), styled via Tailwind CSS with [design tokens](/components/ui-primitives-and-theming/design-tokens.md), and support variant/size props.

## Interactive Reference

Browse all primitives with live controls in [Storybook](https://69c2cf3a42a094f3cd354b8d-ojozztnsdo.chromatic.com/?path=/docs/components-general-button--docs).

### Button

Actions and CTAs with variants: `primary`, `secondary`, `danger`, `text`, `link`, `outline`.

{% embed url="<https://69c2cf3a42a094f3cd354b8d-ojozztnsdo.chromatic.com/?path=/story/components-general-button--all-variants&full=1&shortcuts=false&singleStory=true&embed=true>" %}

### Card

Content containers with variants: `default`, `secondary`, `transparent`, `dashed`, `emphasised`.

{% embed url="<https://69c2cf3a42a094f3cd354b8d-ojozztnsdo.chromatic.com/?path=/story/components-layout-card--all-variants&full=1&shortcuts=false&singleStory=true&embed=true>" %}

### Text

Typography with variants: `h1`-`h3`, `body`, `paragraph`, `label`, `legend`.

{% embed url="<https://69c2cf3a42a094f3cd354b8d-ojozztnsdo.chromatic.com/?path=/story/components-general-text--all-variants&full=1&shortcuts=false&singleStory=true&embed=true>" %}

### Input

Form fields with variants: `default`, `standardForm`, `checkboxRadio`.

{% embed url="<https://69c2cf3a42a094f3cd354b8d-ojozztnsdo.chromatic.com/?path=/story/components-data-entry-input--all-types&full=1&shortcuts=false&singleStory=true&embed=true>" %}

### Alert

Status messages with contextual variants.

{% embed url="<https://69c2cf3a42a094f3cd354b8d-ojozztnsdo.chromatic.com/?path=/story/components-feedback-alert--all-variants&full=1&shortcuts=false&singleStory=true&embed=true>" %}

### Badge

Labels and tags.

{% embed url="<https://69c2cf3a42a094f3cd354b8d-ojozztnsdo.chromatic.com/?path=/story/components-data-display-badge--all-variants&full=1&shortcuts=false&singleStory=true&embed=true>" %}

### Other Primitives

| Component           | Purpose                                       | Storybook                                                                                                                 |
| ------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| **Select**          | Dropdowns with compound `Select.Item` pattern | [View](https://69c2cf3a42a094f3cd354b8d-ojozztnsdo.chromatic.com/?path=/docs/components-data-entry-select--docs)          |
| **Banner**          | Promotional full-width banners                | [View](https://69c2cf3a42a094f3cd354b8d-ojozztnsdo.chromatic.com/?path=/docs/components-feedback-banner--docs)            |
| **Dialog**          | Accessible modal overlays                     | [View](https://69c2cf3a42a094f3cd354b8d-ojozztnsdo.chromatic.com/?path=/docs/components-feedback-dialog--docs)            |
| **Icon**            | FontAwesome icons                             | [View](https://69c2cf3a42a094f3cd354b8d-ojozztnsdo.chromatic.com/?path=/docs/components-general-icon--docs)               |
| **Image**           | Responsive images                             | [View](https://69c2cf3a42a094f3cd354b8d-ojozztnsdo.chromatic.com/?path=/docs/components-general-image--docs)              |
| **RadioGroup**      | Accessible radio selections                   | [View](https://69c2cf3a42a094f3cd354b8d-ojozztnsdo.chromatic.com/?path=/docs/components-data-entry-radiogroup--docs)      |
| **Separator**       | Visual dividers                               | [View](https://69c2cf3a42a094f3cd354b8d-ojozztnsdo.chromatic.com/?path=/docs/components-general-separator--docs)          |
| **Skeleton**        | Animated loading placeholders                 | [View](https://69c2cf3a42a094f3cd354b8d-ojozztnsdo.chromatic.com/?path=/docs/components-layout-skeleton--docs)            |
| **Table**           | Data tables with sorting                      | [View](https://69c2cf3a42a094f3cd354b8d-ojozztnsdo.chromatic.com/?path=/docs/components-data-display-table--docs)         |
| **TablePagination** | Table page controls                           | [View](https://69c2cf3a42a094f3cd354b8d-ojozztnsdo.chromatic.com/?path=/docs/components-navigation-tablepagination--docs) |
| **Tooltip**         | Accessible hover information                  | [View](https://69c2cf3a42a094f3cd354b8d-ojozztnsdo.chromatic.com/?path=/docs/components-feedback-tooltip--docs)           |
| **NavigationMenu**  | Accessible navigation bars                    | [View](https://69c2cf3a42a094f3cd354b8d-ojozztnsdo.chromatic.com/?path=/docs/components-navigation-navigationmenu--docs)  |

## Molecules

Pre-composed patterns that combine primitives into reusable units.

### Cart

Order summary with line items and checkout button.

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

### LineItemInfo

Line item display with price and quantity controls.

{% embed url="<https://69c2cf3a42a094f3cd354b8d-ojozztnsdo.chromatic.com/?path=/story/components-data-display-lineiteminfo--with-price-block&full=1&shortcuts=false&singleStory=true&embed=true>" %}

### Pagination

Page navigation with page size selector.

{% embed url="<https://69c2cf3a42a094f3cd354b8d-ojozztnsdo.chromatic.com/?path=/story/components-navigation-pagination--default&full=1&shortcuts=false&singleStory=true&embed=true>" %}

### Other Molecules

| Molecule          | Purpose                                     | Storybook                                                                                                               |
| ----------------- | ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| **RadioDropdown** | Checkbox-style multi-select filter dropdown | [View](https://69c2cf3a42a094f3cd354b8d-ojozztnsdo.chromatic.com/?path=/docs/components-data-entry-radiodropdown--docs) |
| **Error**         | Error message with retry button             | [View](https://69c2cf3a42a094f3cd354b8d-ojozztnsdo.chromatic.com/?path=/docs/components-feedback-error--docs)           |


---

# 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/primitives.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.