> 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/developers/custom-components/development-guidelines.md).

# Development Guidelines

These guidelines outline the best practices and requirements for developing custom components in Limio.

### How to create new Custom Components

To create a Custom Components, you can:

* take an existing **Limio Component** and turn it into a **Custom Component** to accelerate your development.
* Create one from scratch.

It is important to note that all **Custom Components** are owned and maintained by your development team once created or forked. Each **Custom Component** can be laid out as you wish, spit into multiple files or a single file containing all of your logic.

### Styling

Use `.css` files for styling your components. Sass (`.scss`, `.sass`) and Less (`.less`) are also supported, and shipped Limio components use them. CSS modules work for each of these: name the file `.module.css`, `.module.scss` or `.module.less` and import the class names.

### Understanding your Key files

There are some key files you should know about:

1. **Component Entry Point:**
   * **File Path:** `./components/[componentDir]/index.js`
   * This is the main file of your component where your React component is exported.
   * Your component **must be exported as the default export** from this file.
2. **Storybook File:**
   * **File Path:** `./component-playground/src/stories/[componentDir].stories.js`
   * This file defines your component's stories for Storybook, allowing you to display and test your component in various states and configurations.
   * Use Storybook to test and showcase your component in various states. This ensures functionality across multiple scenarios and datasets.
3. **Component Package JSON:**
   * **File Path:** `./components/[componentDir]/package.json`
   * Contains:
     * **Dependencies:** Manage external packages required by your component. These packages will be bundled with your component during the build process.
     * **Limio Props:** Define custom properties (e.g., string, boolean, picklist) to make your component customizable within the Limio ecosystem. This allows users to adapt the component's behavior and appearance according to their needs. You can learn more about each Prop Types [here](/developers/custom-components/prop-types.md).
   * Declare React as a peer dependency with `"react": "*"`, and do not add it to `dependencies`. React is supplied by the platform at runtime rather than bundled with your component, so pinning a version here has no effect and risks disagreeing with the version Limio actually runs.
   * Keep your `package.json` clean and test fields to ensure smooth integration with Limio.
   * The **name**, **description**, and **version** for your component are defined in the `package.json` file. These fields:
     * Appear to the user in **Limio's** **Page Builder**.
     * Are pulled into your component during rendering.

#### Example `package.json`

```json
{
  "name": "headings",
  "version": "1.0.0",
  "description": "A headings component",
  "main": "./index.js",
  "dependencies": {
    "react-i18next": "^11.3.1"
  },
  "peerDependencies": {
    "react": "*"
  },
  "limioProps": [
    {
      "id": "heading",
      "label": "Heading",
      "type": "string",
      "default": "Lorem ipsum dolor sit amet"
    },
    {
      "id": "subheading",
      "label": "Subheading",
      "type": "string",
      "default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    },
    {
      "id": "componentId",
      "label": "Component Id",
      "type": "string",
      "default": "headings-limio"
    }
  ]
}
```

### SEO best practices

* **Use Semantic Headings (`h1`, `h2`, etc.) Properly**
  * Each component should use appropriate heading levels (`h2`, `h3`, etc.) based on its placement in the page.
  * Avoid multiple `<h1>` tags unless the component is the primary heading of the page.
* **Ensure Proper Use of ARIA Attributes**
  * If the component is interactive (e.g., buttons, modals, dropdowns), use proper ARIA roles (e.g., `role="button"`, `aria-expanded`, `aria-labelledby`).
  * This helps screen readers and improves usability, indirectly benefiting SEO.
* **Use Descriptive `alt` Attributes for Images**
  * If the component includes an image, always provide an `alt` attribute.
  * Avoid generic descriptions like `"image"`; use meaningful content.
* **Avoid Excessive Nesting**
  * Use only the necessary number of divs (`<div>`), spans, or other elements. Over-nesting can make the HTML structure difficult to interpret.
* **Use Meaningful Link Text**
  * If the component includes links, avoid generic anchor text like `"Click here"`.
  * Instead, use descriptive text like `<a href="example.com">Learn more about our services</a>`.

#### Accessibility best practices

Custom components must meet **WCAG 2.1 AA** standards, required under the European Accessibility Act (EAA) from June 2025.

**Must-haves:**

* **Keyboard navigable** — all interactive elements (buttons, links, inputs) must be usable without a mouse
* **Visible focus indicators** — never remove `outline` styles without a visible replacement
* **Colour contrast** — 4.5:1 ratio for normal text, 3:1 for large text
* **Image alt text** — meaningful `alt` on informative images, `alt=""` on decorative ones
* **Form labels** — every input needs an associated `<label>`, not just placeholder text
* **ARIA for interactive components** — use `aria-expanded`, `aria-label`, `aria-live` etc. where native HTML semantics aren't sufficient


---

# 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/developers/custom-components/development-guidelines.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.