@elvora/svelte

Elvora UI components for Svelte 4+ and Svelte 5.

This adapter ships components as raw .svelte source files — the recommended distribution shape for Svelte component libraries. SvelteKit (or any consumer using the official Svelte preprocessor) will compile them on demand, ensuring users always get the right runtime for their Svelte version.

Install

pnpm add @elvora/svelte svelte

Quick start

<script lang="ts">
  import { ElvoraProvider, ElvoraButton, ElvoraCard, ElvoraStack } from '@elvora/svelte';
  import { defaultTheme } from '@elvora/themes';
</script>

<ElvoraProvider theme={defaultTheme}>
  <ElvoraCard>
    <ElvoraStack gap={12}>
      <h2>Hello Elvora</h2>
      <ElvoraButton variant="primary" on:click={() => alert('hi')}>Click me</ElvoraButton>
    </ElvoraStack>
  </ElvoraCard>
</ElvoraProvider>

Available components (alpha)

ElvoraProvider, ElvoraButton, ElvoraIconButton, ElvoraBox, ElvoraStack, ElvoraCard, ElvoraAlert, ElvoraSpinner, ElvoraDivider, ElvoraTag, ElvoraBadge, ElvoraAvatar, ElvoraIcon, ElvoraLabel, ElvoraInput, ElvoraTextarea, ElvoraCheckbox, ElvoraSwitch, ElvoraProgress, ElvoraSkeleton, ElvoraEmpty, ElvoraModal.

The Svelte adapter consumes the same @elvora/core headless logic and @elvora/tokens design tokens as the React, React Native, Angular, and Vue adapters. Full Phase 2–7 parity is on the v1.1 roadmap; today the Svelte surface focuses on the primitives most apps need on day one.