Accessibility in core (no framework)
IntermediatecoreMeasuring contrast between theme tokens and validating a whole theme.
@themvora/core1 file3 APIsExamples
Examples you can run
Every example here is a real source tree in the Themvora repository — a starter app for each framework integration, plus focused implementations of a single feature. The code shown is the file itself, read from examples/ at build time.
Verified with Themvora 2.0.0·Updated September 18, 2026
How these differ from the Showcase
The Showcase is what people have built with Themvora. This page is how to build it: small, runnable implementations you can copy and adapt.
14
Starter apps
one per framework integration
23
Concept examples
focused on a single feature
6 / 12 / 5
Complexity spread
beginner / intermediate / advanced
Framework
Concept
Complexity
Package
37 of 37 examples
Starter apps 14
One complete runnable app per framework integration, each implementing the setup from its framework guide. Clone the repo, run the command, and you have a working themed app.
AngularIntermediate
Angular DI providers and the scope directive.
@themvora/angular@themvora/app-shared@themvora/core@themvora/tailwindpnpm --filter @themvora/app-angular devAstroIntermediate
Astro integration with React islands.
@themvora/app-shared@themvora/astro@themvora/core@themvora/tailwindpnpm --filter @themvora/app-astro devAstro (native)Beginner
The native ThemeScope and inline script — no client framework at all.
@themvora/astro@themvora/corepnpm --filter @themvora/app-astro-native devAstro + ReactIntermediate
The Astro integration with a React island and the React hooks.
@themvora/astro@themvora/corepnpm --filter @themvora/app-astro-react devNext.jsIntermediate
App Router with server-side theme resolution.
@themvora/app-shared@themvora/core@themvora/next@themvora/react@themvora/tailwindpnpm --filter @themvora/app-nextjs devNuxtIntermediate
Nuxt module with SSR and cookie persistence.
@themvora/app-shared@themvora/core@themvora/nuxt@themvora/tailwind@themvora/vuepnpm --filter @themvora/app-nuxt devReactBeginner
React 19 with the provider and hooks, built by Vite.
@themvora/app-shared@themvora/core@themvora/react@themvora/tailwindpnpm --filter @themvora/app-react devRemixIntermediate
Remix v2 with loader-side theme resolution.
@themvora/app-shared@themvora/core@themvora/react@themvora/remix@themvora/tailwindpnpm --filter @themvora/app-remix devSolidJSBeginner
Solid signals, built by Vite.
@themvora/app-shared@themvora/core@themvora/solid@themvora/tailwindpnpm --filter @themvora/app-solid devSvelte 5Beginner
Svelte 5 runes, built by Vite.
@themvora/app-shared@themvora/core@themvora/svelte@themvora/tailwindpnpm --filter @themvora/app-svelte devVanilla JSBeginner
The runtime driven directly, with no build step and no framework.
@themvora/corepnpm --filter @themvora/app-vanilla-js devVue 3Beginner
Vue 3 with the plugin and composables, built by Vite.
@themvora/app-shared@themvora/core@themvora/tailwind@themvora/vuepnpm --filter @themvora/app-vue devWeb ComponentsBeginner
Custom elements with no framework at all.
@themvora/core@themvora/webpnpm --filter @themvora/app-web devConcept examples 23
Focused implementations of a single Themvora feature. Each one is a real source tree in the repository — the code below is the file itself, read from examples/, not a transcription of it.
Basic theme in React
BeginnerreactThe minimum viable Themvora setup: define a theme, wrap the app, read the active theme.
@themvora/core@themvora/react3 files3 APIsCli in core (no framework)
IntermediatecoreDriving the CLI from code instead of a shell.
@themvora/cli1 file1 APIsCustom scrollbar in React
BeginnerreactA theme-aware overlay scrollbar that follows the active theme.
@themvora/core@themvora/react3 files3 APIsDevtools in React
BeginnerreactInspecting the live theme during development.
@themvora/core@themvora/react3 files3 APIsFamilies modes in React
BeginnerreactSwitching theme family and light/dark mode independently.
@themvora/core@themvora/react3 files7 APIsHistory in React
IntermediatereactUndo and redo across theme changes.
@themvora/core@themvora/react3 files4 APIsMulti window sync in core (no framework)
AdvancedcoreKeeping the theme in sync across tabs and windows.
@themvora/core1 file1 APIsPersistence in React
IntermediatereactPersisting the selection so it survives a reload, with a fingerprint guard.
@themvora/core@themvora/react3 files4 APIsPlugins in core (no framework)
AdvancedcoreExtending the runtime with a plugin.
@themvora/core1 file3 APIsRuntime in core (no framework)
IntermediatecoreCreating and driving a runtime directly, without a framework binding.
@themvora/core1 file2 APIsScheduling in React
IntermediatereactSwitching theme automatically on a schedule.
@themvora/core@themvora/react3 files3 APIsScopes in core (no framework)
IntermediatecoreResolving a scoped theme and emitting its variables for a subtree.
@themvora/core1 file4 APIsSnapshots in React
AdvancedreactCapturing and restoring a full runtime snapshot.
@themvora/core@themvora/react3 files6 APIsSunrise sunset in core (no framework)
AdvancedcoreComputing solar times for a location and switching the theme at dusk and dawn.
@themvora/core1 file3 APIsTheme generation in core (no framework)
IntermediatecoreDeriving a complete light/dark theme pair from a single seed color.
@themvora/core1 file1 APIsTheme scope in React
IntermediatereactApplying a scoped theme declaratively with `<ThemeScope>`.
@themvora/core@themvora/react3 files4 APIsThemes in core (no framework)
BeginnercoreDefining, extending and resolving themes, and reading a theme's family and mode.
@themvora/core1 file5 APIsTokens in core (no framework)
BeginnercoreTurning a theme's token tree into flat CSS custom properties.
@themvora/core1 file3 APIsTransitions in React
IntermediatereactAnimating a theme change instead of swapping it instantly.
@themvora/core@themvora/react3 files3 APIsZero flash in core (no framework)
AdvancedcoreEmitting a pre-paint bootstrap script that applies the stored theme before first paint.
@themvora/core1 file2 APIs3Running an example locally
The examples are part of the pnpm workspace, so the @themvora/* packages resolve to the local source rather than to npm. That means an example always exercises the version in the repository.
# from the repository root pnpm install # run a starter app pnpm --filter @themvora/example-react dev # type-check and build it pnpm --filter @themvora/example-react build
Concept examples are smaller trees inside examples/<feature>/<framework>/. Copy the files into a project that already has the packages installed — each one lists exactly what it needs.
Live demos
These examples are not deployed, so there is no hosted demo to link to — the code and the run command are the demo. Where this site has a genuinely interactive surface for the same concept (the Playground, Theme Studio, Accessibility Lab), the example links to it.
Related documentation
Framework guides→
The setup each starter app implements.
Recipes→
Task-oriented walkthroughs for common goals.
Showcase→
What people have built with Themvora.
Playground→
Drive the runtime live in the browser.
Package map→
Which packages an example pulls in, and why.
Quick Start→
The shortest path to a themed app.