Skip to contentAsheeUIAsheeUI

AsheeUIProvider

The root provider: the configuration cascade, the theme, and the screen or document it paints.

Umbrella

The portable contract both renderers implement.

Shared

Install

npm install asheeui @asheeui/web

Import

import { AsheeUIProvider } from "asheeui";

The root provider, with one configuration object typechecked on both branches.

One contract and a real implementation on both platforms.

  • Wrap each application's root once; the provider is what makes a component's cascade resolve.

The umbrella is the intersection; see the portable surface for the complete list and the monorepo guide for wiring one shared kit to both applications.

The live examples below run the web branch in this browser. The umbrella is the contract both branches implement; open Web for the browser's extra APIs and Native for the device's behaviour.

Every component resolves its defaults through a configuration cascade, and the provider is where that cascade starts. It takes one config object, resolves it once, and gives every component below it the values it should use. It also paints the palette: the web writes the --ashee-* custom properties, the device follows the platform's colour scheme and applies the same values to its styles.

One provider belongs at each application's root, above the router's outlet on the web and inside the safe-area provider on a device.

import { AsheeUIProvider } from "asheeui";

export function Root({ children }) {
  return (
    <AsheeUIProvider config={{ defaultTheme: "system", defaultRadius: "sm" }}>
      {children}
    </AsheeUIProvider>
  );
}

The same type on both branches

AsheeConfig is the umbrella's name for the configuration type: the web branch aliases ExternalConfig, the native branch accepts the same object plus its platform-only fields. A shared file can export the object and both applications pass it without a cast.

A component outside the provider

Rendering one outside throws rather than falling back to a silent default. A missing provider is a setup mistake, and a default would hide it until a screen looked subtly wrong in production.

Props