Quick Start

Get up and running with PrimitiveKit in 5 minutes.

1. Install

Choose your framework and install the package:

npm install @primitivekit/react

2. Import Design Tokens

Import the design tokens CSS file in your application’s entry point:

// src/main.tsx or src/App.tsx
import '@primitivekit/react/tokens/tokens.css';

3. Use Components

Import and use components in your application:

import { Card, Button, Badge } from '@primitivekit/react';

function App() {
  return (
    <div className="app">
      <Card variant="elevated" hoverable>
        <Badge variant="solid" color="primary">New</Badge>
        <h2>Welcome to PrimitiveKit</h2>
        <p>Build beautiful UIs with zero hardcoded values.</p>
        <Button onClick={() => alert('Hello!')}>
          Get Started
        </Button>
      </Card>
    </div>
  );
}

export default App;

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

const handleClick = () => {
  alert('Hello!');
};
</script>

<template>
  <div class="app">
    <Card variant="elevated" :hoverable="true">
      <Badge variant="solid" color="primary">New</Badge>
      <h2>Welcome to PrimitiveKit</h2>
      <p>Build beautiful UIs with zero hardcoded values.</p>
      <Button @click="handleClick">
        Get Started
      </Button>
    </Card>
  </div>
</template>

import { Component } from '@angular/core';
import { CardComponent, ButtonComponent, BadgeComponent } from '@primitivekit/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CardComponent, ButtonComponent, BadgeComponent],
  template: `
    <div class="app">
      <pk-card variant="elevated" [hoverable]="true">
        <pk-badge variant="solid" color="primary">New</pk-badge>
        <h2>Welcome to PrimitiveKit</h2>
        <p>Build beautiful UIs with zero hardcoded values.</p>
        <pk-button (click)="handleClick()">
          Get Started
        </pk-button>
      </pk-card>
    </div>
  `
})
export class AppComponent {
  handleClick() {
    alert('Hello!');
  }
}

<script lang="ts">
  import { Card, Button, Badge } from '@primitivekit/svelte';
  
  function handleClick() {
    alert('Hello!');
  }
</script>

<div class="app">
  <Card variant="elevated" hoverable={true}>
    <Badge variant="solid" color="primary">New</Badge>
    <h2>Welcome to PrimitiveKit</h2>
    <p>Build beautiful UIs with zero hardcoded values.</p>
    <Button on:click={handleClick}>
      Get Started
    </Button>
  </Card>
</div>

---
import { Card, Button, Badge } from '@primitivekit/astro';
---

<div class="app">
  <Card variant="elevated" hoverable={true}>
    <Badge variant="solid" color="primary">New</Badge>
    <h2>Welcome to PrimitiveKit</h2>
    <p>Build beautiful UIs with zero hardcoded values.</p>
    <Button>Get Started</Button>
  </Card>
</div>

import { Card, Button, Badge } from '@primitivekit/vanilla';

const app = document.getElementById('app');

const badge = new Badge({
  variant: 'solid',
  color: 'primary',
  text: 'New'
});

const button = new Button({
  text: 'Get Started',
  onClick: () => alert('Hello!')
});

const card = new Card({
  variant: 'elevated',
  hoverable: true,
  children: [
    badge,
    '<h2>Welcome to PrimitiveKit</h2>',
    '<p>Build beautiful UIs with zero hardcoded values.</p>',
    button
  ]
});

card.mount(app);

4. Customize (Optional)

Override CSS variables to customize the look and feel:

/* styles.css */
:root {
  /* Colors */
  --color-primary: #0ea5e9;
  --color-secondary: #8b5cf6;
  
  /* Spacing */
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  
  /* Typography */
  --font-family-base: 'Inter', sans-serif;
  --font-size-base: 1rem;
  
  /* Border Radius */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 0.75rem;
}

Complete Example

Here’s a complete example with multiple components:

import { 
  Card, 
  Button, 
  Badge, 
  Input, 
  Stack,
  Divider 
} from '@primitivekit/react';
import '@primitivekit/react/tokens/tokens.css';
import { useState } from 'react';

function App() {
  const [name, setName] = useState('');

  return (
    <div style={{ padding: '2rem', maxWidth: '600px', margin: '0 auto' }}>
      <Card variant="elevated">
        <Stack direction="vertical" spacing="lg">
          <div>
            <Badge variant="solid" color="primary">New Feature</Badge>
            <h1>Welcome to PrimitiveKit</h1>
            <p>Build beautiful UIs with zero hardcoded values.</p>
          </div>
          
          <Divider />
          
          <div>
            <label htmlFor="name">Your Name</label>
            <Input
              id="name"
              placeholder="Enter your name"
              value={name}
              onChange={(e) => setName(e.target.value)}
            />
          </div>
          
          <Button 
            variant="primary" 
            onClick={() => alert(`Hello, ${name || 'World'}!`)}
          >
            Say Hello
          </Button>
        </Stack>
      </Card>
    </div>
  );
}

export default App;

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

const name = ref('');

const handleClick = () => {
  alert(`Hello, ${name.value || 'World'}!`);
};
</script>

<template>
  <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
    <Card variant="elevated">
      <Stack direction="vertical" spacing="lg">
        <div>
          <Badge variant="solid" color="primary">New Feature</Badge>
          <h1>Welcome to PrimitiveKit</h1>
          <p>Build beautiful UIs with zero hardcoded values.</p>
        </div>
        
        <Divider />
        
        <div>
          <label for="name">Your Name</label>
          <Input
            id="name"
            placeholder="Enter your name"
            v-model="name"
          />
        </div>
        
        <Button variant="primary" @click="handleClick">
          Say Hello
        </Button>
      </Stack>
    </Card>
  </div>
</template>

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { 
  CardComponent, 
  ButtonComponent, 
  BadgeComponent, 
  InputComponent, 
  StackComponent,
  DividerComponent 
} from '@primitivekit/angular';
import '@primitivekit/angular/tokens/tokens.css';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    FormsModule,
    CardComponent, 
    ButtonComponent, 
    BadgeComponent, 
    InputComponent, 
    StackComponent,
    DividerComponent
  ],
  template: `
    <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
      <pk-card variant="elevated">
        <pk-stack direction="vertical" spacing="lg">
          <div>
            <pk-badge variant="solid" color="primary">New Feature</pk-badge>
            <h1>Welcome to PrimitiveKit</h1>
            <p>Build beautiful UIs with zero hardcoded values.</p>
          </div>
          
          <pk-divider />
          
          <div>
            <label for="name">Your Name</label>
            <pk-input
              id="name"
              placeholder="Enter your name"
              [(ngModel)]="name"
            />
          </div>
          
          <pk-button variant="primary" (click)="handleClick()">
            Say Hello
          </pk-button>
        </pk-stack>
      </pk-card>
    </div>
  `
})
export class AppComponent {
  name = '';

  handleClick() {
    alert(`Hello, ${this.name || 'World'}!`);
  }
}

<script lang="ts">
  import { 
    Card, 
    Button, 
    Badge, 
    Input, 
    Stack,
    Divider 
  } from '@primitivekit/svelte';
  import '@primitivekit/svelte/tokens/tokens.css';
  
  let name = '';
  
  function handleClick() {
    alert(`Hello, ${name || 'World'}!`);
  }
</script>

<div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
  <Card variant="elevated">
    <Stack direction="vertical" spacing="lg">
      <div>
        <Badge variant="solid" color="primary">New Feature</Badge>
        <h1>Welcome to PrimitiveKit</h1>
        <p>Build beautiful UIs with zero hardcoded values.</p>
      </div>
      
      <Divider />
      
      <div>
        <label for="name">Your Name</label>
        <Input
          id="name"
          placeholder="Enter your name"
          bind:value={name}
        />
      </div>
      
      <Button variant="primary" on:click={handleClick}>
        Say Hello
      </Button>
    </Stack>
  </Card>
</div>

---
import { 
  Card, 
  Button, 
  Badge, 
  Input, 
  Stack,
  Divider 
} from '@primitivekit/astro';
import '@primitivekit/astro/tokens/tokens.css';
---

<div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
  <Card variant="elevated">
    <Stack direction="vertical" spacing="lg">
      <div>
        <Badge variant="solid" color="primary">New Feature</Badge>
        <h1>Welcome to PrimitiveKit</h1>
        <p>Build beautiful UIs with zero hardcoded values.</p>
      </div>
      
      <Divider />
      
      <div>
        <label for="name">Your Name</label>
        <Input
          id="name"
          placeholder="Enter your name"
        />
      </div>
      
      <Button variant="primary">
        Say Hello
      </Button>
    </Stack>
  </Card>
</div>

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

const app = document.getElementById('app');

const badge = new Badge({
  variant: 'solid',
  color: 'primary',
  text: 'New Feature'
});

const input = new Input({
  id: 'name',
  placeholder: 'Enter your name'
});

const button = new Button({
  variant: 'primary',
  text: 'Say Hello',
  onClick: () => {
    const name = input.getValue();
    alert(`Hello, ${name || 'World'}!`);
  }
});

const divider = new Divider();

const stack = new Stack({
  direction: 'vertical',
  spacing: 'lg',
  children: [
    '<div>' +
      badge.element.outerHTML +
      '<h1>Welcome to PrimitiveKit</h1>' +
      '<p>Build beautiful UIs with zero hardcoded values.</p>' +
    '</div>',
    divider,
    '<div><label for="name">Your Name</label></div>',
    input,
    button
  ]
});

const card = new Card({
  variant: 'elevated',
  children: [stack]
});

card.mount(app);

Next Steps

Browse Components - Explore all available components
Customization Guide - Learn how to customize components
Design Tokens - Understand the token system
Accessibility - Learn about accessibility features

Need Help?

GitHub Issues - Report bugs
GitHub Discussions - Ask questions
NPM - View package details

Accessibility Design Tokens

Quick Start

Quick Start

1. Install

2. Import Design Tokens

3. Use Components

4. Customize (Optional)

Complete Example

Next Steps

Need Help?

Choose Your Framework

React

Vue

Angular

Svelte

Astro

Vanilla JS