Installation

How to install @mediayard/agoratopia-ui with any package manager, set up the required styles, and pick the right import path.

Install the package

The package is published on the npm registry and works with every npm-compatible package manager and runtime.

  • npm

    npm install @mediayard/agoratopia-ui

  • pnpm

    pnpm add @mediayard/agoratopia-ui

  • yarn

    yarn add @mediayard/agoratopia-ui

  • bun

    bun add @mediayard/agoratopia-ui

  • deno

    deno add npm:@mediayard/agoratopia-ui
# npm npm install @mediayard/agoratopia-ui # pnpm pnpm add @mediayard/agoratopia-ui # yarn yarn add @mediayard/agoratopia-ui # bun bun add @mediayard/agoratopia-ui # deno deno add npm:@mediayard/agoratopia-ui

Peer dependencies

These packages must be present in the consuming app. svelte and @sveltejs/kit are already part of any SvelteKit project, so usually only the other four need installing.

  • @lucide/svelte

    Icon set used inside interactive components.

  • @oglofus/localization

    Country, language, and currency types used by inputs, flags, and utilities.

  • @sveltejs/kit

    Resolved paths, remote form fields, and app types.

  • @unpic/svelte

    CDN-backed responsive images in product cards and sections.

  • svelte

    Svelte 5 runtime and compiler. Runes are used throughout.

  • valibot

    Schema validation for form-related components.

pnpm add @lucide/svelte @oglofus/localization @unpic/svelte valibot

Stylesheet setup

Import the preflight reset and the design-token variables once in the root layout. All components read their colors, spacing, and typography from the --a-* custom properties.

<!-- src/routes/+layout.svelte -->
<script>
	import '@mediayard/agoratopia-ui/styles/preflight.css';
	import '@mediayard/agoratopia-ui/styles/variables.css';

	let { children } = $props();
</script>

{@render children()}
<!-- src/routes/+layout.svelte --> <script> import '@mediayard/agoratopia-ui/styles/preflight.css'; import '@mediayard/agoratopia-ui/styles/variables.css'; let { children } = $props(); </script> {@render children()}

Entry points and what they bring

The package exposes one root export and focused subpath exports. Prefer the narrowest path for what you need.

  • @mediayard/agoratopia-ui

    Everything: all components, all assets, plus the utility functions removeAccents and currencyFormat.

  • @mediayard/agoratopia-ui/components

    All component families in one import: Button, Input, Select, Dialog, and the rest.

  • @mediayard/agoratopia-ui/components/<family>

    A single family. Families: address-select, button, dialogs, input, layout, product-card, sections, select, slider, switch. Prefer this narrowest path.

  • @mediayard/agoratopia-ui/assets/vectors

    SVG icon and logo components such as HeartIcon, BasketIcon, and AgoratopiaLogo.

  • @mediayard/agoratopia-ui/assets/vectors/flags

    Country flag components (e.g. CyFlag) and the flags map keyed by CountryAlpha2 codes.

  • @mediayard/agoratopia-ui/styles/*.css

    preflight.css and variables.css, the global stylesheet entry points.

  • @mediayard/agoratopia-ui/assets/favicon.svg

    The Agoratopia favicon as a static SVG asset.

// Narrow, per-family import (preferred) import { Button, SocialButton } from '@mediayard/agoratopia-ui/components/button'; // All components at once import { Button, Input, Dialog } from '@mediayard/agoratopia-ui/components'; // Icons and flags import { HeartIcon, BasketIcon } from '@mediayard/agoratopia-ui/assets/vectors'; import { CyFlag, flags } from '@mediayard/agoratopia-ui/assets/vectors/flags'; // Utilities from the root export import { currencyFormat, removeAccents } from '@mediayard/agoratopia-ui';