{
  "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.28.0/styles/eurodata.css\"/>\n<script type=\"module\" src=\"https://frontend-cdn.eurodata.de/eurodata-ui/0.28.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\nIf you have eurodata-ui installed locally via pnpm, you'll notice the following directories in the project's root:\n\n```\ndist/\ndist-cdn/\n```\n\nThe `dist-cdn` files come with everything bundled together, so you can use them directly without a build tool. The dist files keep dependencies separate, which lets your bundler optimize and share code more efficiently.\n\nUse `dist-cdn` if you're loading directly in the browser or from a CDN. Use `dist` if you're using a bundler like Webpack or Vite."
    }
  ]
}