Examples

Six independently deployable applications exercise the same public Orbz API. They intentionally share the same layout, labels, controls, defaults, and pure CSS presentation. Only the framework integration changes.

The showcase domains are deployment targets. DNS and production deployment are managed separately from this documentation scaffold.

What every example demonstrates

• all five states and their distinct motion profiles
• size and speed controls
• pause, elevation, and reduced-motion behavior
• six built-in presets
• a strict five-color custom palette
• switching cleanly between preset mode and custom-color mode
• framework-native state controlling the same <orb-z> contract
• semantic status text outside the closed Shadow DOM

The identical UI is part of the demonstration: adopting a web component should not produce a different product merely because one surface uses Vue and another uses React.

Run the workspace examples

From the repository root:

pnpm install --frozen-lockfile
pnpm examples

pnpm examples builds Orbz once and then builds all six applications. Start an already-built production example with its root launcher:

pnpm vanilla
pnpm react
pnpm vue
pnpm svelte
pnpm angular
pnpm next

Each launcher uses the port shown in the table, so several examples can run at the same time without competing for one address.

Deploy as separate Vercel projects

Create one Vercel project per example and select the corresponding example folder as that project’s Root Directory:

examples/vanilla
examples/react
examples/vue
examples/svelte
examples/angular
examples/next

Every example is private, has its own framework dependencies and build configuration, and includes a local vercel.json. The examples are repository tooling and showcases; they are not included in the npm package.

Once the current Orbz version is published, each showcase can consume that exact npm version as an ordinary application dependency. It should never import the package’s src/ directory or another example application.

Compare integrations, not designs

Use the examples to answer framework-specific questions:

• Where does browser registration belong?
• How does this framework bind boolean custom-element attributes?
• Which compiler setting recognizes orb-z?
• How does TypeScript obtain OrbzState and OrbzElement?
• Where should a React/Next client boundary begin?

For compact recipes, see Framework recipes. For independently deployed, mixed-framework surfaces, see Orbz in microfrontends.