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.
38+ Production-Ready Components
Complete set of components for any project. From simple buttons to complex data tables, all fully customizable.
600+ Design Tokens
Comprehensive token system following DTCG specification. Every color, spacing, and typography value is a token.
Multi-Framework Support
Works with React, Vue, Svelte, Angular, Astro, and Vanilla JS. Same API across all frameworks.
WCAG 2.1 AA Compliant
Fully accessible with keyboard navigation, screen reader support, and proper ARIA attributes built-in.
TypeScript First
Written in TypeScript with comprehensive type definitions. Full IntelliSense support in your IDE.
Zero Hardcoded Values
Every visual property is customizable via CSS variables. No hardcoded colors, sizes, or spacing anywhere.
Dark Mode Ready
All components support dark mode out of the box. Toggle the theme and everything adapts automatically.
Tree Shakeable & Lightweight
Import only what you need. Modern build tools automatically remove unused components from your bundle.
And Much More...
Responsive design / Customizable themes / Comprehensive docs / Active development / MIT licensed
Quick Start
Get up and running in seconds with your favorite framework.
React
Install and start building with React components
Vue
Use Vue 3 Composition API with PrimitiveKit
Angular
Integrate with Angular standalone components
Svelte
Build reactive UIs with Svelte components
Astro
Create static sites with Astro components
Vanilla JS
Use with plain JavaScript, no framework needed
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/vanillaExample 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?
🎨 Complete Customization
Every component uses CSS variables for styling. Change colors, spacing, borders, shadows - everything - without touching component code.
🚀 Framework Agnostic
Use the same components across React, Vue, Svelte, Angular, Astro, and Vanilla JS. Learn once, use everywhere.
♿ Accessibility First
Built with WCAG 2.1 AA compliance in mind. Keyboard navigation, screen reader support, and proper ARIA attributes out of the box.
📦 Tree Shakeable
Import only what you need. Modern build tools will automatically remove unused components from your bundle.
🎯 Production Ready
Battle-tested components used in production applications. Comprehensive test coverage and documentation.
🌙 Dark Mode Ready
All components support dark mode out of the box. Just toggle the theme and everything adapts automatically.
Explore Components
Browse our complete collection of components organized by category.
Layout Components
Card, Container, Grid, Stack, Space, Divider
Form Components
Button, Input, Select, Checkbox, Radio, Switch, Textarea, Slider, Form, Upload
Feedback Components
Alert, Badge, Spinner, Progress, Skeleton
Navigation Components
Link, Breadcrumb, Tabs, Menu, Steps, Pagination
Overlay Components
Modal, Drawer, Tooltip, Popover, Dropdown
Data Display Components
Avatar, Tag, Table, Collapse, Image, Empty, Typography