Universal Component Architecture

Exhuma is an unopinionated, copy-paste headless engineering system. It authors high-performance tactile interactions from fundamental mathematical principles and adapts them into 13 native frontend framework idioms.

20 components
13 ecosystems
0 runtime deps

// 01Philosophy

Philosophy & Motivation

Modern frontend development has been fragmented into isolated package ecosystems. A rich layout engine written in React cannot be cleanly used in Vue 3 or Svelte 5 without bundling multiple megabytes of runtime adapters or polyfills.

Exhuma inverts this relationship. Rather than shipping a monolithic NPM library, Exhuma maintains a canonical mathematical specification for each component and re-synthesizes it into native code.

// 02Ownership

Why Copy-Paste Wins Over Monolithic NPM

Inspired by the triumph of shadcn/ui and Tailwind CSS, we believe developers should own their code. Monolithic component packages introduce:

Dependency Hell: Conflicting peer dependencies during major framework upgrades.
CSS Leaks: Global class collisions and un-overrideable styles.
Bundle Bloat: Unused features bundled into your client bundle.

With Exhuma, the code lives in your repository. You can modify physics, rename props, adjust colors, and tune performance without submitting an upstream PR.

// 03Contracts

The Ecosystem Contract

Every canonical component adheres to 13 strict contracts:

React
.tsx
Next.js 15
App Router
Vue 3 / Nuxt
.vue
Svelte 5 / SvelteKit
.svelte
Angular 18+ Standalone
.ts
SolidJS
.tsx
Astro
.astro
Laravel Blade
.blade.php
Vanilla JS & Scoped CSS
WordPress Gutenberg Block
Universal Web Component
<exhuma-*>
React Native / Expo
.tsx
Flutter / Dart
.dart

// 04Schema

Universal Component Model (UCM)

To guarantee mathematical consistency, each component is implemented against the UCM schema:

schema.ts

export interface UniversalComponent {
  id: string;
  name: string;
  slug: string;
  category: 'cards' | 'layouts' | 'navigation' | 'primitives';
  description: string;
  version: string;
  props: PropDescriptor[];
  defaultProps: Record<string, unknown>;
  dependencies?: Partial<Record<EcosystemFlavor, string[]>>;
  generateCode: (flavor: EcosystemFlavor, props: Record<string, unknown>, options?: { eject?: boolean }) => ComponentFilePayload[];
}

export interface UniversalComponent { id: string; name: string; slug: string; category: 'cards' | 'layouts' | 'navigation' | 'primitives'; description: string; version: string; props: PropDescriptor[]; defaultProps: Record<string, unknown>; dependencies?: Partial<Record<EcosystemFlavor, string[]>>; generateCode: (flavor: EcosystemFlavor, props: Record<string, unknown>, options?: { eject?: boolean }) => ComponentFilePayload[]; }