# 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](https://docs.limio.com/components/ui-primitives-and-theming/design-tokens), and support variant/size props.

## Interactive Reference

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

### Button

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

{% embed url="<https://69c2cf3a42a094f3cd354b8d-ozgakmnact.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-ozgakmnact.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-ozgakmnact.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-ozgakmnact.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-ozgakmnact.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-ozgakmnact.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-ozgakmnact.chromatic.com/?path=/docs/components-data-entry-select--docs)          |
| **Banner**          | Promotional full-width banners                | [View](https://69c2cf3a42a094f3cd354b8d-ozgakmnact.chromatic.com/?path=/docs/components-feedback-banner--docs)            |
| **Dialog**          | Accessible modal overlays                     | [View](https://69c2cf3a42a094f3cd354b8d-ozgakmnact.chromatic.com/?path=/docs/components-feedback-dialog--docs)            |
| **Icon**            | FontAwesome icons                             | [View](https://69c2cf3a42a094f3cd354b8d-ozgakmnact.chromatic.com/?path=/docs/components-general-icon--docs)               |
| **Image**           | Responsive images                             | [View](https://69c2cf3a42a094f3cd354b8d-ozgakmnact.chromatic.com/?path=/docs/components-general-image--docs)              |
| **RadioGroup**      | Accessible radio selections                   | [View](https://69c2cf3a42a094f3cd354b8d-ozgakmnact.chromatic.com/?path=/docs/components-data-entry-radiogroup--docs)      |
| **Separator**       | Visual dividers                               | [View](https://69c2cf3a42a094f3cd354b8d-ozgakmnact.chromatic.com/?path=/docs/components-general-separator--docs)          |
| **Skeleton**        | Animated loading placeholders                 | [View](https://69c2cf3a42a094f3cd354b8d-ozgakmnact.chromatic.com/?path=/docs/components-layout-skeleton--docs)            |
| **Table**           | Data tables with sorting                      | [View](https://69c2cf3a42a094f3cd354b8d-ozgakmnact.chromatic.com/?path=/docs/components-data-display-table--docs)         |
| **TablePagination** | Table page controls                           | [View](https://69c2cf3a42a094f3cd354b8d-ozgakmnact.chromatic.com/?path=/docs/components-navigation-tablepagination--docs) |
| **Tooltip**         | Accessible hover information                  | [View](https://69c2cf3a42a094f3cd354b8d-ozgakmnact.chromatic.com/?path=/docs/components-feedback-tooltip--docs)           |
| **NavigationMenu**  | Accessible navigation bars                    | [View](https://69c2cf3a42a094f3cd354b8d-ozgakmnact.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-ozgakmnact.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-ozgakmnact.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-ozgakmnact.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-ozgakmnact.chromatic.com/?path=/docs/components-data-entry-radiodropdown--docs) |
| **Error**         | Error message with retry button             | [View](https://69c2cf3a42a094f3cd354b8d-ozgakmnact.chromatic.com/?path=/docs/components-feedback-error--docs)           |