Type Safe Prop Schemas That Work Across React, Vue, and Svelte in 2025: A Universal Component Library Strategy

 "required": ["text", "link"]
 }
 },
 "required": ["title"]
}This definition describes the component contract without referencing React, Vue, or Svelte. It specifies which fields are required, their types, and validation constraints. From this single definition, we can generate TypeScript interfaces for each framework.

Zod offers an alternative approach with superior TypeScript integration. Zod schemas are written in TypeScript and provide both type inference and runtime validation. A Zod schema for the same component:

typescript
import { z } from 'zod';

const HeroBannerSchema = z. object({
title: z. string(). max(100),
subtitle: z. string(). max(200). optional(),
backgroundImage: z. string(). url(). optional(),
ctaButton: z. object({
text: z. string(),
link: z. string()
}). optional()
});

type HeroBannerProps = z. infer;

The Zod approach provides immediate type safety within TypeScript. However, sharing Zod schemas across frameworks requires careful packaging. The schema must live in a shared package that each framework imports, ensuring that updates propagate automatically.

## Practical Implementation

Implementing universal schemas requires CLI tooling that transforms definitions into framework specific code. This tooling runs at build time, generating type files that developers import into their components.

For JSON Schema based workflows, tools like json schema to typescript compile schemas into type definitions. A typical workflow involves storing schemas in a central directory, then running a generator that outputs React types, Vue types, and Svelte types into separate directories.

The generated React types look familiar:

typescript
export interface HeroBannerProps {
title: string;
subtitle?: string;
backgroundImage?: string;
ctaButton?: {
text: string;
link: string;
};
}

For Vue, the generator might produce:

typescript
export interface HeroBannerProps {
title: string;
subtitle?: string;
backgroundImage?: string;
ctaButton?: {
text: string;
link: string;
};
}

While the TypeScript interfaces look similar, the Vue implementation requires additional considerations for the Composition API. The generator might also produce runtime validators using Vue specific validation libraries, or developers can use the TypeScript interface directly with defineProps.

Svelte components benefit from the same generated types:

typescript
export interface HeroBannerProps {
title: string;
subtitle?: string;
backgroundImage?: string;
ctaButton?: {
text: string;
link: string;
};
}

In Svelte, these types annotate the component exports:

svelte

The critical advantage appears when updating the schema. Changing the maxLength of the title field in the JSON Schema automatically regener

---

*Originally published on [Oaysus Blog](https://oaysus.com/blog/type-safe-prop-schemas-that-work-across-react-vue-and-svelte-in-2025-a-universal-component-library-s). Oaysus is a visual page builder where developers build components and marketing teams create pages visually.*