Introduction

What Marwes is

Marwes is a framework-agnostic design system: a pure TypeScript core with thin React, Vue, and Svelte adapters built from the same contracts. Every adapter ships static preset CSS and CSS variables, with no CSS-in-JS runtime required.

How it's organized

Each component family ships one recommended public component, purpose wrappers where relevant, and a base primitive as a deliberate escape hatch. The same contract compiles across React, Vue, and Svelte, and generated public API artifacts keep export names and import paths stable.

Accessible by contract

Core owns semantic contracts through typed recipes: roles, ARIA state, label wiring, and invalid state. Adapters apply that contract to real DOM elements instead of inventing separate accessibility behavior per framework. Consumers remain responsible for truthful labels and page-level structure.

Theming through one provider

Wrap the app once in the framework provider and pass a theme. Resolved theme values flow through CSS variables, so there is no second stylesheet or CSS-in-JS runtime to reconcile.

Where to go next

Pick a framework and render the first component.

• Get started — Install the CLI and render your first accessible component.
• Components — Browse every component family and its recommended public API.
• Theming — Wrap once, provide a theme, and brand every Marwes component.
• Accessibility — Understand the accessibility contract shared by every component.