{
  "name": "installation",
  "title": "Installation",
  "description": "Choose the installation method that works best for you.",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/",
  "sections": [
    {
      "heading": "Installation",
      "markdown": "Welcome to eurodata-ui! Learn more about this project and how to use it.\n\nYou can load eurodata-ui via CDN or by installing it locally. If you’re using a framework, make sure to check out the pages for [Frameworks](https://test-apps.eurodata.de/a/eurodata-ui/docs/frameworks/react) for additional information.\n\nAction Required: Migrate UFT Tests to Playwright\n\nIf you want to use eurodata-ui components, and you have **UFT** tests, coordinate the change with the **Test Automation** team. eurodata-ui components **cannot be reliably tested with UFT**. Therefore, the Test Automation team must migrate the affected UFT tests to the new **Playwright** tests as part of the replacement.\n\n* * *"
    },
    {
      "heading": "Choosing an installation method",
      "markdown": "eurodata-ui ships in two flavors:\n\n-   **Install via pnpm** if your project uses a bundler (Vite, Webpack, Rollup, etc.). This is the right choice for any app project — React, Vue, Angular, or plain TypeScript. You get tree-shaking, type definitions, and the version is pinned through your `package.json`.\n-   **Load via CDN** if you don't have a build step — static HTML pages, prototypes, or sandbox environments. You get the full library in one request, no setup required.\n\nIf in doubt, use pnpm."
    },
    {
      "heading": "Installing via pnpm",
      "markdown": "Add the package to your project:\n\n```bash\npnpm add @eurodata/eurodata-ui\n```\n\n**Using React 18 or below?** The import paths shown below are for the raw custom elements. React 18 and earlier have limited support for custom elements, so for those versions eurodata-ui ships dedicated React wrapper components — import them from `@eurodata/eurodata-ui/dist/react/...` instead. See the [React guide](https://test-apps.eurodata.de/a/eurodata-ui/docs/frameworks/react) for the full setup and the [Using with React 18 and Below](https://test-apps.eurodata.de/a/eurodata-ui/docs/frameworks/react#using-with-react-18-and-below) section in particular.\n\nReact 19+ supports custom elements natively, so the import paths below work as-is.\n\nThen, in your application's **entry file** (the file your bundler loads first — typically `main.ts`, `index.ts`, or similar), import the stylesheet once and the components you want to use:\n\n```js\n// One-time stylesheet import for the whole app\nimport '@eurodata/eurodata-ui/dist/styles/eurodata.css';\n\n// Import each component you want to use, also once per app\nimport '@eurodata/eurodata-ui/dist/components/button/button.js';\nimport '@eurodata/eurodata-ui/dist/components/input/input.js';\n```\n\nYou only need to import the stylesheet and each component **once** — not in every file that uses them. After they're imported, you can use the custom elements anywhere in your templates:\n\n```html\n<ed-button>Click me!</ed-button>\n```\n\nComponents are cherry-picked so you only ship what you use. You can find the import path for every component in the \"Importing\" section of its documentation.\n\nAs the list of components grows, you may want to keep your entry file tidy by collecting all eurodata-ui imports in a dedicated file:\n\n```ts\n// src/eurodata-ui.ts\nimport '@eurodata/eurodata-ui/dist/styles/eurodata.css';\nimport '@eurodata/eurodata-ui/dist/components/button/button.js';\nimport '@eurodata/eurodata-ui/dist/components/input/input.js';\n// …add more components here as you adopt them\n```\n\nThen import that file once from your entry:\n\n```ts\n// your app entry, e.g. src/main.ts\nimport './eurodata-ui';\n```\n\n> If your build splits your app into multiple independent entry points (e.g. a micro-frontend setup with separate bundles), repeat the imports once per entry — not once per file inside a bundle."
    },
    {
      "heading": "Loading via CDN",
      "markdown": "Copy the following into the `<head>` of your HTML:\n\n```html\n<link rel=stylesheet href=\"https://frontend-cdn.eurodata.de/eurodata-ui/0.29.0/styles/eurodata.css\"/>\n<script type=\"module\" src=\"https://frontend-cdn.eurodata.de/eurodata-ui/0.29.0/eurodata.loader.js\"></script>\n```\n\nNow you can [use any eurodata-ui component](https://test-apps.eurodata.de/a/eurodata-ui/docs/components):\n\n```html\n<ed-button>Click me!</ed-button>\n```"
    },
    {
      "heading": "Additional Setup",
      "markdown": "### Referencing Styles\n\nBy default, importing `eurodata.css` gives you everything — the theme (which applies the design-system typography and [base styles](https://test-apps.eurodata.de/a/eurodata-ui/docs/theming/base-styles) for native HTML elements), the document resets, and the utility classes. If you want a leaner setup, you can import the individual stylesheets instead:\n\n```js\n// Option 1: import all eurodata-ui styles (recommended)\nimport '@eurodata/eurodata-ui/dist/styles/eurodata.css';\n\n// Option 2: pick and choose\n\n// theme (required — also applies the base typography and native element styles)\nimport '@eurodata/eurodata-ui/dist/styles/themes/default.css';\n\n// document resets: box-sizing regime, html/body margins (recommended for your own\n// apps; skip it when embedding into a page that brings its own reset)\nimport '@eurodata/eurodata-ui/dist/styles/resets/document.css';\n\n// CSS utility classes (optional)\nimport '@eurodata/eurodata-ui/dist/styles/utilities.css';\n```\n\nContent rendered **by components** is always styled: every component carries the native element styles in its shadow root, so links, headings, and code that components render for you match the design system out of the box. Customize them via [design tokens](https://test-apps.eurodata.de/a/eurodata-ui/docs/theming/token-reference/), not element selectors — see [Customizing](https://test-apps.eurodata.de/a/eurodata-ui/docs/customizing).\n\n### The Difference Between /dist & /dist-cdn\n\nThe library is built twice. `dist/` is what the npm package ships: the components with their dependencies such as `lit` left as imports, so a bundler like Vite or Webpack can share and optimize them. `dist-cdn/` bundles everything together and is published only on the CDN, at the URL shown above; it is not part of the npm package.\n\nUse the npm package with a bundler. Without a bundler, load the library from the CDN. A browser cannot load `dist/` on its own: its bare `lit` imports need a bundler to resolve them."
    }
  ]
}