Foundations · Integration

Framework Integration

Zero runtime dependencies. Consume Aster DS seamlessly across React, Next.js, Vue, Svelte, and Astro using standard CSS and idempotent ES modules.

Zero Framework Lock-in

Aster delivers native web components and standard CSS custom properties. You do not need framework-specific wrappers to use Aster DS in any modern framework.

React & Next.js (App Router / Pages)

Import Aster CSS globally and call initAsterComponents inside a useEffect or client component:

React Component (Button.jsx)

import 'aster-ds/aster.css';
import { useEffect } from 'react';
import { initAsterComponents } from 'aster-ds';

export function Button({ children, variant = 'primary' }) {
  useEffect(() => {
    initAsterComponents(document);
  }, []);

  return (
    <button className={`as-button as-button--${variant}`}>
      <span className="as-button__label">{children}</span>
    </button>
  );
}

Vue 3

Initialize components inside onMounted hook:

Vue Component (Button.vue)

<script setup>
import { onMounted } from 'vue';
import { initAsterComponents } from 'aster-ds';
import 'aster-ds/aster.css';

onMounted(() => {
  initAsterComponents(document);
});
</script>

<template>
  <button class="as-button as-button--primary">
    <span class="as-button__label"><slot /></span>
  </button>
</template>

Svelte / SvelteKit

Use Aster classes directly with onMount initialization:

Svelte Component (Button.svelte)

<script>
  import { onMount } from 'svelte';
  import { initAsterComponents } from 'aster-ds';
  import 'aster-ds/aster.css';

  onMount(() => {
    initAsterComponents(document);
  });
</script>

<button class="as-button as-button--primary">
  <span class="as-button__label"><slot /></span>
</button>