Skip to contentAsheeUIAsheeUI

Write it once.
Ship it everywhere.

One component library for React and React Native. A single configuration cascade decides the look, both renderers resolve the same contract, and every page of this site is built from the components it documents.

components
61
components
families
8
families
live demos
192
live demos
platforms
2
platforms

The library

Real components, running here.

Every tile below mounts the same demo file its documentation page uses, if a component is broken, this page is broken too.

Why it is built this way

A design system that behaves like one.

  • One cascade, four tiers

    An instance prop wins, then the component's own entry, then the application default, then the fallback. Every component resolves the same order, so a decision made once is a decision made everywhere.

  • Themes are configuration

    A palette is a value in an object. Declare it, name it, inherit it, no CSS variables to hand-write, no build step to regenerate, and a custom theme can extend another custom theme.

  • 58 of 61 components cross over

    The compatibility matrix is data, and both renderers resolve the same contract. Where a platform genuinely differs, the matrix says so instead of leaving you to discover it.

  • Accessible before it is pretty

    Roles, keyboard behaviour, focus rings and dismissal are part of the component, not an afterthought bolted on by the application. A layer with no way out is treated as a bug.

Read the reasoning in the cascade and configuration.

Two platforms

The same component, the same props.

58 of 61 components resolve the same contract on a device. The other 3, Breadcrumb, Keyboard, ResizableScreen, are browser concepts the platform already solves, and the matrix says so rather than pretending otherwise.

ReactApp.tsx
import { Button, AsheeUIProvider } from "@asheeui/web";

<AsheeUIProvider>
  <Button variant="faded" color="primary">Save</Button>
</AsheeUIProvider>
React NativeApp.tsx
import { Button, AsheeNativeProvider } from "@asheeui/native";

<AsheeNativeProvider>
  <Button variant="faded" color="primary">Save</Button>
</AsheeNativeProvider>
The classification lives in the native platform page and is enforced by a test, so a component cannot be silently missing from it.
AsheeUI

Start with one component. Keep the same contract.

Install the package, wrap your root, and the cascade takes it from there. When you outgrow the defaults, they are configuration rather than a rewrite.