https://github.com/ankhorage/zora

ZORA — an opinionated UI kit for React Native + Web built on top of @ankhorage/surface.
https://github.com/ankhorage/zora

ankhorage component-library cross-platform design-system design-tokens expo frontend mobile-ui react-native react-native-web theming typescript ui-components ui-kit web-ui zora

Last synced: 2 days ago
JSON representation

ZORA — an opinionated UI kit for React Native + Web built on top of @ankhorage/surface.

• Host: GitHub
• URL: https://github.com/ankhorage/zora
• Owner: ankhorage
• License: mit
• Created: 2026-04-18T14:59:13.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2026-06-09T03:59:02.000Z (8 days ago)
• Last Synced: 2026-06-09T05:24:35.281Z (8 days ago)
• Topics: ankhorage, component-library, cross-platform, design-system, design-tokens, expo, frontend, mobile-ui, react-native, react-native-web, theming, typescript, ui-components, ui-kit, web-ui, zora
• Language: HTML
• Homepage: https://ankhorage.com
• Size: 2.52 MB
• Stars: 3
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Agents: AGENTS.md

Awesome Lists containing this project

README

          


# ZORA

![license: MIT](././paradox/badges/license.svg) ![npm: v2.8.0](././paradox/badges/npm.svg) ![runtime: bun](././paradox/badges/runtime.svg) ![typescript: strict](././paradox/badges/typescript.svg) ![eslint: checked](././paradox/badges/eslint.svg) ![prettier: checked](././paradox/badges/prettier.svg) ![build: checked](././paradox/badges/build.svg) ![tests: checked](././paradox/badges/tests.svg) ![docs: paradox](././paradox/badges/docs.svg)

Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.

## Usage

### Minimal ZORA app root.

Use `ZoraProvider` once at the application root, place `AppShell` inside it,

and use `AppBar` as the default header slot for a simple app frame.

Source: `examples/basic-app/App.tsx`

```tsx

import {

  AppBar,

  AppShell,

  Screen,

  ScreenSection,

  Text,

  ZoraProvider,

  type ZoraTheme,

} from '@ankhorage/zora';

const basicTheme: ZoraTheme = {

  id: 'basic-app',

  name: 'Basic app',

  appCategory: 'developer_tools',

  primaryColor: '#0b6e99',

  harmony: 'analogous',

};

export default function BasicApp() {

  return (

    

      }>

        

          

            Build your app content inside the shell.

          

        

      

    

  );

}

```

## Generated documentation

- [Interactive documentation app](././paradox/index.html)

- [Public API reference](././paradox/exports.md)

- [Component registry](././paradox/components.md)

- [Architecture overview](././paradox/diagrams/architecture-overview.mmd)

- [Module relationships](././paradox/diagrams/module-relationships.mmd)

- [Export graph](././paradox/diagrams/export-graph.mmd)

- [createZoraThemeConfig sequence](././paradox/diagrams/sequences/create-zora-theme-config.mmd)

- [resolveAvatarInitials sequence](././paradox/diagrams/sequences/resolve-avatar-initials.mmd)

- [resolveOAuthProviderIcon sequence](././paradox/diagrams/sequences/resolve-oauth-provider-icon.mmd)

- [resolveOAuthProviderLabel sequence](././paradox/diagrams/sequences/resolve-oauth-provider-label.mmd)

- [SelectableItem sequence](././paradox/diagrams/sequences/selectable-item.mmd)

- [SelectionProvider sequence](././paradox/diagrams/sequences/selection-provider.mmd)

- [useFormController sequence](././paradox/diagrams/sequences/use-form-controller.mmd)

- [useZoraTheme sequence](././paradox/diagrams/sequences/use-zora-theme.mmd)

- [validateField sequence](././paradox/diagrams/sequences/validate-field.mmd)

- [validateFields sequence](././paradox/diagrams/sequences/validate-fields.mmd)

- [ZoraProvider sequence](././paradox/diagrams/sequences/zora-provider.mmd)