npm install @primitivekit/react

import { Button, Card } from '@primitivekit/react';
import '@primitivekit/react/tokens/tokens.css';

function App() {
  return (
    <Card variant="elevated">
      <Button>Click Me</Button>
    </Card>
  );
}

npm install @primitivekit/vue

<script setup lang="ts">
import { Card, Button } from '@primitivekit/vue';
import '@primitivekit/vue/tokens/tokens.css';
</script>

<template>
  <Card variant="elevated">
    <Button>Click Me</Button>
  </Card>
</template>

npm install @primitivekit/angular

import { Component } from '@angular/core';
import { CardComponent, ButtonComponent } from '@primitivekit/angular';
import '@primitivekit/angular/tokens/tokens.css';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CardComponent, ButtonComponent],
  template: `
    <pk-card variant="elevated">
      <pk-button>Click Me</pk-button>
    </pk-card>
  `
})
export class AppComponent {}

npm install @primitivekit/svelte

<script lang="ts">
  import { Card, Button } from '@primitivekit/svelte';
  import '@primitivekit/svelte/tokens/tokens.css';
</script>

<Card variant="elevated">
  <Button>Click Me</Button>
</Card>

npm install @primitivekit/astro

npm install @primitivekit/vanilla

import { Card, Button } from '@primitivekit/vanilla';
import '@primitivekit/vanilla/tokens/tokens.css';

const card = new Card({ variant: 'elevated' });
const button = new Button({ text: 'Click Me' });

card.mount(document.getElementById('app'));

<link rel="stylesheet" href="https://unpkg.com/@primitivekit/vanilla/dist/tokens/tokens.css">
<script src="https://unpkg.com/@primitivekit/vanilla"></script>

<script>
  const { Card, Button } = PrimitiveKit;
  const card = new Card({ variant: 'elevated' });
  card.mount(document.body);
</script>