Skip to content
Open Source & Free

Build Beautiful UIs 
with PrimitiveKit

A flexible, accessible component library with 600+ design tokens. 
Zero hardcoded values. Complete customization for React, Vue, Svelte, Angular & more.

Quick Start

Get up and running in seconds with your favorite framework.

Installation

Choose your framework and get started in seconds.

# React
npm install @primitivekit/react

# Vue
npm install @primitivekit/vue

# Angular
npm install @primitivekit/angular

# Svelte
npm install @primitivekit/svelte

# Astro
npm install @primitivekit/astro

# Vanilla JS
npm install @primitivekit/vanilla

Example Usage

Here’s how easy it is to build beautiful UIs with PrimitiveKit.

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

function App() {
  return (
    <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>
  );
}

export default App;

Why Choose PrimitiveKit?

Explore Components

Browse our complete collection of components organized by category.

Ready to Get Started?